Repository: tivac/modular-css (js)

Issue:
v23 doesn't replace multiple invalid {css.key} entries
<!--- Provide a general summary of the issue in the Title above -->

## Expected Behavior
<!--- Tell us what should happen -->
If there's more than one `{css.key}` value that doesn't exist they should be replaced

## Current Behavior
<!--- Tell us what happens instead of the expected behavior -->
Only the first is replaced

## Possible Solution
<!--- Not obligatory, but suggest a fix/reason for the bug, -->
https://github.com/tivac/modular-css/blob/0fc54033bcef78a3c8756646a78c2e0ddf5b9761/packages/svelte/svelte.js#L48

Needs to have the `g` flag set so it can match multiple times.

## Steps to Reproduce (for bugs)
<!--- Provide a link to a live example, or an unambiguous set of steps to -->
<!--- reproduce this bug. Include code to reproduce, if relevant -->
1. Create a template with multiple `<div class="{css.key}" />`  entries where `key` is different each time
2. Run it
3. Notice that only the first has been updated

## Context
<!--- How has this issue affected you? What are you trying to accomplish? -->
<!--- Providing context helps us come up with a solution that is most useful in the real world -->
Trying to add new components and rough-in classnames still causes JS explosions

## Your Environment
<!--- Include as many relevant details about the environment you experienced the bug in -->

| Executable | Version |
| ---: | :--- |
| `modular-css`  | v23.0.0 |
| `npm --version`  | 6.9.0 |
| `node --version` | 10.12.0 |


Pull request:
fix: replace multiple missing values
<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
Make sure that multiple `{css.key}` values will be replaced if they don't exist in referenced CSS.

## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->
Fixes #575 

## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran to -->
<!--- see how your change affects other areas of the code, etc. -->
Updated specimens & snapshots, saw it fail to replace multiple values. Updated `svelte.js` and now they're correctly replaced.

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have read the **CONTRIBUTING** document.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.


Patch:
diff --git a/packages/svelte/svelte.js b/packages/svelte/svelte.js
index c6d2ee1e..24a2e72f 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}`;
                     }
                 );


Test patch:
diff --git a/packages/svelte/test/__snapshots__/svelte.test.js.snap b/packages/svelte/test/__snapshots__/svelte.test.js.snap
index d789357d..186f533c 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 e42904b6..2cc249e8 100644
--- a/packages/svelte/test/specimens/invalid-external-script.html
+++ b/packages/svelte/test/specimens/invalid-external-script.html
@@ -4,4 +4,5 @@
 
 <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 f98db962..abee4618 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 a6bb0f40..72ef7dba 100644
--- a/packages/svelte/test/specimens/invalid-inline-script.html
+++ b/packages/svelte/test/specimens/invalid-inline-script.html
@@ -6,4 +6,5 @@
 
 <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 364a0fe6..2b9a47a1 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; }