v2.2.7

Author: indooorsman

changelog.md

@@ -1,3 +1,7 @@
+## V2.2.7
+- **[v2]** refine some logs
+- **[v2]** make hash of outputs stable
+
 ## V2.2.6
 - **[v2]** refine some logs
 - **[v2]** handle `onResolve` for `.modules.css` files to add `sideEffects: true` & `namespace` to the resolve result

index.d.ts

@@ -59,6 +59,8 @@ declare interface BuildContext {
   buildId: string;
   buildRoot: string;
   packageRoot?: string;
+  log: (...args: any[]) => void;
+  relative: (to: string) => `.${string}`;
 }
 
 declare function CssModulesPlugin(options?: PluginOptions): Plugin;

lib/plugin.js

@@ -8,7 +8,12 @@ const {
   pluginName,
   getRootDir,
   pluginNamespace,
-  builtCssSurfix
+  buildingCssSuffix,
+  builtCssSuffix,
+  modulesCssRegExp,
+  builtModulesCssRegExp,
+  getRelativePath,
+  getBuildId
 } = require('./utils.js');
 const cssHandler = require('@parcel/css');
 const camelCase = require('lodash/camelCase');
@@ -21,6 +26,7 @@ const cache = require('./cache.js');
  * @returns {Promise<{resolveDir: string; js: string; css: string; exports: Record<string, string>}>}
  */
 const buildCssModulesJs = async ({ fullPath, options, build }) => {
+  const cssFileName = path.basename(fullPath); // e.g. xxx.module.css?esbuild-css-modules-plugin-building
   const { buildId } = build.context;
   const resolveDir = path.dirname(fullPath);
   const classPrefix = path.basename(fullPath, path.extname(fullPath)).replace(/\./g, '-') + '__';
@@ -41,18 +47,18 @@ const buildCssModulesJs = async ({ fullPath, options, build }) => {
   let cssModulesContent = code.toString('utf-8');
 
   const cssModulesJSON = {};
-  Object.keys(exports).forEach((originClass) => {
-    const patchedClass = exports[originClass].name;
-    cssModulesJSON[camelCase(originClass)] = classPrefix + patchedClass;
-    cssModulesContent = cssModulesContent.replace(
-      new RegExp(`\\.${patchedClass}`, 'g'),
-      '.' + classPrefix + patchedClass
-    );
-  });
-  const classNamesMapString = JSON.stringify(cssModulesJSON);
 
-  const cssFileName = path.basename(fullPath);
-  const builtCssFileName = cssFileName.replace(/\.modules?\.css$/i, builtCssSurfix);
+  Object.keys(exports)
+    .sort() // to keep order consistent in different builds
+    .forEach((originClass) => {
+      const patchedClass = exports[originClass].name;
+      cssModulesJSON[camelCase(originClass)] = classPrefix + patchedClass;
+      cssModulesContent = cssModulesContent.replace(
+        new RegExp(`\\.${patchedClass}`, 'g'),
+        '.' + classPrefix + patchedClass
+      );
+    });
+  const classNamesMapString = JSON.stringify(cssModulesJSON);
 
   let cssWithSourceMap = cssModulesContent;
   if (map) {
@@ -62,10 +68,14 @@ const buildCssModulesJs = async ({ fullPath, options, build }) => {
   }
 
   // fix path issue on Windows: https://github.com/indooorsman/esbuild-css-modules-plugin/issues/12
-  const cssImportPath = './' + builtCssFileName.split(path.sep).join(path.posix.sep).trim();
-  const injectCode = `import "${cssImportPath}";`;
-
-  const exportDefault = options.inject
+  const cssImportPath =
+    './' +
+    cssFileName.split(path.sep).join(path.posix.sep).trim().replace(buildingCssSuffix, '') +
+    builtCssSuffix;
+  // => ./xxx.module.css?esbuild-css-modules-plugin-built
+  const importStatement = `import "${cssImportPath}";`;
+
+  const exportStatement = options.inject
     ? `
 export default new Proxy(${classNamesMapString}, {
   get: function(source, key) {
@@ -78,7 +88,7 @@ export default new Proxy(${classNamesMapString}, {
   `
     : `export default ${classNamesMapString};`;
 
-  const js = `${injectCode}\n${exportDefault};`;
+  const js = `${importStatement}\n${exportStatement};`;
 
   return {
     js,
@@ -89,68 +99,72 @@ export default new Proxy(${classNamesMapString}, {
 };
 
 /**
- * onResolve
+ * onResolveModulesCss
  * @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 onResolveModulesCss = async (args, build) => {
+  const { resolve, initialOptions, context } = build;
+  const { resolveDir, path: p, pluginData = {} } = args;
+  const { log, relative } = context;
   const { path: absPath } = await resolve(p, { resolveDir });
-  log('resolve', p, 'to', path.relative(buildRoot, absPath));
+  const rpath = relative(absPath);
+  log('resolve', p, 'to', rpath, 'from build root');
 
   /**
    * @type {import('esbuild').OnResolveResult}
    */
   const result = {
     namespace: pluginNamespace,
-    path: absPath,
+    suffix: buildingCssSuffix,
+    path: rpath,
     external: false,
     pluginData: {
-      ...(pluginData ?? {}),
-      resolveDir: pluginData?.resolveDir || resolveDir,
-      path: absPath
+      ...pluginData,
+      relativePathToBuildRoot: rpath
     },
     sideEffects: true,
     pluginName
   };
 
   if (initialOptions.watch) {
-    log('watching', path.relative(buildRoot, absPath));
+    log('watching', rpath);
     result.watchFiles = [absPath];
   }
 
   return result;
 };
 
 /**
- * onLoad
+ * onLoadModulesCss
  * @param {import('..').Build} build
  * @param {import('..').Options} options
  * @param {import('esbuild').OnLoadArgs} args
  * @return {(import('esbuild').OnLoadResult | null | undefined | Promise<import('esbuild').OnLoadResult | null | undefined>)}
  */
-const onLoad = async (build, options, args) => {
-  const log = getLogger(build);
-  const { path: fullPath } = args;
-  const { buildRoot } = build.context;
+const onLoadModulesCss = async (build, options, args) => {
+  const { path: maybeFullPath, pluginData = {} } = args;
+  const { buildRoot, log, relative } = build.context;
+  const absPath = path.isAbsolute(maybeFullPath)
+    ? maybeFullPath
+    : path.resolve(buildRoot, maybeFullPath);
+  const rpath = relative(absPath);
 
-  const cached = cache.get(fullPath);
+  log(`loading ${relative(args.path)}${args.suffix}`);
+
+  const cached = cache.get(absPath);
   if (cached) {
-    log('return cache for', path.relative(buildRoot, fullPath));
+    log('return built cache for', rpath);
     return cached;
   }
 
-  const rpath = path.relative(buildRoot, fullPath);
   const hex = createHash('sha256').update(rpath).digest('hex');
   const digest = hex.slice(hex.length - 255, hex.length);
 
   const { js, resolveDir, css, exports } = await buildCssModulesJs({
-    fullPath,
+    fullPath: absPath,
     options,
     digest,
     build
@@ -160,15 +174,15 @@ const onLoad = async (build, options, args) => {
     pluginName,
     resolveDir,
     pluginData: {
+      ...pluginData,
       css,
       exports,
-      digest,
-      resolveDir
+      digest
     },
     contents: js,
     loader: 'js'
   };
-  cache.set(fullPath, result);
+  cache.set(absPath, result);
 
   return result;
 };
@@ -200,7 +214,7 @@ const onEnd = async (build, options, result) => {
       if (path.extname(f) === '.css') {
         const fullpath = path.resolve(buildRoot, f);
         const css = readFileSync(fullpath);
-        cssContents.push(`\n/* ${f} */\n${css}\n`);
+        cssContents.push(`${css}\n`);
       }
     });
     log('inject css to', path.relative(buildRoot, injectTo));
@@ -221,29 +235,36 @@ const onEnd = async (build, options, result) => {
  * @return {Promise<void>}
  */
 const prepareBuild = async (build, options) => {
-  const buildId = v4().replace(/[^0-9a-zA-Z]/g, '');
+  const buildId = getBuildId(build);
   build.initialOptions.metafile = true;
   const packageRoot = options.root;
   const buildRoot = getRootDir(build);
+  const log = getLogger(build);
+  const relative = (to) => getRelativePath(build, to);
+
+  log(`root of this build(#${buildId}):`, buildRoot);
 
   build.context = {
     buildId,
     buildRoot,
-    packageRoot
+    packageRoot,
+    log,
+    relative
   };
 };
 
 /**
- * onLoadBuiltCss
+ * onLoadBuiltModulesCss
  * @param {import('esbuild').OnLoadArgs} args
  * @param {import('..').Build} build
  * @returns {Promise<import('esbuild').OnLoadResult>}
  */
-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));
+const onLoadBuiltModulesCss = async ({ pluginData }, build) => {
+  const { log, buildRoot } = build.context;
+  const { css, relativePathToBuildRoot } = pluginData;
+  const absPath = path.resolve(buildRoot, relativePathToBuildRoot);
+  const resolveDir = path.dirname(absPath);
+  log('loading built css for', relativePathToBuildRoot);
 
   /**
    * @type {import('esbuild').OnLoadResult}
@@ -260,12 +281,15 @@ const onLoadBuiltCss = async ({ pluginData }, build) => {
 };
 
 /**
- * onResolveBuiltCss
+ * onResolveBuiltModulesCss
  * @param {import('esbuild').OnResolveArgs} args
+ * @param {import('..').Build} build
  * @returns {Promise<import('esbuild').OnResolveResult>}
  */
-const onResolveBuiltCss = async (args) => {
-  const { resolveDir, path: p, pluginData = {} } = args;
+const onResolveBuiltModulesCss = async (args, build) => {
+  const { path: p, pluginData = {} } = args;
+
+  build.context?.log(`resolve built css: ${args.path}`);
 
   /**
    * @type {import('esbuild').OnResolveResult}
@@ -274,11 +298,7 @@ const onResolveBuiltCss = async (args) => {
     namespace: pluginNamespace,
     path: p,
     external: false,
-    pluginData: {
-      ...pluginData,
-      resolveDir: pluginData.resolveDir || resolveDir,
-      path: p
-    },
+    pluginData,
     sideEffects: true,
     pluginName
   };
@@ -294,27 +314,32 @@ const onResolveBuiltCss = async (args) => {
  */
 const setup = async (build, options) => {
   await prepareBuild(build, options);
-  const { buildRoot } = build.context;
-  const log = getLogger(build);
 
-  build.onResolve({ filter: /\.modules?\.css$/i, namespace: 'file' }, async (args) => {
-    return await onResolve(args, build);
+  build.onResolve({ filter: modulesCssRegExp, namespace: 'file' }, async (args) => {
+    return await onResolveModulesCss(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);
+  build.onLoad({ filter: modulesCssRegExp, namespace: pluginNamespace }, async (args) => {
+    return await onLoadModulesCss(build, options, args);
   });
 
-  build.onResolve({ filter: new RegExp(builtCssSurfix, 'i') }, onResolveBuiltCss);
+  build.onResolve(
+    {
+      filter: builtModulesCssRegExp,
+      namespace: pluginNamespace
+    },
+    async (args) => {
+      return await onResolveBuiltModulesCss(args, build);
+    }
+  );
 
   build.onLoad(
     {
-      filter: new RegExp(builtCssSurfix, 'i'),
+      filter: builtModulesCssRegExp,
       namespace: pluginNamespace
     },
     async (args) => {
-      return await onLoadBuiltCss(args, build);
+      return await onLoadBuiltModulesCss(args, build);
     }
   );