From d48ac67716de579ae5d33dfba73a77ac31f2e429 Mon Sep 17 00:00:00 2001
From: Pat Cavit <github@patcavit.com>
Date: Thu, 28 Mar 2019 13:14:04 -0700
Subject: [PATCH] fix: replace multiple missing values (#576)

* test: failing specimens & snapshot for #575
* fix: add g flag to missing key regex

Fixes #575
---
 packages/svelte/svelte.js                     | 12 ++++----
 .../test/__snapshots__/svelte.test.js.snap    | 28 +++++++++++++++----
 .../specimens/invalid-external-script.html    |  1 +
 .../specimens/invalid-external-template.html  |  1 +
 .../test/specimens/invalid-inline-script.html |  1 +
 .../specimens/invalid-inline-template.html    |  1 +
 6 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/svelte/svelte.js b/packages/svelte/svelte.js
index c6d2ee1e5..24a2e72ff 100644
--- a/packages/svelte/svelte.js
+++ b/packages/svelte/svelte.js
@@ -29,7 +29,7 @@ module.exports = (config = false) => {
         if(!missed) {
             return source;
         }
-         
+
         const { strict } = processor.options;
 
         const classes = missed.map((reference) => reference.replace("css.", ""));
@@ -45,7 +45,7 @@ module.exports = (config = false) => {
 
         // Turn all missing values into strings so nothing explodes
         return source.replace(
-            new RegExp(`(${missed.map((ref) => escape(ref)).join("|")})`),
+            new RegExp(`(${missed.map((ref) => escape(ref)).join("|")})`, "g"),
             (match) => JSON.stringify(match)
         );
     };
@@ -82,13 +82,13 @@ module.exports = (config = false) => {
 
         if(style) {
             log("extract <style>", html);
-            
+
             css = "<style>";
-            
+
             if(processor.has(html)) {
                 processor.invalidate(html);
             }
-    
+
             result = await processor.string(
                 html,
                 style[1]
@@ -194,7 +194,7 @@ module.exports = (config = false) => {
                     new RegExp(`(\\b)css\\.(${selectors})(\\b)`, "gm"),
                     (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
index d789357dc..186f533c1 100644
--- a/packages/svelte/test/__snapshots__/svelte.test.js.snap
+++ b/packages/svelte/test/__snapshots__/svelte.test.js.snap
@@ -254,7 +254,7 @@ Array [
 exports[`/svelte.js should handle errors: empty css file - <link> 3`] = `
 "
 <div class=\\"{\\"css.nope\\"}\\">NOPE</div>
-<div class=\\"{css.alsonope}\\">STILL NOPE</div>
+<div class=\\"{\\"css.alsonope\\"}\\">STILL NOPE</div>
 "
 `;
 
@@ -273,19 +273,22 @@ Array [
 
 exports[`/svelte.js should handle errors: empty css file - <style> 3`] = `
 "<div class=\\"{\\"css.nope\\"}\\">NOPE</div>
-<div class=\\"{css.alsonope}\\">STILL NOPE</div>
+<div class=\\"{\\"css.alsonope\\"}\\">STILL NOPE</div>
 
 <style>/* replaced by modular-css */</style>
 "
 `;
 
-exports[`/svelte.js should handle errors: invalid reference <script> - <link> 1`] = `"@modular-css/svelte: Unable to find .nuhuh in \\"./invalid.css\\""`;
+exports[`/svelte.js should handle errors: invalid reference <script> - <link> 1`] = `"@modular-css/svelte: Unable to find .nuhuh, .alsono in \\"./invalid.css\\""`;
 
 exports[`/svelte.js should handle errors: invalid reference <script> - <link> 2`] = `
 Array [
   Array [
     "@modular-css/svelte: Unable to find .nuhuh in \\"./invalid.css\\"",
   ],
+  Array [
+    "@modular-css/svelte: Unable to find .alsono in \\"./invalid.css\\"",
+  ],
 ]
 `;
 
@@ -298,17 +301,21 @@ import css from \\"./invalid.css\\";
 
 
     console.log(\\"css.nuhuh\\");
+    console.log(\\"css.alsono\\");
 </script>
 "
 `;
 
-exports[`/svelte.js should handle errors: invalid reference <script> - <style> 1`] = `"@modular-css/svelte: Unable to find .nuhuh in \\"<style>\\""`;
+exports[`/svelte.js should handle errors: invalid reference <script> - <style> 1`] = `"@modular-css/svelte: Unable to find .nuhuh, .alsono in \\"<style>\\""`;
 
 exports[`/svelte.js should handle errors: invalid reference <script> - <style> 2`] = `
 Array [
   Array [
     "@modular-css/svelte: Unable to find .nuhuh in \\"<style>\\"",
   ],
+  Array [
+    "@modular-css/svelte: Unable to find .alsono in \\"<style>\\"",
+  ],
 ]
 `;
 
@@ -319,17 +326,21 @@ exports[`/svelte.js should handle errors: invalid reference <script> - <style> 3
 
 <script>
     console.log(\\"css.nuhuh\\");
+    console.log(\\"css.alsono\\");
 </script>
 "
 `;
 
-exports[`/svelte.js should handle errors: invalid reference template - <link> 1`] = `"@modular-css/svelte: Unable to find .nope in \\"./invalid.css\\""`;
+exports[`/svelte.js should handle errors: invalid reference template - <link> 1`] = `"@modular-css/svelte: Unable to find .nope, .stillnope in \\"./invalid.css\\""`;
 
 exports[`/svelte.js should handle errors: invalid reference template - <link> 2`] = `
 Array [
   Array [
     "@modular-css/svelte: Unable to find .nope in \\"./invalid.css\\"",
   ],
+  Array [
+    "@modular-css/svelte: Unable to find .stillnope in \\"./invalid.css\\"",
+  ],
 ]
 `;
 
@@ -337,22 +348,27 @@ exports[`/svelte.js should handle errors: invalid reference template - <link> 3`
 "
 <h1 class=\\"{\\"css.nope\\"}\\">Nope</h1>
 <h2 class=\\"yup\\">Yup</h2>
+<h3 class=\\"{\\"css.stillnope\\"}\\">Still Nope</h3>
 "
 `;
 
-exports[`/svelte.js should handle errors: invalid reference template - <style> 1`] = `"@modular-css/svelte: Unable to find .nope in \\"<style>\\""`;
+exports[`/svelte.js should handle errors: invalid reference template - <style> 1`] = `"@modular-css/svelte: Unable to find .nope, .alsonope in \\"<style>\\""`;
 
 exports[`/svelte.js should handle errors: invalid reference template - <style> 2`] = `
 Array [
   Array [
     "@modular-css/svelte: Unable to find .nope in \\"<style>\\"",
   ],
+  Array [
+    "@modular-css/svelte: Unable to find .alsonope in \\"<style>\\"",
+  ],
 ]
 `;
 
 exports[`/svelte.js should handle errors: invalid reference template - <style> 3`] = `
 "<h1 class=\\"{\\"css.nope\\"}\\">Nope</h1>
 <h2 class=\\"yup\\">Yup</h2>
+<h3 class=\\"{\\"css.alsonope\\"}\\">Also Nope</h3>
 
 <style>/* replaced by modular-css */</style>
 "
diff --git a/packages/svelte/test/specimens/invalid-external-script.html b/packages/svelte/test/specimens/invalid-external-script.html
index e42904b6c..2cc249e80 100644
--- a/packages/svelte/test/specimens/invalid-external-script.html
+++ b/packages/svelte/test/specimens/invalid-external-script.html
@@ -4,4 +4,5 @@ <h2 class="{css.yup}">Yup</h2>
 
 <script>
     console.log(css.nuhuh);
+    console.log(css.alsono);
 </script>
diff --git a/packages/svelte/test/specimens/invalid-external-template.html b/packages/svelte/test/specimens/invalid-external-template.html
index f98db962d..abee46180 100644
--- a/packages/svelte/test/specimens/invalid-external-template.html
+++ b/packages/svelte/test/specimens/invalid-external-template.html
@@ -2,3 +2,4 @@
 
 <h1 class="{css.nope}">Nope</h1>
 <h2 class="{css.yup}">Yup</h2>
+<h3 class="{css.stillnope}">Still Nope</h3>
diff --git a/packages/svelte/test/specimens/invalid-inline-script.html b/packages/svelte/test/specimens/invalid-inline-script.html
index a6bb0f401..72ef7dbab 100644
--- a/packages/svelte/test/specimens/invalid-inline-script.html
+++ b/packages/svelte/test/specimens/invalid-inline-script.html
@@ -6,4 +6,5 @@ <h2 class="{css.yup}">Yup</h2>
 
 <script>
     console.log(css.nuhuh);
+    console.log(css.alsono);
 </script>
diff --git a/packages/svelte/test/specimens/invalid-inline-template.html b/packages/svelte/test/specimens/invalid-inline-template.html
index 364a0fe65..2b9a47a1c 100644
--- a/packages/svelte/test/specimens/invalid-inline-template.html
+++ b/packages/svelte/test/specimens/invalid-inline-template.html
@@ -1,5 +1,6 @@
 <h1 class="{css.nope}">Nope</h1>
 <h2 class="{css.yup}">Yup</h2>
+<h3 class="{css.alsonope}">Also Nope</h3>
 
 <style>
     .yup { color: red; }