From ef7d3ac46553d1891bc1078dda9a876f80c62171 Mon Sep 17 00:00:00 2001
From: Adrien Kiren <adrien.kiren@gmail.com>
Date: Wed, 21 Oct 2020 14:51:30 +0300
Subject: [PATCH 1/3] fix: apply :global() to whole selector + add strict mode

---
 README.md            |  1 +
 index.js             | 84 +++++++++++++++++++++++++++++++++-----------
 package-lock.json    |  2 +-
 test/remove.test.js  | 13 +++++++
 test/replace.test.js | 73 ++++++++++++++++++++++++++++++++++++--
 5 files changed, 150 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 3ca64db..5ca9134 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,7 @@ Pass an object of the following properties
 | `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` |  A rule using any available token from [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename) |
 | `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
 | `getLocalIdent` | `Function` | `undefined`  | Generate the classname by specifying a function instead of using the built-in interpolation |
+| `strict`  | `Boolean` | `false` | When true, an exception is raised when a class is used while not being defined in `<style>`
 
 #### `getLocalIdent`
 
diff --git a/index.js b/index.js
index ab01e81..a2af809 100644
--- a/index.js
+++ b/index.js
@@ -6,6 +6,7 @@ const pluginOptions = {
   includePaths: [],
   localIdentName: '[local]-[hash:base64:6]',
   getLocalIdent: getLocalIdent,
+  strict: false,
 };
 
 const regex = {
@@ -13,8 +14,8 @@ const regex = {
   style: /<style(\s[^]*?)?>([^]*?)<\/style>/gi,
   pathUnallowed: /[<>:"/\\|?*]/g,
   class: (className) => {
-    return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm')
-  }
+    return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm');
+  },
 };
 
 let moduleClasses = {};
@@ -35,7 +36,7 @@ function generateName(resourcePath, styles, className) {
     interpolateName({ resourcePath }, localName, { content })
     .replace(/\./g, '-')
   );
-  
+
   // replace unwanted characters from [path]
   if (regex.pathUnallowed.test(interpolatedName)) {
     interpolatedName = interpolatedName.replace(regex.pathUnallowed, '_');
@@ -72,20 +73,38 @@ const markup = async ({ content, filename }) => {
   const styles = content.match(regex.style);
   moduleClasses[filename] = {};
 
-  return { code: content.replace(regex.module, (match, key, className) => {
-    let replacement = '';
-    if (styles.length) {
-      if (regex.class(className).test(styles[0])) {
-        const interpolatedName = generateName(
-          filename,
-          styles[0],
-          className
+  return {
+    code: content.replace(regex.module, (match, key, className) => {
+      let replacement = '';
+      if (!className.length) {
+        throw new Error(
+          `Invalid class name in file ${filename}.\n`+
+          'This usually happens when using dynamic classes with svelte-preprocess-cssmodules.'
         );
+      }
+
+      if (!regex.class(className).test(`.${className}`)) {
+        throw new Error(`Classname "${className}" in file ${filename} is not valid`);
+      }
+
+      if (styles.length) {
+        if (!regex.class(className).test(styles[0])) {
+          if (pluginOptions.strict) {
+            throw new Error(
+              `Classname "${className}" was not found in declared ${filename} <style>`
+            );
+          } else {
+            // In non-strict mode, we just remove $style classes that don't have a definition
+            return '';
+          }
+        }
+
+        const interpolatedName = generateName(filename, styles[0], className);
 
         const customInterpolatedName = pluginOptions.getLocalIdent(
           {
             context: path.dirname(filename),
-            resourcePath :filename,
+            resourcePath: filename,
           },
           {
             interpolatedName,
@@ -101,18 +120,19 @@ const markup = async ({ content, filename }) => {
         moduleClasses[filename][className] = customInterpolatedName;
         replacement = customInterpolatedName;
       }
-    }
-    return replacement;
-  })};
+      return replacement;
+    }),
+  };
 };
 
+const GLOBALIZE_PLACEHOLDER = '__to_globalize__';
 const style = async ({ content, filename }) => {
   let code = content;
 
   if (!moduleClasses.hasOwnProperty(filename)) {
     return { code };
   }
-  
+
   const classes = moduleClasses[filename];
 
   if (Object.keys(classes).length === 0) {
@@ -122,11 +142,35 @@ const style = async ({ content, filename }) => {
   for (const className in classes) {
     code = code.replace(
       regex.class(className),
-      () => `:global(.${classes[className]})`
+      () => `.${GLOBALIZE_PLACEHOLDER}${classes[className]}`
     );
   }
 
-  return { code };
+  let codeOutput = '';
+  let cssRules = code.split('}');
+
+  // Remove last element of the split. It should be the empty string that comes after the last '}'.
+  const lastChunk = cssRules.pop();
+
+  // We wrap all css selector containing a scoped CSS class in :global() svelte css statement
+  for (const cssRule of cssRules) {
+    let [selector, rule] = cssRule.split('{');
+    if (selector.includes(GLOBALIZE_PLACEHOLDER)) {
+      const selectorTrimmed = selector.trim();
+      selector = selector.replace(
+        selectorTrimmed,
+        `:global(${selectorTrimmed.replace(
+          new RegExp(GLOBALIZE_PLACEHOLDER, 'g'),
+          ''
+        )})`
+      );
+    }
+    codeOutput += `${selector}{${rule}}`;
+  }
+
+  codeOutput += lastChunk;
+
+  return { code: codeOutput };
 };
 
 module.exports = (options) => {
@@ -136,5 +180,5 @@ module.exports = (options) => {
   return {
     markup,
     style,
-  }
-};
\ No newline at end of file
+  };
+};
diff --git a/package-lock.json b/package-lock.json
index 4356f40..0037299 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/test/remove.test.js b/test/remove.test.js
index 1631bf8..066188a 100644
--- a/test/remove.test.js
+++ b/test/remove.test.js
@@ -22,3 +22,16 @@ test('[Shorthand] Remove unused CSS Modules from HTML attribute', async () => {
 
   expect(output).toBe(expectedOutput);
 });
+
+describe('in strict mode', () => {
+  test('Throws an exception', async () => {
+    await expect(compiler({
+      source,
+    }, {
+      localIdentName: '[local]-123456',
+      strict: true,
+    })).rejects.toThrow(
+      'Classname \"blue\" was not found in declared src/App.svelte <style>'
+    );
+  });
+});
diff --git a/test/replace.test.js b/test/replace.test.js
index 48da01c..61dce73 100644
--- a/test/replace.test.js
+++ b/test/replace.test.js
@@ -1,7 +1,8 @@
 const compiler = require('./compiler.js');
 
-const source = '<style>.red { color: red; }</style>\n<span class="$style.red">Red</span>';
-const sourceShorthand = '<style>.red { color: red; }</style>\n<span class="$.red">Red</span>';
+const style = '<style>.red { color: red; }</style>';
+const source = style + '\n<span class="$style.red">Red</span>';
+const sourceShorthand = style + '\n<span class="$.red">Red</span>';
 
 test('Generate CSS Modules from HTML attributes, Replace CSS className', async () => {
   const output = await compiler({
@@ -55,3 +56,71 @@ test('[Shorthand] Avoid generated class to end with a hyphen', async () => {
   });
   expect(output).toBe('<style>:global(.red) { color: red; }</style>\n<span class="red">Red</span>');
 });
+
+describe('combining multiple classes', () => {
+  const style = '<style>span.red.large:hover { font-size: 20px; } \n.red { color: red; }</style>';
+  const source = style + '\n<span class="$style.red $style.large">Red</span>';
+
+  const expectedStyle =
+    '<style>:global(span.red-123456.large-123456:hover) { font-size: 20px; } \n:global(.red-123456) { color: red; }</style>';
+  const expectedOutput = expectedStyle + '\n<span class="red-123456 large-123456">Red</span>';
+
+  test('Generate CSS Modules from HTML attributes, Replace CSS className', async () => {
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123456',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+});
+
+describe('using dynamic classes', () => {
+  describe('when matched class is empty', () => {
+    // The parser will identify a class named ''
+    const source =
+      '<style>.red { font-size: 20px; }</style>' + '<span class={`$style.${color}`}>Red</span>';
+
+    test('throws an exception', async () => {
+      await expect(compiler({ source })).rejects.toThrow(
+        'Invalid class name in file src/App.svelte.\nThis usually happens when using dynamic classes with svelte-preprocess-cssmodules.'
+      );
+    });
+  });
+
+  describe('when matched class could be a valid class but does not match any style definition', () => {
+    // The parser will identify a class named 'color'
+    const source =
+      '<style>.colorred { font-size: 20px; }</style>' +
+      '<span class={`$style.color${color}`}>Red</span>';
+
+    it('in strict mode, it throw an exception', async () => {
+      await expect(compiler({ source }, { strict: true })).rejects.toThrow(
+        'Classname "color" was not found in declared src/App.svelte <style>'
+      );
+    });
+
+    // TODO: fix, this is probably not a result one would expect
+    it('in non-strict mode, it removes the resulting class', async () => {
+      const output = await compiler({ source }, { strict: false });
+      expect(output).toEqual(
+        '<style>.colorred { font-size: 20px; }</style><span class={`${color}`}>Red</span>'
+      );
+    });
+  });
+
+  describe('when matched class is an invalid class', () => {
+    // The parser will identify a class named 'color-'
+    const source =
+      '<style>.color-red { font-size: 20px; }</style>' +
+      '<span class={`$style.color-${color}`}>Red</span>';
+
+    it('throws an exception when resulting class is invalid', async () => {
+      await expect(compiler({ source })).rejects.toThrow('Classname "color-" in file src/App.svelte is not valid');
+    });
+  });
+});

From c7404a3206538322e0ea89e57115978b1c92a297 Mon Sep 17 00:00:00 2001
From: Michael Vurchio <michael@micantoine.dev>
Date: Mon, 26 Oct 2020 22:54:05 +0900
Subject: [PATCH 2/3] Consider joint selector only  (no parents/children) &
 media queries

---
 index.js | 43 +++++++++++++++----------------------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/index.js b/index.js
index a2af809..84357e0 100644
--- a/index.js
+++ b/index.js
@@ -16,6 +16,9 @@ const regex = {
   class: (className) => {
     return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm');
   },
+  classSelector: (className) => {
+    return new RegExp(`\\S*\\.(${className})\\b(?![-_])\\S*`, 'gm');
+  },
 };
 
 let moduleClasses = {};
@@ -125,7 +128,6 @@ const markup = async ({ content, filename }) => {
   };
 };
 
-const GLOBALIZE_PLACEHOLDER = '__to_globalize__';
 const style = async ({ content, filename }) => {
   let code = content;
 
@@ -141,36 +143,21 @@ const style = async ({ content, filename }) => {
 
   for (const className in classes) {
     code = code.replace(
-      regex.class(className),
-      () => `.${GLOBALIZE_PLACEHOLDER}${classes[className]}`
-    );
-  }
+      regex.classSelector(className),
+      (match) => {
+        const generatedClass = match.replace(
+          regex.class(className),
+          () => `.${classes[className]}`
+        );
 
-  let codeOutput = '';
-  let cssRules = code.split('}');
-
-  // Remove last element of the split. It should be the empty string that comes after the last '}'.
-  const lastChunk = cssRules.pop();
-
-  // We wrap all css selector containing a scoped CSS class in :global() svelte css statement
-  for (const cssRule of cssRules) {
-    let [selector, rule] = cssRule.split('{');
-    if (selector.includes(GLOBALIZE_PLACEHOLDER)) {
-      const selectorTrimmed = selector.trim();
-      selector = selector.replace(
-        selectorTrimmed,
-        `:global(${selectorTrimmed.replace(
-          new RegExp(GLOBALIZE_PLACEHOLDER, 'g'),
-          ''
-        )})`
-      );
-    }
-    codeOutput += `${selector}{${rule}}`;
+        return generatedClass.indexOf(':global(') !== -1
+          ? generatedClass
+          : `:global(${generatedClass})`;
+      }
+    );
   }
 
-  codeOutput += lastChunk;
-
-  return { code: codeOutput };
+  return { code };
 };
 
 module.exports = (options) => {

From 58845d55eafe3615688537095b85ac3e68e35aa5 Mon Sep 17 00:00:00 2001
From: Michael Vurchio <michael@micantoine.dev>
Date: Mon, 26 Oct 2020 23:24:42 +0900
Subject: [PATCH 3/3] Add tests

---
 test/replace.test.js | 117 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 117 insertions(+)

diff --git a/test/replace.test.js b/test/replace.test.js
index 61dce73..6dae263 100644
--- a/test/replace.test.js
+++ b/test/replace.test.js
@@ -79,6 +79,123 @@ describe('combining multiple classes', () => {
   });
 });
 
+describe('Classname is part of a selector', () => {
+  
+  test('CSS Modules class targetting children', async () => {
+    const source =
+      '<style>\n' +
+        'div.red > sup { font-size: 12px; }\n' +
+        '.red { color: red; }\n' +
+      '</style>\n' +
+      '<div class="$style.red">Red<sup>*</sup></div>';
+
+    const expectedOutput =
+      '<style>\n' +
+        ':global(div.red-123) > sup { font-size: 12px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+      '</style>\n' +
+      '<div class="red-123">Red<sup>*</sup></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class has a parent', async () => {
+    const source =
+      '<style>\n' +
+        'div .semibold .red { font-size: 20px; }\n' +
+        '.red { color: red; }\n' +
+        '.semibold { font-weight: 600; }\n' +
+      '</style>\n' +
+      '<div><strong class="$style.semibold"><span class="$style.red">Red</span></strong></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        'div :global(.semibold-123) :global(.red-123) { font-size: 20px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+        ':global(.semibold-123) { font-weight: 600; }\n' +
+      '</style>\n' +
+      '<div><strong class="semibold-123"><span class="red-123">Red</span></strong></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class has a global parent', async () => {
+    const source =
+      '<style>\n' +
+        ':global(div) .red { font-size: 20px; }\n' +
+        '.red { color: red; }\n' +
+      '</style>\n' +
+      '<div><span class="$style.red">Red</span></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        ':global(div) :global(.red-123) { font-size: 20px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+      '</style>\n' +
+      '<div><span class="red-123">Red</span></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class is used within a media query', async () => {
+    const source =
+      '<style>\n' +
+        '@media (min-width: 37.5em) {\n' +
+          '.red { color: red; }\n' +
+          'div.bold { font-weight: bold; }\n' +
+        '}\n' +
+      '</style>\n' +
+      '<div class="$style.bold"><span class="$style.red">Red</span></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        '@media (min-width: 37.5em) {\n' +
+          ':global(.red-123) { color: red; }\n' +
+          ':global(div.bold-123) { font-weight: bold; }\n' +
+        '}\n' +
+      '</style>\n' +
+      '<div class="bold-123"><span class="red-123">Red</span></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+});
+
 describe('using dynamic classes', () => {
   describe('when matched class is empty', () => {
     // The parser will identify a class named ''