From acd57f7a055a0a89acef419dacec8c162812212a Mon Sep 17 00:00:00 2001
From: Ryan Mark <rgmark@gmail.com>
Date: Fri, 4 Sep 2026 12:50:04 -0700
Subject: [PATCH 1/4] Find a scoped <style> regardless of what precedes it

The Template visitor picked the block to extract with
`node.body.find((n) => n.tag === 'style')` -- the first style element, scoped
or not -- while the ElementNode visitor removes every scoped element. So a
global <style> sitting earlier in the template made the guard below it false,
skipped the whole extraction branch, and left the scoped tag to be deleted
anyway. Its CSS was emitted nowhere and nothing said so; addInfo() never ran
either, so the classes were never collected and the CSS could not have
matched its elements in the first place.

Selecting by the scoped attribute rather than the tag fixes that ordering.

A second <style scoped> was lost the same way, since only the first is ever
extracted and the rest are removed regardless. Supporting several blocks is a
larger question, so this refuses one out loud instead of answering it
quietly: emitting the first and discarding the second is the one behaviour
nobody wants.

Fixes #423

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ember-scoped-css/src/build/template-plugin.js | 28 ++++++-
 .../src/build/template-plugin.test.ts         | 80 +++++++++++++++++++
 2 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/ember-scoped-css/src/build/template-plugin.js b/ember-scoped-css/src/build/template-plugin.js
