fix: apply :global() to whole selector + add strict mode

Author: adrien-k

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`
 

index.js

@@ -6,15 +6,16 @@ const pluginOptions = {
   includePaths: [],
   localIdentName: '[local]-[hash:base64:6]',
   getLocalIdent: getLocalIdent,
+  strict: false,
 };
 
 const regex = {
   module: /\$(style)?\.(:?[\w\d-]*)/gm,
   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,
-  }
-};
+  };
+};

package-lock.json

@@ -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>'
+    );
+  });
+});

test/remove.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');
+    });
+  });
+});