diff --git a/changelog.md b/changelog.md index 205132c..65cb837 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,6 @@ +## V3.1.2 +- fix [issue#74](https://github.com/indooorsman/esbuild-css-modules-plugin/issues/74) + ## V3.1.1 - fix build with `bundle: true` & `splitting: true` & multiple entrypoints diff --git a/index.js b/index.js index 2f0cab8..135d565 100644 --- a/index.js +++ b/index.js @@ -354,13 +354,14 @@ export const setup = (build, _options) => { readFile(fullJsPath, { encoding: 'utf8' }) ]) .then(([css, js]) => { + const cssContent = simpleMinifyCss(css, patchedBuild.esbuild); + const digest = genDigest(c, buildId); const newJs = js - .replace( - contentPlaceholder, - JSON.stringify(simpleMinifyCss(css, patchedBuild.esbuild)) - ) - .replace(digestPlaceholder, JSON.stringify(genDigest(c, buildId))); - return newJs; + .replaceAll(contentPlaceholder, `globalThis['__css-content-${digest}__']`) + .replaceAll(digestPlaceholder, `globalThis['__css-digest-${digest}__']`); + return `globalThis['__css-content-${digest}__']=${JSON.stringify( + cssContent + )};globalThis['__css-digest-${digest}__']=${JSON.stringify(digest)};\n${newJs}`; }) .then((newJs) => writeFile(fullJsPath, newJs, { encoding: 'utf8' })); }) diff --git a/package.json b/package.json index c10ab30..8453a9d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "esbuild-css-modules-plugin", - "version": "3.1.1", + "version": "3.1.2", "description": "A esbuild plugin to bundle css modules into js(x)/ts(x), based on extremely fast [Lightning CSS](https://lightningcss.dev/)", "main": "./index.cjs", "module": "./index.js", diff --git a/test/test.js b/test/test.js index 78d213d..f4cef63 100644 --- a/test/test.js +++ b/test/test.js @@ -22,6 +22,7 @@ import cssModulesPlugin from '../index.js'; emitDeclarationFile: true }) ], + metafile: true, logLevel: 'debug' }); console.log('[test][esbuild:bundle:inject] done, please check `test/dist/bundle-inject`', '\n'); @@ -39,6 +40,7 @@ import cssModulesPlugin from '../index.js'; external: ['react', 'react-dom'], outdir: './dist/bundle-custom-inject', write: true, + metafile: true, loader: { '.jpg': 'dataurl' }, @@ -86,7 +88,8 @@ import cssModulesPlugin from '../index.js'; filter: /\.css$/i }) ], - logLevel: 'debug' + logLevel: 'debug', + metafile: true }); console.log('[test][esbuild:bundle:custom:filter] done, please check `test/dist/bundle-custom-filter`', '\n'); @@ -112,7 +115,8 @@ import cssModulesPlugin from '../index.js'; emitDeclarationFile: true }) ], - logLevel: 'debug' + logLevel: 'debug', + metafile: true }); console.log('[test][esbuild:bundle:no:inject] done, please check `test/dist/bundle-no-inject`', '\n'); @@ -143,7 +147,8 @@ import cssModulesPlugin from '../index.js'; inject: '#my-styles-container' }) ], - logLevel: 'debug' + logLevel: 'debug', + metafile: true }; await esbuild.build(buildOptions);