V3.1.1 fix build with bundle: true & splitting: true & multiple e…

…ntrypoints (#72)
indooorsman · Apr 12, 2024 · e2e9210 · e2e9210
1 parent 8f2eace
commit e2e9210
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,6 @@
+## V3.1.1
+- fix build with `bundle: true` & `splitting: true` & multiple entrypoints
+
 ## V3.1.0
 - fix [issue#61](https://github.com/indooorsman/esbuild-css-modules-plugin/issues/61)
 - fix [issue#59](https://github.com/indooorsman/esbuild-css-modules-plugin/issues/59)

diff --git a/index.js b/index.js
@@ -57,7 +57,7 @@ export const setup = (build, _options) => {
       }
     );
     console.log(warnings.join('\n'));
-  }
+  };
 
   patchedBuild.onLoad({ filter: /.+/, namespace: pluginCssNamespace }, (args) => {
     const { path } = args;
@@ -71,7 +71,7 @@ export const setup = (build, _options) => {
   });
 
   patchedBuild.onLoad(
-    { filter: new RegExp(`:${injectorVirtualPath}$`), namespace: pluginJsNamespace },
+    { filter: new RegExp(`^:.*${injectorVirtualPath}$`), namespace: pluginJsNamespace },
     (args) => {
       log(`[${pluginJsNamespace}] on load injector:`, args);
 
@@ -93,8 +93,8 @@ export const setup = (build, _options) => {
 
       /** @type {import('esbuild').OnResolveResult} */
       const r = { namespace: ns, path: originPath, pluginData: { ...(args.pluginData ?? {}) } };
-      if (originPath.endsWith(`:${injectorVirtualPath}`)) {
-        r.path = `:${injectorVirtualPath}`;
+      if (path.endsWith(`:${injectorVirtualPath}`)) {
+        r.path = path.replace(pluginJsNamespace, '');
       }
       log('resolved:', r);
 
@@ -320,9 +320,27 @@ export const setup = (build, _options) => {
     /** @type {[string, string][]} */
     const filesToBuild = [];
     warnMetafile();
+    const cssOutputsMap = Object.entries(r.metafile?.outputs ?? {}).reduce((m, [o, { inputs }]) => {
+      const keys = Object.keys(inputs);
+      if (keys.length === 1 && new RegExp(`^${pluginCssNamespace}:.+\.css$`).test(keys[0])) {
+        m[keys[0].replace(`${pluginCssNamespace}:`, '')] = o;
+      }
+      return m;
+    }, {});
     Object.entries(r.metafile?.outputs ?? {}).forEach(([outfile, meta]) => {
       if (meta.cssBundle) {
         filesToBuild.push([outfile, meta.cssBundle]);
+      } else {
+        const inputs = Object.keys(meta.inputs);
+        inputs.forEach((item) => {
+          if (item.endsWith(`:${injectorVirtualPath}`)) {
+            const sourceCss = item
+              .replace(pluginJsNamespace, '')
+              .replace(`:${injectorVirtualPath}`, '')
+              .replace(/^:+/, '');
+            filesToBuild.push([outfile, cssOutputsMap[sourceCss]]);
+          }
+        });
       }
     });
 

diff --git a/lib/utils.js b/lib/utils.js
@@ -174,7 +174,7 @@ const digestPlaceholder = '__digest_placeholder__';
 
 /**
  * @param {string} to
- * @returns string
+ * @returns {string}
  */
 const relativeToCwd = (to) => relative(process.cwd(), to);
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "esbuild-css-modules-plugin",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "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",
@@ -40,14 +40,14 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.10.0",
-    "esbuild": "^0.19.8"
+    "@types/node": "^20.12.7",
+    "esbuild": "^0.20.2"
   },
   "peerDependencies": {
     "esbuild": "*"
   },
   "dependencies": {
-    "lightningcss": "^1.22.1",
+    "lightningcss": "^1.24.1",
     "lodash-es": "^4.17.21"
   },
   "publishConfig": {

diff --git a/test/test.js b/test/test.js
@@ -149,6 +149,29 @@ import cssModulesPlugin from '../index.js';
   await esbuild.build(buildOptions);
   console.log('[test][esbuild:no:bundle] done, please check `test/dist/no-bundle`', '\n');
 
+  await esbuild.build({
+    ...buildOptions,
+    entryPoints: [
+      './app.jsx',
+      './components/hello.world.jsx'
+    ],
+    splitting: true,
+    bundle: true,
+    packages: 'external',
+    outdir: './dist/bundle-splitting',
+    loader: {
+      '.jpg': 'file'
+    },
+    plugins: [
+      cssModulesPlugin({
+        inject: true
+      })
+    ],
+    logLevel: 'debug',
+    metafile: true
+  });
+  console.log('[test][esbuild:bundle:splitting] done, please check `test/dist/bundle-splitting`', '\n');
+
   // testing no metafile & write false
   const r = await esbuild.build({
     ...buildOptions,