Find a scoped <style> regardless of what precedes it

ember-scoped-css/src/build/template-plugin.js

@@ -129,41 +129,53 @@ 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),
           );
 
-          if (hasScopedAttribute(styleTag)) {
-            let css = textContent(styleTag);
-            let lang = getLangAttribute(styleTag);
-            let info = getCSSContentInfo(css, lang);
+          if (styleTags.length > 1) {
+            throw new Error(
+              'Only one <style scoped> is supported per template, ' +
+                `but ${styleTags.length} were found. Merge them into one.`,
+            );
+          }
 
-            addInfo(info);
+          let styleTag = styleTags[0];
 
-            if (hasInlineAttributeWithoutLang(styleTag)) {
-              /**
-               * This will be handled in ElementNode traversal
-               */
-              return;
-            }
+          if (!styleTag) return;
 
-            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 css = textContent(styleTag);
+          let lang = getLangAttribute(styleTag);
+          let info = getCSSContentInfo(css, lang);
 
-            let cssRequest = request.inline.create(info.id, postfix, css, lang);
+          addInfo(info);
 
-            env.meta.jsutils.importForSideEffect(cssRequest);
+          if (hasInlineAttributeWithoutLang(styleTag)) {
+            /**
+             * This will be handled in ElementNode traversal
+             */
+            return;
           }
+
+          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

ember-scoped-css/src/build/template-plugin.test.ts

@@ -333,3 +333,54 @@ describe('lang attribute (SCSS preprocessor)', () => {
     `);
   });
 });
+
+/**
+ * https://github.com/auditboard/ember-scoped-css/issues/423
+ */
+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>;
+    `);
+
+    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('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>;
+    `);
+
+    await expect(build).rejects.toThrow(
+      /Only one <style scoped> is supported per template, but 2 were found/,
+    );
+  });
+});