diff --git a/changelog.md b/changelog.md index f1d8cb0..0ae0558 100644 --- a/changelog.md +++ b/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 + ## V2.2.16 > commit: [6d0cc68](https://github.com/indooorsman/esbuild-css-modules-plugin/commit/6d0cc68ba51ed0f31d37894c4e3afec203b44d3d) diff --git a/index.d.ts b/index.d.ts index 1802700..b9011e8 100644 --- a/index.d.ts +++ b/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; diff --git a/lib/plugin.js b/lib/plugin.js index 6d31133..4fa4d5e 100644 --- a/lib/plugin.js +++ b/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); diff --git a/package.json b/package.json index b32151c..d655e87 100644 --- a/package.json +++ b/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", diff --git a/readme.md b/readme.md index 9ed0a37..5201571 100644 --- a/readme.md +++ b/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; + } }) ] }); -``` +````