index 943f7bcd..3d4fdfdb 100644
--- a/ember-scoped-css/src/build/template-plugin.js
+++ b/ember-scoped-css/src/build/template-plugin.js
@@ -129,10 +129,34 @@ export function createPlugin(config) {
           /**
            * We only allow a scoped <style> at the root
            */
-          let styleTag = node.body.find(
-            (n) => n.type === 'ElementNode' && n.tag === 'style',
+          let styleTags = node.body.filter(
+            (n) =>
+              n.type === 'ElementNode' &&
+              n.tag === 'style' &&
+              hasScopedAttribute(n),
           );
 
+          /**
+           * Selecting by tag alone used to pick a global <style> sitting
+           * earlier in the template, which made hasScopedAttribute below false
+           * and skipped this whole branch -- while the ElementNode visitor
+           * still removed the scoped tag. The CSS was emitted nowhere and
+           * nothing said so.
+           */
+          let styleTag = styleTags[0];
+
+          /**
+           * Only the first scoped block is ever extracted, and the rest are
+           * removed by the ElementNode visitor, so a second one silently lost
+           * its CSS the same way. Refuse it out loud instead.
+           */
+          if (styleTags.length > 1) {
+            throw new Error(
+              'Only one <style scoped> is supported per template, ' +
+                `but ${styleTags.length} were found. Merge them into one.`,
+            );
+          }
+
           if (hasScopedAttribute(styleTag)) {
             let css = textContent(styleTag);
             let lang = getLangAttribute(styleTag);
diff --git a/ember-scoped-css/src/build/template-plugin.test.ts b/ember-scoped-css/src/build/template-plugin.test.ts
index dae62dac..d9434ca7 100644
--- a/ember-scoped-css/src/build/template-plugin.test.ts
+++ b/ember-scoped-css/src/build/template-plugin.test.ts
@@ -333,3 +333,83 @@ describe('lang attribute (SCSS preprocessor)', () => {
     `);
   });
 });
+
+/**
+ * https://github.com/auditboard/ember-scoped-css/issues/423
+ *
+ * The Template visitor used to pick the block to extract with
+ * `node.body.find((n) => n.tag === 'style')` -- the first style element,
+ * scoped or not -- while the ElementNode visitor removes *every* scoped
+ * element. So a scoped block the Template visitor never saw was still deleted
+ * from the output, and its CSS was emitted nowhere. No error, no warning.
+ *
+ * Both blocks below are at the root, so neither is rejected by the nesting
+ * rule; the ordering is the only thing under test.
+ */
+describe('a scoped <style> is found regardless of what precedes it', () => {
+  it('extracts the scoped CSS when a global <style> comes first', async () => {
+    let output = await transform(`
+      export const Foo = <template>
+        <div class="scoped">hi</div>
+        <style>
+          .global { color: red; }
+        </style>
+        <style scoped>
+          .scoped { color: blue; }
+        </style>
+      </template>;
+    `);
+
+    let emitted = virtualImportUrlsOf(output).map(decodeURIComponent).join('');
+
+    // Soft, so one run shows both halves of the loss rather than stopping at
+    // the first: the stylesheet was not emitted, and addInfo() never ran
+    // either, so the class was never collected and the CSS could not have
+    // matched the element anyway.
+    expect.soft(emitted).toContain('.scoped');
+    expect
+      .soft(templateContentsOf(output).join(''))
+      .toMatch(/class="scoped_\w+"/);
+  });
+
+  it('leaves a preceding global <style> in the template', async () => {
+    let output = await transform(`
+      export const Foo = <template>
+        <style>
+          .global { color: red; }
+        </style>
+        <style scoped>
+          .scoped { color: blue; }
+        </style>
+      </template>;
+    `);
+
+    let template = templateContentsOf(output).join('');
+
+    // The global block is deliberately not scoped, so it ships as written.
+    expect(template).toContain('.global { color: red; }');
+    // The scoped one is extracted to a stylesheet, so its tag is removed.
+    expect(template).not.toContain('.scoped');
+  });
+
+  it('refuses a second <style scoped> rather than dropping its CSS', async () => {
+    let build = () =>
+      transform(`
+        export const Foo = <template>
+          <div class="first second">hi</div>
+          <style scoped>
+            .first { color: blue; }
+          </style>
+          <style scoped>
+            .second { color: green; }
+          </style>
+        </template>;
+      `);
+
+    // Supporting several blocks is a larger question; until it is answered,
+    // an error beats emitting the first and silently discarding the second.
+    await expect(build()).rejects.toThrow(
+      /Only one <style scoped> is supported per template, but 2 were found/,
+    );
+  });
+});

From 54688f5b7bc8979fb810e8c767ddbad34e55938a Mon Sep 17 00:00:00 2001
From: Ryan Mark <rgmark@gmail.com>
Date: Fri, 4 Sep 2026 13:01:51 -0700
Subject: [PATCH 2/4] Look up the scoped <style> after the count check

The count check reads better before anything is pulled out of the
list, and the hasScopedAttribute guard around the body was redundant
-- the filter above already guarantees it. An explicit early return
now covers the only case that guard was really catching: no scoped
<style> in the template at all.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ember-scoped-css/src/build/template-plugin.js | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/ember-scoped-css/src/build/template-plugin.js b/ember-scoped-css/src/build/template-plugin.js
index 3d4fdfdb..d1067f10 100644
--- a/ember-scoped-css/src/build/template-plugin.js
+++ b/ember-scoped-css/src/build/template-plugin.js
@@ -127,7 +127,12 @@ export function createPlugin(config) {
          */
         Template(node) {
           /**
-           * We only allow a scoped <style> at the root
+           * We only allow a scoped <style> at the root.
+           *
+           * Selecting by tag alone used to pick a global <style> sitting
+           * earlier in the template, which skipped this whole branch --
+           * while the ElementNode visitor still removed the scoped tag.
+           * The CSS was emitted nowhere and nothing said so.
            */
           let styleTags = node.body.filter(
             (n) =>
@@ -136,15 +141,6 @@ export function createPlugin(config) {
               hasScopedAttribute(n),
           );
 
-          /**
-           * Selecting by tag alone used to pick a global <style> sitting
-           * earlier in the template, which made hasScopedAttribute below false
-           * and skipped this whole branch -- while the ElementNode visitor
-           * still removed the scoped tag. The CSS was emitted nowhere and
-           * nothing said so.
-           */
-          let styleTag = styleTags[0];
-
           /**
            * Only the first scoped block is ever extracted, and the rest are
            * removed by the ElementNode visitor, so a second one silently lost
@@ -157,37 +153,39 @@ export function createPlugin(config) {
             );
           }
 
-          if (hasScopedAttribute(styleTag)) {
-            let css = textContent(styleTag);
-            let lang = getLangAttribute(styleTag);
-            let info = getCSSContentInfo(css, lang);
+          let styleTag = styleTags[0];
 
-            addInfo(info);
+          if (!styleTag) return;
 
-            if (hasInlineAttributeWithoutLang(styleTag)) {
-              /**
-               * This will be handled in ElementNode traversal
-               */
-              return;
-            }
+          let css = textContent(styleTag);
+          let lang = getLangAttribute(styleTag);
+          let info = getCSSContentInfo(css, lang);
 
-            if (lang) {
-              /**
-               * For <style scoped inline lang="..."> we cannot preprocess at Babel-time
-               * (preprocessing is async and requires Vite's ResolvedConfig).
-               * Remove the tag and inject via virtual CSS module and warn user.
-               */
-              console.warn(
-                `[ember-scoped-css] <style scoped inline lang="${lang}"> is not supported ` +
-                  `(preprocessing is async and cannot run at Babel-time). ` +
-                  `Downgrading to non-inline: the style tag will be removed and injected as a virtual CSS module.`,
-              );
-            }
+          addInfo(info);
 
-            let cssRequest = request.inline.create(info.id, postfix, css, lang);
+          if (hasInlineAttributeWithoutLang(styleTag)) {
+            /**
+             * This will be handled in ElementNode traversal
+             */
+            return;
+          }
 
-            env.meta.jsutils.importForSideEffect(cssRequest);
+          if (lang) {
+            /**
+             * For <style scoped inline lang="..."> we cannot preprocess at Babel-time
+             * (preprocessing is async and requires Vite's ResolvedConfig).
+             * Remove the tag and inject via virtual CSS module and warn user.
+             */
+            console.warn(
+              `[ember-scoped-css] <style scoped inline lang="${lang}"> is not supported ` +
+                `(preprocessing is async and cannot run at Babel-time). ` +
+                `Downgrading to non-inline: the style tag will be removed and injected as a virtual CSS module.`,
+            );
           }
+
+          let cssRequest = request.inline.create(info.id, postfix, css, lang);
+
+          env.meta.jsutils.importForSideEffect(cssRequest);
         },
 
         // Visitors broken out like this so we can conditionally

From 8449956f0d6232c3374d83eb457f1e0ee6d3d6e6 Mon Sep 17 00:00:00 2001
From: Ryan Mark <rgmark@gmail.com>
Date: Fri, 4 Sep 2026 13:27:54 -0700
Subject: [PATCH 3/4] Assert the scoped <style> tests with inline snapshots

One snapshot of the whole template says more than a pile of expects:
the scoped class is postfixed, the global block ships as written, the
scoped tag is gone. That subsumes the separate "leaves a preceding
global <style>" test, so it goes.

The second-block case stays a toThrow, matching babel-plugin.test.ts.
Babel prefixes the message with an absolute filename, so a snapshot of
it would only pass on the machine that wrote it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/build/template-plugin.test.ts         | 69 ++++++-------------
 1 file changed, 20 insertions(+), 49 deletions(-)

diff --git a/ember-scoped-css/src/build/template-plugin.test.ts b/ember-scoped-css/src/build/template-plugin.test.ts
index d9434ca7..95ff28b6 100644
--- a/ember-scoped-css/src/build/template-plugin.test.ts
+++ b/ember-scoped-css/src/build/template-plugin.test.ts
@@ -336,15 +336,6 @@ describe('lang attribute (SCSS preprocessor)', () => {
 
 /**
  * https://github.com/auditboard/ember-scoped-css/issues/423
- *
- * The Template visitor used to pick the block to extract with
- * `node.body.find((n) => n.tag === 'style')` -- the first style element,
- * scoped or not -- while the ElementNode visitor removes *every* scoped
- * element. So a scoped block the Template visitor never saw was still deleted
- * from the output, and its CSS was emitted nowhere. No error, no warning.
- *
- * Both blocks below are at the root, so neither is rejected by the nesting
- * rule; the ordering is the only thing under test.
  */
 describe('a scoped <style> is found regardless of what precedes it', () => {
   it('extracts the scoped CSS when a global <style> comes first', async () => {
@@ -360,55 +351,35 @@ describe('a scoped <style> is found regardless of what precedes it', () => {
       </template>;
     `);
 
-    let emitted = virtualImportUrlsOf(output).map(decodeURIComponent).join('');
-
-    // Soft, so one run shows both halves of the loss rather than stopping at
-    // the first: the stylesheet was not emitted, and addInfo() never ran
-    // either, so the class was never collected and the CSS could not have
-    // matched the element anyway.
-    expect.soft(emitted).toContain('.scoped');
-    expect
-      .soft(templateContentsOf(output).join(''))
-      .toMatch(/class="scoped_\w+"/);
+    expect(templateContentsOf(output)).toMatchInlineSnapshot(`
+      [
+        "<div class="scoped_e65d154a1">hi</div>
+      <style>
+        .global { color: red; }
+      </style>",
+      ]
+    `);
+    expect(virtualImportUrlsOf(output)).toMatchInlineSnapshot(`
+      [
+        "./e65d154a1___css-68ede36d709bfa7f8a2994e1702ef010.ember-scoped.css?css=%0A%20%20%20%20%20%20%20%20%20%20.scoped%20%7B%20color%3A%20blue%3B%20%7D%0A%20%20%20%20%20%20%20%20",
+      ]
+    `);
   });
 
-  it('leaves a preceding global <style> in the template', async () => {
-    let output = await transform(`
+  it('refuses a second <style scoped> rather than dropping its CSS', async () => {
+    let build = transform(`
       export const Foo = <template>
-        <style>
-          .global { color: red; }
+        <div class="first second">hi</div>
+        <style scoped>
+          .first { color: blue; }
         </style>
         <style scoped>
-          .scoped { color: blue; }
+          .second { color: green; }
         </style>
       </template>;
     `);
 
-    let template = templateContentsOf(output).join('');
-
-    // The global block is deliberately not scoped, so it ships as written.
-    expect(template).toContain('.global { color: red; }');
-    // The scoped one is extracted to a stylesheet, so its tag is removed.
-    expect(template).not.toContain('.scoped');
-  });
-
-  it('refuses a second <style scoped> rather than dropping its CSS', async () => {
-    let build = () =>
-      transform(`
-        export const Foo = <template>
-          <div class="first second">hi</div>
-          <style scoped>
-            .first { color: blue; }
-          </style>
-          <style scoped>
-            .second { color: green; }
-          </style>
-        </template>;
-      `);
-
-    // Supporting several blocks is a larger question; until it is answered,
-    // an error beats emitting the first and silently discarding the second.
-    await expect(build()).rejects.toThrow(
+    await expect(build).rejects.toThrow(
       /Only one <style scoped> is supported per template, but 2 were found/,
     );
   });

From cee6d1a38def326983a710c18387e11770351098 Mon Sep 17 00:00:00 2001
From: Ryan Mark <rgmark@gmail.com>
Date: Fri, 4 Sep 2026 13:33:49 -0700
Subject: [PATCH 4/4] Drop the added comments from the Template visitor

Same note the tests got: the code and the error message say this
already. Leaves the root-level comment that was here before.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ember-scoped-css/src/build/template-plugin.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/ember-scoped-css/src/build/template-plugin.js b/ember-scoped-css/src/build/template-plugin.js
index d1067f10..6275ffe9 100644
--- a/ember-scoped-css/src/build/template-plugin.js
+++ b/ember-scoped-css/src/build/template-plugin.js
@@ -127,12 +127,7 @@ export function createPlugin(config) {
          */
         Template(node) {
           /**
-           * We only allow a scoped <style> at the root.
-           *
-           * Selecting by tag alone used to pick a global <style> sitting
-           * earlier in the template, which skipped this whole branch --
-           * while the ElementNode visitor still removed the scoped tag.
-           * The CSS was emitted nowhere and nothing said so.
+           * We only allow a scoped <style> at the root
            */
           let styleTags = node.body.filter(
             (n) =>
@@ -141,11 +136,6 @@ export function createPlugin(config) {
               hasScopedAttribute(n),
           );
 
-          /**
-           * Only the first scoped block is ever extracted, and the rest are
-           * removed by the ElementNode visitor, so a second one silently lost
-           * its CSS the same way. Refuse it out loud instead.
-           */
           if (styleTags.length > 1) {
             throw new Error(
               'Only one <style scoped> is supported per template, ' +