esbuild-css-modules-plugin - npm Package Compare versions

Comparing version 3.0.0-dev.16 to 3.0.0-dev.17

index.js

@@ -46,2 +46,3 @@ import { basename, dirname, extname, normalize, relative, resolve, sep } from 'node:path';
     const { path } = args;
+    log(`[${pluginCssNamespace}] on load:`, args);
     const realPath = resolve(buildRoot, path.replace(`${pluginCssNamespace}:`, ''));
@@ -74,3 +75,3 @@ return {
 
-      log(`on resolve ${ns}:`, args);
+      log(`[${ns}] on resolve :`, args);
 
@@ -107,2 +108,3 @@ /** @type {import('esbuild').OnResolveResult} */
     } else if (!bundle && forceBuild) {
+      log('force build modules css:', rpath);
       const buildResult = CSSTransformer.getInstance(patchedBuild).getCachedResult(path);
@@ -128,6 +130,9 @@
           contents: buildResult?.js
-            ?.replace(contentPlaceholder, simpleMinifyCss(JSON.stringify(buildResult?.css)))
+            ?.replace(
+              contentPlaceholder,
+              JSON.stringify(simpleMinifyCss(buildResult?.css, patchedBuild.esbuild))
+            )
             .replace(digestPlaceholder, JSON.stringify(genDigest(rpath, buildId))),
           loader: jsLoader,
-          watchFiles: [path],
+          watchFiles: [path, ...(buildResult?.composedFiles ?? [])],
           resolveDir: dirname(path),
@@ -139,6 +144,30 @@ pluginData: {
       } else {
+        const anotherBuildOptions = { ...patchedBuild.initialOptions };
+        delete anotherBuildOptions.entryPoints;
+        delete anotherBuildOptions.plugins;
+        delete anotherBuildOptions.outdir;
+        await patchedBuild.esbuild.build({
+          ...anotherBuildOptions,
+          absWorkingDir: buildRoot,
+          stdin: {
+            contents: buildResult?.css ?? '',
+            resolveDir: dirname(path),
+            sourcefile: rpath,
+            loader: 'css'
+          },
+          outfile: resolve(
+            buildRoot,
+            patchedBuild.initialOptions.outdir ?? '.',
+            relative(
+              patchedBuild.initialOptions.outbase ?? '.',
+              rpath.replace(/\.css$/i, '.built.css')
+            )
+          )
+        });
         return {
-          contents: buildResult?.css,
-          loader: cssLoader,
-          watchFiles: [path],
+          contents: `import './${basename(path).replace(/\.css$/i, '.built.css')}';\n${
+            buildResult?.js
+          }`,
+          loader: jsLoader,
+          watchFiles: [path, ...(buildResult?.composedFiles ?? [])],
           resolveDir: dirname(path),
@@ -151,6 +180,7 @@ pluginData: {
     } else if (bundle) {
+      const bundleResult = CSSTransformer.getInstance(patchedBuild).getCachedResult(path);
       return {
-        contents: CSSTransformer.getInstance(patchedBuild).getCachedResult(path)?.js,
+        contents: bundleResult?.js,
         loader: jsLoader,
-        watchFiles: [path],
+        watchFiles: [path, ...(bundleResult?.composedFiles ?? [])],
         resolveDir: dirname(path),
@@ -236,3 +266,6 @@ pluginData: {
             const newJs = js
-              .replace(contentPlaceholder, simpleMinifyCss(JSON.stringify(css)))
+              .replace(
+                contentPlaceholder,
+                JSON.stringify(simpleMinifyCss(css, patchedBuild.esbuild))
+              )
               .replace(digestPlaceholder, JSON.stringify(genDigest(c, buildId)));
@@ -239,0 +272,0 @@ return newJs;

lib/context.js

@@ -14,2 +14,3 @@ import { resolve } from 'node:path';
   build.initialOptions.metafile = true;
+  build.initialOptions.outbase ??= '.';
 
@@ -16,0 +17,0 @@ const buildId = getBuildId(build);

lib/css.helper.js

@@ -1,3 +0,3 @@
-import { bundle as bundleModulesCss } from 'lightningcss';
-import { dirname, relative } from 'node:path';
+import { bundle as bundleModulesCss, transform } from 'lightningcss';
+import { dirname, relative, resolve } from 'node:path';
 import {
@@ -12,2 +12,3 @@ contentPlaceholder,
 import { injectorVirtualPath, pluginJsNamespace } from './utils.js';
+import { readFileSync } from 'node:fs';
 
@@ -128,3 +129,3 @@ export class CSSInjector {
     this.build = build;
-    /** @type {Map<string, {css: string; js: string; dts?: string}>} */
+    /** @type {Map<string, {css: string; js: string; dts?: string; composedFiles: string[]}>} */
     this.__result_cache__ = new Map();
@@ -260,7 +261,3 @@ }
     const { options } = this.build.context;
-    const {
-      code,
-      map: sourcemap,
-      exports
-    } = bundleModulesCss({
+    const bundleCssConfig = {
       filename: fullpath,
@@ -282,4 +279,20 @@ cssModules: {
       }
+    };
+    const r = bundleModulesCss(bundleCssConfig);
+
+    const t = transform({ ...bundleCssConfig, code: readFileSync(fullpath) });
+    /** @type {string[]} */
+    const composedFiles = [];
+    Object.values(t.exports ?? {}).forEach((exp) => {
+      exp.composes?.forEach((c) => {
+        // @ts-ignore
+        if (c.specifier) {
+          // @ts-ignore
+          composedFiles.push(resolve(dirname(fullpath), c.specifier));
+        }
+      });
     });
 
+    const { code, map: sourcemap, exports } = r;
+
     let originCss = code ? code.toString('utf8') : '';
@@ -325,5 +338,6 @@
     const { js, dts } = this.genModulesJs(exports, fullpath, !!opt?.emitDeclarationFile);
-    /** @type {{css: string; js: string; dts?: string}} */
+    /** @type {{css: string; js: string; dts?: string; composedFiles: string[]}} */
     const result = {
       css,
+      composedFiles,
       js,
@@ -330,0 +344,0 @@ dts

lib/utils.js

@@ -193,3 +193,9 @@ import { isAbsolute, resolve, sep, relative, basename, dirname } from 'node:path';
 
-const simpleMinifyCss = (/** @type {string} */ css) => css.replaceAll(/(\\n|\n|\/\*.+?\*\/)/g, '');
+const simpleMinifyCss = (
+  /** @type {string} */ css,
+  /** @type {import('esbuild').PluginBuild['esbuild']} */ esbuild
+) =>
+  esbuild
+    ? esbuild.transformSync(css, { loader: 'css', minify: true, sourcemap: false }).code
+    : css.replaceAll(/(\\n|\n|\/\*.+?\*\/)/g, '').replaceAll(/\s+/g, ' ');
 
@@ -196,0 +202,0 @@ /**

package.json

 {
   "name": "esbuild-css-modules-plugin",
-  "version": "3.0.0-dev.16",
+  "version": "3.0.0-dev.17",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
@@ -36,3 +36,3 @@ "main": "./index.cjs",
     "@types/node": "^17.0.23",
-    "esbuild": "^0.17.18"
+    "esbuild": "^0.18.19"
   },
@@ -43,5 +43,5 @@ "peerDependencies": {
   "dependencies": {
-    "lightningcss": "^1.20.0",
-    "lodash-es": "^4.17.21",
-    "lodash": "^4.17.21"
+    "lightningcss": "^1.21.5",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21"
   },
@@ -51,2 +51,2 @@ "publishConfig": {
   }
-}
+}

readme.md

@@ -39,3 +39,3 @@ # esbuild-css-modules-plugin
       forceInlineImages: false,
-      /** optional, generate declaration file for css file. default is `false` */
+      /** optional, generate typescript declaration file for css file to `outdir` of esbuild config. default is `false` */
       emitDeclarationFile: false,
@@ -42,0 +42,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

39056

increased by5.71%

Lines of code

938

increased by5.87%

Dependency changes

• Updatedlightningcss@^1.21.5