feat(svelte): check every <script>

At least until a matching import is found, still bail on the first one for optimization simplicity reasons. Fixes #818
tivac · Mar 10, 2022 · 99fc421 · 99fc421
1 parent baee1b1
commit 99fc421
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 16 deletions.
diff --git a/packages/svelte/script.js b/packages/svelte/script.js
@@ -3,7 +3,7 @@
 const { init, parse } = require("es-module-lexer");
 const parseImports = require("parse-es6-imports");
 
-const scriptRegex = /<script[\S\s]*?>([\S\s]*?)<\/script>/im;
+const scriptRegex = /<script[\S\s]*?>(?<contents>[\S\s]*?)<\/script>/gim;
 
 // eslint-disable-next-line max-statements
 exports.extractImport = async ({
@@ -15,28 +15,34 @@ exports.extractImport = async ({
 }) => {
     await init;
 
-    const script = source.match(scriptRegex);
-
-    if(!script) {
-        return false;
-    }
-
-    const [ , contents ] = script;
-    const [ imports ] = parse(contents);
+    const scripts = source.matchAll(scriptRegex);
     let href;
     let ident;
 
-    for(const { n : name, ss : start, se : end, d : dynamic } of imports) {
-        if(!filter(name) || dynamic > -1) {
+    for(const script of scripts) {
+        if(!script) {
             continue;
         }
 
-        const [ details ] = parseImports(contents.substring(start, end));
-
-        href = name;
-        ident = details.defaultImport;
+        const { contents } = script.groups;
+        const [ imports ] = parse(contents);
+
+        for(const { n : name, ss : start, se : end, d : dynamic } of imports) {
+            if(!filter(name) || dynamic > -1) {
+                continue;
+            }
+
+            const [ details ] = parseImports(contents.substring(start, end));
+
+            href = name;
+            ident = details.defaultImport;
+
+            break;
+        }
 
-        break;
+        if(href) {
+            break;
+        }
     }
 
     if(!href) {

diff --git a/packages/svelte/test/__snapshots__/svelte.test.js.snap b/packages/svelte/test/__snapshots__/svelte.test.js.snap
@@ -277,6 +277,48 @@ exports[`/svelte.js should extract CSS - <style> 2`] = `
 "
 `;
 
+exports[`/svelte.js should find imports in any <script> tag 1`] = `
+"<div class=\\"mc_flex mc_wrapper\\">
+    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <div class=\\"mc_fooga mc_wooga mc_bd\\">
+        <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
+    </div>
+</div>
+
+<script context=\\"module\\">
+	export const prerender = true;
+</script>
+
+<script>
+    import styles from \\"./external.css\\";
+
+    const bool = false;
+</script>
+"
+`;
+
+exports[`/svelte.js should find imports in any <script> tag 2`] = `
+"/* packages/svelte/test/specimens/simple.css */
+.mc_fooga {
+    color: red;
+}
+/* packages/svelte/test/specimens/dependencies.css */
+.mc_wooga {
+    background: blue;
+}
+/* packages/svelte/test/specimens/external.css */
+.mc_flex {
+    display: flex;
+}
+.mc_text {
+    color: #000;
+}
+.mc_active {
+    color: #F00;
+}
+"
+`;
+
 exports[`/svelte.js should handle errors: empty css file - <link> 1`] = `"[@modular-css/svelte] Unable to find .nope, .nopedynope, .alsonope in \\"./empty.css\\""`;
 
 exports[`/svelte.js should handle errors: empty css file - <link> 2`] = `

diff --git a/packages/svelte/test/specimens/script-multiple.svelte b/packages/svelte/test/specimens/script-multiple.svelte
@@ -0,0 +1,16 @@
+<div class="{styles.wrapper}">
+    <h1 class="{styles.hd}">Head</h1>
+    <div class="{styles.bd}">
+        <p class="{bool ? styles.text : styles.active }">Text</p>
+    </div>
+</div>
+
+<script context="module">
+	export const prerender = true;
+</script>
+
+<script>
+    import styles from "./external.css";
+
+    const bool = false;
+</script>
diff --git a/packages/svelte/test/svelte.test.js b/packages/svelte/test/svelte.test.js
@@ -512,4 +512,25 @@ describe("/svelte.js", () => {
 
         expect(output.css).toMatchSnapshot();
     });
+
+    it("should find imports in any <script> tag", async () => {
+        const filename = require.resolve("./specimens/script-multiple.svelte");
+        const { processor, preprocess } = plugin({
+            namer,
+        });
+
+        const processed = await svelte.preprocess(
+            fs.readFileSync(filename, "utf8"),
+            {
+                ...preprocess,
+                filename,
+            },
+        );
+
+        expect(processed.toString()).toMatchSnapshot();
+
+        const output = await processor.output();
+
+        expect(output.css).toMatchSnapshot();
+    });
 });