svelte-preprocess-cssmodules - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

CHANGELOG.md

 # Svelte preprocess CSS Modules, changelog
 
+## 1.1.1
+- Fix the use of `[path]` in the `localIdentName` rule.
+- Escape css on the classname
+- Dependencies update
+
 ## 1.1.0
@@ -4,0 +9,0 @@ - Add optional shortand syntax `$.MY_CLASSNAME` to increase development speed and remove verbosity.

index.js

@@ -1,3 +0,4 @@
-const path = require('path')
-const { interpolateName } = require('loader-utils')
+const path = require('path');
+const cssesc = require('cssesc');
+const { interpolateName } = require('loader-utils');
 
@@ -7,3 +8,3 @@ const pluginOptions = {
   localIdentName: '[local]-[hash:base64:6]'
-}
+};
 
@@ -13,2 +14,3 @@ const regex = {
   style: /<style(\s[^]*?)?>([^]*?)<\/style>/gi,
+  pathUnallowed: /[<>:"/\\|?*]/g,
   class: (className) => {
@@ -22,15 +24,23 @@ return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm')
 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}`;
   }
@@ -40,6 +50,6 @@
   if (interpolatedName.slice(-1) === '-') {
-    interpolatedName = interpolatedName.slice(0, -1)
+    interpolatedName = interpolatedName.slice(0, -1);
   }
 
-  return interpolatedName
+  return interpolatedName;
 }
@@ -46,0 +56,0 @@

package.json

 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",
@@ -30,2 +30,3 @@ "keywords": [
   "dependencies": {
+    "cssesc": "^3.0.0",
     "loader-utils": "^2.0.0"
@@ -32,0 +33,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14119

increased by3.22%

Lines of code

96

increased by10.34%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedcssesc@^3.0.0

• + Addedcssesc@3.0.0(transitive)