v3.1.2: fix issue#74

Author: indooorsman

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
 

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' }));
       })

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",

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);