Merge branch 'escape-path'

Author: Michael Vurchio

index.js

@@ -1,14 +1,16 @@
-const path = require('path')
-const { interpolateName } = require('loader-utils')
+const path = require('path');
+const cssesc = require('cssesc');
+const { interpolateName } = require('loader-utils');
 
 const pluginOptions = {
   includePaths: [],
   localIdentName: '[local]-[hash:base64:6]'
-}
+};
 
 const regex = {
   module: /\$(style)?\.(:?[\w\d-]*)/gm,
   style: /<style(\s[^]*?)?>([^]*?)<\/style>/gi,
+  pathUnallowed: /[<>:"/\\|?*]/g,
   class: (className) => {
     return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm')
   }
@@ -17,27 +19,35 @@ const regex = {
 let moduleClasses = {};
 
 function generateName(resourcePath, styles, className) {
-  const filePath = resourcePath
-  const fileName = path.basename(filePath)
+  const filePath = resourcePath;
+  const fileName = path.basename(filePath);
   const localName = pluginOptions.localIdentName.length
     ? pluginOptions.localIdentName.replace(/\[local\]/gi, () => className)
-    : className
+    : className;
 
-  const content = `${styles}-${filePath}-${fileName}-${className}`
+  const content = `${styles}-${filePath}-${fileName}-${className}`;
 
-  let interpolatedName = interpolateName({ resourcePath }, localName, { content })
+  let interpolatedName = cssesc(
+    interpolateName({ resourcePath }, localName, { content })
+    .replace(/\./g, '-')
+  );
+  
+  // replace unwanted characters from [path]
+  if (regex.pathUnallowed.test(interpolatedName)) {
+    interpolatedName = interpolatedName.replace(regex.pathUnallowed, '_');
+  }
 
   // prevent class error when the generated classname starts from a non word charater
   if (/^(?![a-zA-Z_])/.test(interpolatedName)) {
-    interpolatedName = `_${interpolatedName}`
+    interpolatedName = `_${interpolatedName}`;
   }
 
   // prevent svelte "Unused CSS selector" warning when the generated classname ends by `-`
   if (interpolatedName.slice(-1) === '-') {
-    interpolatedName = interpolatedName.slice(0, -1)
+    interpolatedName = interpolatedName.slice(0, -1);
   }
 
-  return interpolatedName
+  return interpolatedName;
 }
 
 const markup = async ({ content, filename }) => {

package-lock.json

@@ -27,6 +27,7 @@
     "url": "https://github.com/micantoine/svelte-preprocess-cssmodules.git"
   },
   "dependencies": {
+    "cssesc": "^3.0.0",
     "loader-utils": "^2.0.0"
   },
   "devDependencies": {

package.json

@@ -9,7 +9,7 @@ module.exports = async ({ source, localIdentName }) => {
         localIdentName,
       })
     ],
-    { filename : 'App.svelte' }
+    { filename : 'src/App.svelte' }
   );
 
   return code;

test/compiler.js

@@ -0,0 +1,22 @@
+const compiler = require('./compiler.js');
+
+const source = '<style>.red { color: red; }</style>\n<span class="$style.red">Red</span>';
+const sourceReactiveClass = '<style>.red { color: red; }</style>\n<span class:$.red={true}>Red</span>';
+
+test('Replace path on regular class', async () => {
+  const output = await compiler({
+    source,
+    localIdentName: '[path][name]__[local]',
+  });
+
+  expect(output).toBe('<style>:global(.src_App__red) { color: red; }</style>\n<span class="src_App__red">Red</span>');
+});
+
+test('Replace path on reactive class', async () => {
+  const output = await compiler({
+    source: sourceReactiveClass,
+    localIdentName: '[path][name]__[local]',
+  });
+
+  expect(output).toBe('<style>:global(.src_App__red) { color: red; }</style>\n<span class:src_App__red={true}>Red</span>');
+});