v2.2.6

Author: indooorsman

lib/plugin.js

@@ -65,7 +65,8 @@ const buildCssModulesJs = async ({ fullPath, options, build }) => {
   const cssImportPath = './' + builtCssFileName.split(path.sep).join(path.posix.sep).trim();
   const injectCode = `import "${cssImportPath}";`;
 
-  const exportDefault = `
+  const exportDefault = options.inject
+    ? `
 export default new Proxy(${classNamesMapString}, {
   get: function(source, key) {
     setTimeout(() => {
@@ -74,7 +75,8 @@ export default new Proxy(${classNamesMapString}, {
     return source[key];
   }
 });
-  `;
+  `
+    : `export default ${classNamesMapString};`;
 
   const js = `${injectCode}\n${exportDefault};`;
 
@@ -86,6 +88,45 @@ export default new Proxy(${classNamesMapString}, {
   };
 };
 
+/**
+ * onResolve
+ * @description mark module(s).css as sideEffects and add namespace
+ * @param {import('esbuild').OnResolveArgs} args
+ * @param {import('..').Build} build
+ * @returns {Promise<import('esbuild').OnResolveResult>}
+ */
+const onResolve = async (args, build) => {
+  const { resolve, initialOptions } = build;
+  const log = getLogger(build);
+  const { resolveDir, path: p, pluginData } = args;
+  const { buildRoot } = build.context;
+  const { path: absPath } = await resolve(p, { resolveDir });
+  log('resolve', p, 'to', path.relative(buildRoot, absPath));
+
+  /**
+   * @type {import('esbuild').OnResolveResult}
+   */
+  const result = {
+    namespace: pluginNamespace,
+    path: absPath,
+    external: false,
+    pluginData: {
+      ...(pluginData ?? {}),
+      resolveDir: pluginData?.resolveDir || resolveDir,
+      path: absPath
+    },
+    sideEffects: true,
+    pluginName
+  };
+
+  if (initialOptions.watch) {
+    log('watching', path.relative(buildRoot, absPath));
+    result.watchFiles = [absPath];
+  }
+
+  return result;
+};
+
 /**
  * onLoad
  * @param {import('..').Build} build
@@ -100,7 +141,7 @@ const onLoad = async (build, options, args) => {
 
   const cached = cache.get(fullPath);
   if (cached) {
-    log('return cache for', fullPath);
+    log('return cache for', path.relative(buildRoot, fullPath));
     return cached;
   }
 
@@ -121,7 +162,8 @@ const onLoad = async (build, options, args) => {
     pluginData: {
       css,
       exports,
-      digest
+      digest,
+      resolveDir
     },
     contents: js,
     loader: 'js'
@@ -138,9 +180,6 @@ const onLoad = async (build, options, args) => {
  * @param {import('esbuild').BuildResult} result
  */
 const onEnd = async (build, options, result) => {
-  if (build.initialOptions.watch) {
-    return;
-  }
   const { buildId, buildRoot } = build.context;
   const log = getLogger(build);
 
@@ -151,6 +190,7 @@ const onEnd = async (build, options, result) => {
     let injectTo = null;
     Object.keys(result.metafile?.outputs ?? []).forEach((f) => {
       if (
+        !injectTo &&
         result.metafile.outputs[f].entryPoint &&
         entries.includes(path.resolve(buildRoot, result.metafile.outputs[f].entryPoint)) &&
         path.extname(f) === '.js'
@@ -163,7 +203,7 @@ const onEnd = async (build, options, result) => {
         cssContents.push(`\n/* ${f} */\n${css}\n`);
       }
     });
-    log('inject css to', injectTo);
+    log('inject css to', path.relative(buildRoot, injectTo));
     if (injectTo && cssContents.length) {
       const allCss = cssContents.join('');
       const container = typeof options.inject === 'string' ? options.inject : 'head';
@@ -196,10 +236,14 @@ const prepareBuild = async (build, options) => {
 /**
  * onLoadBuiltCss
  * @param {import('esbuild').OnLoadArgs} args
- * @returns {import('esbuild').OnLoadResult}
+ * @param {import('..').Build} build
+ * @returns {Promise<import('esbuild').OnLoadResult>}
  */
-const onLoadBuiltCss = async ({ pluginData }) => {
-  const { css, resolveDir } = pluginData;
+const onLoadBuiltCss = async ({ pluginData }, build) => {
+  const { buildRoot } = build.context;
+  const { css, resolveDir, path: p } = pluginData;
+  const log = getLogger(build);
+  log('loading built css', p, 'in', path.relative(buildRoot, resolveDir));
 
   /**
    * @type {import('esbuild').OnLoadResult}
@@ -218,10 +262,10 @@ const onLoadBuiltCss = async ({ pluginData }) => {
 /**
  * onResolveBuiltCss
  * @param {import('esbuild').OnResolveArgs} args
- * @returns {import('esbuild').OnResolveResult}
+ * @returns {Promise<import('esbuild').OnResolveResult>}
  */
 const onResolveBuiltCss = async (args) => {
-  const { resolveDir, path: p, pluginData } = args;
+  const { resolveDir, path: p, pluginData = {} } = args;
 
   /**
    * @type {import('esbuild').OnResolveResult}
@@ -232,7 +276,7 @@ const onResolveBuiltCss = async (args) => {
     external: false,
     pluginData: {
       ...pluginData,
-      resolveDir,
+      resolveDir: pluginData.resolveDir || resolveDir,
       path: p
     },
     sideEffects: true,
@@ -250,11 +294,15 @@ const onResolveBuiltCss = async (args) => {
  */
 const setup = async (build, options) => {
   await prepareBuild(build, options);
-
+  const { buildRoot } = build.context;
   const log = getLogger(build);
 
-  build.onLoad({ filter: /\.modules?\.css$/i }, async (args) => {
-    log('loading', args.path);
+  build.onResolve({ filter: /\.modules?\.css$/i, namespace: 'file' }, async (args) => {
+    return await onResolve(args, build);
+  });
+
+  build.onLoad({ filter: /\.modules?\.css$/i, namespace: pluginNamespace }, async (args) => {
+    log('loading', path.relative(buildRoot, args.path));
     return await onLoad(build, options, args);
   });
 
@@ -266,8 +314,7 @@ const setup = async (build, options) => {
       namespace: pluginNamespace
     },
     async (args) => {
-      log('loading built css', args.path);
-      return await onLoadBuiltCss(args);
+      return await onLoadBuiltCss(args, build);
     }
   );
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esbuild-css-modules-plugin",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
   "main": "index.js",
   "keywords": [