esbuild-css-modules-plugin - npm Package Compare versions

Comparing version 2.1.3 to 2.1.4

changelog.md

@@ -0,1 +1,5 @@
+## V2.1.4:
+
+- [v2] add filename as class prefix, e.g.: `.some-class` in `some.module.css` will be transformed to `.some-module__some-class-[hash]`
+
 ## V2.1.3:
@@ -2,0 +6,0 @@

index.js

@@ -27,2 +27,3 @@ const path = require('path');
   const resolveDir = path.dirname(cssFullPath);
+  const classPrefix = path.basename(cssFullPath, path.extname(cssFullPath)).replace(/\./g, '-') + '__';
 
@@ -40,6 +41,13 @@ /**
   const { code, exports = {}, map, dependencies = [] } = cssHandler.bundle(bundleConfig);
+  
+  let finalCssContent = code.toString('utf-8');
 
   const cssModulesJSON = {};
   Object.keys(exports).forEach((originClass) => {
-    cssModulesJSON[camelCase(originClass)] = exports[originClass].name;
+    const patchedClass = exports[originClass].name;
+    cssModulesJSON[camelCase(originClass)] = classPrefix + patchedClass;
+    finalCssContent = finalCssContent.replace(
+      new RegExp(patchedClass, 'g'),
+      classPrefix + patchedClass
+    )
   });
@@ -49,4 +57,2 @@ const classNames = JSON.stringify(cssModulesJSON, null, 2);
   const urls = dependencies.filter((d) => d.type === 'url');
-
-  let finalCssContent = code.toString('utf-8');
   urls.forEach(({ url, placeholder }) => {
@@ -53,0 +59,0 @@ finalCssContent = finalCssContent.replace(

package.json

 {
   "name": "esbuild-css-modules-plugin",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
@@ -21,2 +21,5 @@ "main": "index.js",
   },
+  "devDependencies": {
+    "esbuild": "^0.14.21"
+  },
   "peerDependencies": {
@@ -32,3 +35,6 @@ "esbuild": "^0.14.21"
     "tmp": "^0.2.1"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

readme.md

 # esbuild-css-modules-plugin
 
 [![npm version](https://img.shields.io/npm/v/esbuild-css-modules-plugin.svg?style=flat)](https://www.npmjs.com/package/esbuild-css-modules-plugin)
+[![Test](https://github.com/indooorsman/esbuild-css-modules-plugin/actions/workflows/test.yml/badge.svg)](https://github.com/indooorsman/esbuild-css-modules-plugin/actions/workflows/test.yml)
 
@@ -5,0 +6,0 @@ A esbuild plugin to bundle css modules into js(x)/ts(x).

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

Number of lines in readme file

57

increased by1.79%

Number of low supply chain risk alerts

3

decreased by-25%

Worsened metrics

Total package byte prevSize

14093

decreased by-58.3%

Dev dependency count

1

increased byInfinity%

Number of package files

6

decreased by-53.85%

Lines of code

267

decreased by-29.37%

No dependency changes