v2.3.0

changelog.md

@@ -1,3 +1,8 @@
+## V2.3.0
+
+- **V2**: upgrade `@parcel/css` to `1.9.0`
+- **V2**: add a new option `v2CssModulesOption`, refer to <https://github.com/parcel-bundler/parcel-css/releases/tag/v1.9.0> 
+
 ## V2.2.16
 
 > commit: [6d0cc68](https://github.com/indooorsman/esbuild-css-modules-plugin/commit/6d0cc68ba51ed0f31d37894c4e3afec203b44d3d)

index.d.ts

@@ -47,6 +47,19 @@ declare interface PluginOptions {
   generateScopedName?: CssModulesOptions['generateScopedName'];
   cssModulesOption?: CssModulesOptions;
   v2?: boolean;
+  v2CssModulesOption?: {
+    /**
+     * refer to: https://github.com/parcel-bundler/parcel-css/releases/tag/v1.9.0
+     */
+    dashedIndents?: boolean;
+    /**
+     * The currently supported segments are:
+     * [name] - the base name of the CSS file, without the extension
+     * [hash] - a hash of the full file path
+     * [local] - the original class name
+     */
+    pattern?: string;
+  };
   root?: string;
   package?: {
     name: string;

lib/plugin.js

@@ -27,8 +27,10 @@ const buildCssModulesJs = async ({ fullPath, options, build }) => {
   const cssFileName = path.basename(fullPath); // e.g. xxx.module.css?esbuild-css-modules-plugin-building
   const { buildId, relative } = build.context;
   const resolveDir = path.dirname(fullPath);
-  const classPrefix = path.basename(fullPath, path.extname(fullPath)).replace(/\./g, '-') + '__';
+  const classPrefix =
+    path.basename(fullPath, path.extname(fullPath)).replace(/[^a-zA-Z0-9]/g, '-') + '__';
   const originCss = await readFile(fullPath);
+  const cssModulesOption = options.v2CssModulesOption || {};
 
   /**
    * @type {import('@parcel/css').BundleOptions}
@@ -38,7 +40,10 @@ const buildCssModulesJs = async ({ fullPath, options, build }) => {
     code: originCss,
     minify: false,
     sourceMap: true,
-    cssModules: true,
+    cssModules: {
+      pattern: `${classPrefix}[local]_[hash]`,
+      ...cssModulesOption
+    },
     analyzeDependencies: false
   };
   const { code, exports = {}, map } = cssHandler.transform(bundleConfig);
@@ -50,11 +55,7 @@ const buildCssModulesJs = async ({ fullPath, options, build }) => {
     .sort() // to keep order consistent in different builds
     .forEach((originClass) => {
       const patchedClass = exports[originClass].name;
-      cssModulesJSON[camelCase(originClass)] = classPrefix + patchedClass;
-      cssModulesContent = cssModulesContent.replace(
-        new RegExp(`\\.${patchedClass}`, 'g'),
-        '.' + classPrefix + patchedClass
-      );
+      cssModulesJSON[camelCase(originClass)] = patchedClass;
     });
   const classNamesMapString = JSON.stringify(cssModulesJSON);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esbuild-css-modules-plugin",
-  "version": "2.2.16",
+  "version": "2.3.0",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -28,7 +28,7 @@
     "esbuild": "^0.14.38"
   },
   "dependencies": {
-    "@parcel/css": "1.7.3",
+    "@parcel/css": "1.9.0",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",
     "postcss": "^8.4.12",

readme.md

@@ -25,7 +25,7 @@ yarn add -D esbuild-css-modules-plugin
 
 ## Usage
 
-```js
+````js
 const esbuild = require('esbuild');
 const cssModulesPlugin = require('esbuild-css-modules-plugin');
 
@@ -57,7 +57,17 @@ esbuild.build({
       },
 
       v2: true // experimental. v2 can bundle images in css, note if set `v2` to true, other options except `inject` will be ignored. and v2 only works with `bundle: true`.
+      v2CssModulesOption: { // Optional.
+        dashedIndents: boolean; // Optional. refer to: https://github.com/parcel-bundler/parcel-css/releases/tag/v1.9.0
+        /**
+         * Optional. The currently supported segments are:
+         * [name] - the base name of the CSS file, without the extension
+         * [hash] - a hash of the full file path
+         * [local] - the original class name
+         */
+        pattern: string;
+      }
     })
   ]
 });
-```
+````