fix: replace multiple missing values (#576)

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

Fixes #575

Author: tivac

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}`;
                     }
                 );

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,40 +326,49 @@ 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\\"",
+  ],
 ]
 `;
 
 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>
 "

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>

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>

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>

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; }