fix: tweak value support in svelte preprocessor

tivac · Nov 8, 2018 · 7cc0f22 · 7cc0f22
1 parent 18c42b6
commit 7cc0f22
Show file tree

Hide file tree

Showing 8 changed files with 3,144 additions and 2,597 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/svelte/svelte.js b/packages/svelte/svelte.js
@@ -107,16 +107,24 @@ module.exports = (config = false) => {
 
             source = source
                 // Replace {css.<key>} values
-                // And also ${css.<key>} template string values first
+                // Note extra exclusion to avoid accidentally matching ${css.<key>}
                 .replace(
-                    new RegExp(`\\$?{css\\.(${selectors})}`, "gm"),
-                    (match, key) => (Array.isArray(exported[key]) ? exported[key].join(" ") : exported[key])
+                    new RegExp(`([^$]){css\\.(${selectors})}`, "gm"),
+                    (match, prefix, key) => {
+                        const replacement = Array.isArray(exported[key]) ? exported[key].join(" ") : exported[key];
+
+                        return `${prefix}${replacement}`;
+                    }
                 )
 
-                // Then any remaining bare css.<key> values
+                // Then any remaining css.<key> values
                 .replace(
                     new RegExp(`(\\b)css\\.(${selectors})(\\b)`, "gm"),
-                    (match, prefix, key, suffix) => (Array.isArray(exported[key]) ? `${prefix}"${exported[key].join(" ")}"${suffix}` : exported[key])
+                    (match, prefix, key, suffix) => {
+                        const replacement = Array.isArray(exported[key]) ? exported[key].join(" ") : exported[key];
+
+                        return `${prefix}"${replacement}"${suffix}`;
+                    }
                 );
         }
 

diff --git a/packages/svelte/test/__snapshots__/svelte.test.js.snap b/packages/svelte/test/__snapshots__/svelte.test.js.snap
@@ -165,6 +165,53 @@ exports[`/svelte.js should extract CSS from a <link> tag ("unquoted") 2`] = `
 "
 `;
 
+exports[`/svelte.js should extract CSS from a <link> tag ("values") 1`] = `
+"
+
+<div
+    data-simple=\\"color: #BEEFED\\"
+    data-expression=\\"{\\"color: \\" + \\"#BEEFED\\"}\\"
+    data-template=\\"{\`color: \${\\"#BEEFED\\"}\`}\\"
+>
+</div>
+
+<script>
+import css from \\"./external.css\\";
+
+
+    export default {
+        data : () => ({
+            template : \`color: \${\\"#BEEFED\\"}\`,
+            expression : \\"color: \\" + \\"#BEEFED\\",
+        })
+    };
+</script>
+"
+`;
+
+exports[`/svelte.js should extract CSS from a <link> tag ("values") 2`] = `
+"/* packages/svelte/test/specimens/simple.css */
+.fooga {
+    color: red;
+}
+/* packages/svelte/test/specimens/dependencies.css */
+.wooga {
+
+    background: blue;
+}
+/* packages/svelte/test/specimens/external.css */
+.flex {
+    display: flex;
+}
+.text {
+    color: #000;
+}
+.active {
+    color: #F00;
+}
+"
+`;
+
 exports[`/svelte.js should extract CSS from a <style> tag 1`] = `
 "<div class=\\"flex wrapper\\">
     <h1 class=\\"flex fooga hd\\">Head</h1>
@@ -370,35 +417,6 @@ exports[`/svelte.js should remove files before reprocessing when config.clean is
 }"
 `;
 
-exports[`/svelte.js should support exported values used standalone in components 1`] = `
-"
-
-<div {style}>
-    Standalone value in the style tag
-</div>
-
-<div style=\`color: #BEEFED\`>
-    Style supplied as a template string from css
-</div>
-
-<div style=\\"color: #BEEFED\\">
-    Style supplied as a svelte-template string from css
-</div>
-
-
-<script>
-import css from \\"./external-with-values.css\\";
-
-
-    export default {
-        computed : {
-            style : () => \`color: #BEEFED\`
-        }
-    };
-</script>
-"
-`;
-
 exports[`/svelte.js should support verbose output: "<link>" 1`] = `
 Array [
   Array [
@@ -463,7 +481,7 @@ Array [
   ],
   Array [
     "[svelte]",
-    "[\\"flex\\",\\"wrapper\\",\\"hd\\",\\"bd\\",\\"text\\",\\"active\\"]",
+    "[\\"color\\",\\"flex\\",\\"wrapper\\",\\"hd\\",\\"bd\\",\\"text\\",\\"active\\"]",
   ],
 ]
 `;

diff --git a/packages/svelte/test/specimens/external-values.html b/packages/svelte/test/specimens/external-values.html
@@ -0,0 +1,17 @@
+<link rel="stylesheet" href="./external.css">
+
+<div
+    data-simple="color: {css.color}"
+    data-expression="{"color: " + css.color}"
+    data-template="{`color: ${css.color}`}"
+>
+</div>
+
+<script>
+    export default {
+        data : () => ({
+            template : `color: ${css.color}`,
+            expression : "color: " + css.color,
+        })
+    };
+</script>
diff --git a/packages/svelte/test/specimens/external-with-values.css b/packages/svelte/test/specimens/external-with-values.css
diff --git a/packages/svelte/test/specimens/external-with-values.html b/packages/svelte/test/specimens/external-with-values.html
diff --git a/packages/svelte/test/specimens/external.css b/packages/svelte/test/specimens/external.css
@@ -1,3 +1,5 @@
+@value color: #BEEFED;
+
 .flex {
     display: flex;
 }

diff --git a/packages/svelte/test/svelte.test.js b/packages/svelte/test/svelte.test.js
@@ -38,6 +38,7 @@ describe("/svelte.js", () => {
         ${"external-script.html"}   | ${"existing script"}
         ${"external-single.html"}   | ${"single quotes"}
         ${"external-unquoted.html"} | ${"unquoted"}
+        ${"external-values.html"}   | ${"values"}
     `("should extract CSS from a <link> tag ($title)", async ({ specimen }) => {
         const filename = require.resolve(`./specimens/${specimen}`);
         const { processor, preprocess } = plugin({
@@ -207,19 +208,4 @@ describe("/svelte.js", () => {
 
         expect(output.css).toMatchSnapshot();
     });
-
-    it("should support exported values used standalone in components", async () => {
-        const filename = require.resolve(`./specimens/external-with-values.html`);
-
-        const { preprocess } = plugin({
-            namer,
-        });
-
-        const processed = await svelte.preprocess(
-            fs.readFileSync(filename, "utf8"),
-            Object.assign({}, preprocess, { filename })
-        );
-
-        expect(processed.toString()).toMatchSnapshot();
-    });
 });