fix: Correct replacements of css.<key> values (#436)

tivac · Jun 22, 2018 · b4de308 · b4de308
1 parent f413732
commit b4de308
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 67 deletions.
diff --git a/packages/svelte/src/markup.js b/packages/svelte/src/markup.js
@@ -17,12 +17,12 @@ function updateCss({ content, result }) {
         code : content
             // Replace simple {css.<key>} values first
             .replace(
-                new RegExp(`{css.(${Object.keys(exported).join("|")})}`, "gm"),
+                new RegExp(`{css\\.(${Object.keys(exported).join("|")})}`, "gm"),
                 (match, key) => exported[key].join(" ")
             )
             // Then any remaining bare css.<key> values
             .replace(
-                new RegExp(`(\\b)css.(${Object.keys(exported).join("|")})(\\b)`, "gm"),
+                new RegExp(`(\\b)css\\.(${Object.keys(exported).join("|")})(\\b)`, "gm"),
                 (match, prefix, key, suffix) => `${prefix}"${exported[key].join(" ")}"${suffix}`
             )
     };

diff --git a/packages/svelte/src/methods.js b/packages/svelte/src/methods.js
diff --git a/packages/svelte/test/__snapshots__/svelte.test.js.snap b/packages/svelte/test/__snapshots__/svelte.test.js.snap
@@ -15,7 +15,15 @@ exports[`/svelte.js should extract CSS from a <link> tag (existing script) 1`] =
 export default {
 data : () => ({
     bool : true
-})
+}),
+
+oncreate() {
+    const bd = {
+        flex : \\"flex\\"
+    };
+
+    const style = css[bd.flex];
+}
 };</script>
 "
 `;

diff --git a/packages/svelte/test/specimens/external-script.html b/packages/svelte/test/specimens/external-script.html
@@ -11,6 +11,14 @@ <h1 class="{css.hd}">Head</h1>
 export default {
     data : () => ({
         bool : true
-    })
+    }),
+
+    oncreate() {
+        const bd = {
+            flex : "flex"
+        };
+
+        const style = css[bd.flex];
+    }
 };
 </script>