fix: use hash as virtualModule key

web-infra-dev · Sep 19, 2023 · 7138e32 · 7138e32
1 parent 4c08ba9
commit 7138e32
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 32 deletions.
diff --git a/packages/solutions/module-tools/src/builder/esbuild/adapter.ts b/packages/solutions/module-tools/src/builder/esbuild/adapter.ts
@@ -101,17 +101,6 @@ export const adapterPlugin = (compiler: ICompiler): Plugin => {
           };
         }
 
-        const { originalFilePath, query } = resolvePathAndQuery(args.path);
-
-        // external css virtual module
-        if (query.css_virtual) {
-          return {
-            path: originalFilePath,
-            pluginData: query,
-            external: true,
-          };
-        }
-
         const { externals, sideEffects: userSideEffects } = config;
         const regExternal = externals.filter(
           (item): item is RegExp => !isString(item),
@@ -202,6 +191,7 @@ export const adapterPlugin = (compiler: ICompiler): Plugin => {
             : compiler.node_resolve(id, dir, kind);
         };
 
+        const { originalFilePath, query } = resolvePathAndQuery(args.path);
         const isExternal = getIsExternal(originalFilePath);
         const dir =
           args.resolveDir ?? (args.importer ? dirname(args.importer) : root);

diff --git a/packages/solutions/module-tools/src/builder/feature/redirect.ts b/packages/solutions/module-tools/src/builder/feature/redirect.ts
@@ -2,7 +2,15 @@
  * This plugin is used to redirectImport only in unbundle mode
  * Taking from https://github.com/ice-lab/icepkg/blob/main/packages/pkg/src/plugins/transform/alias.ts
  */
-import { isAbsolute, resolve, relative, join, dirname, extname } from 'path';
+import {
+  isAbsolute,
+  resolve,
+  relative,
+  join,
+  dirname,
+  extname,
+  basename,
+} from 'path';
 import { js } from '@ast-grep/napi';
 import MagicString from 'magic-string';
 import { createMatchPath, loadConfig, MatchPath } from 'tsconfig-paths';
@@ -85,8 +93,13 @@ async function redirectImport(
 
         if (query.css_virtual) {
           // css module
-          const contents = compiler.virtualModule.get(originalFilePath)!;
-          const base = query.basename as string;
+          const replacedName = basename(
+            originalFilePath,
+            extname(originalFilePath),
+          ).replace('.', '_');
+          const base = `${replacedName}.css`;
+          const key = query.hash as string;
+          const contents = compiler.virtualModule.get(key)!;
           const fileName = join(outputDir, base);
           compiler.emitAsset(fileName, {
             type: 'asset',

diff --git a/packages/solutions/module-tools/src/builder/feature/style/index.ts b/packages/solutions/module-tools/src/builder/feature/style/index.ts
@@ -9,14 +9,15 @@ export const css = {
   name,
   hooks(compiler: ICompiler) {
     compiler.hooks.load.tapPromise({ name }, async args => {
-      if (args.pluginData?.css_virtual) {
-        const contents = compiler.virtualModule.get(args.path)!;
-        return {
-          contents,
-          loader: 'css',
-        };
-      }
       if (isStyleExt(args.path)) {
+        if (args.pluginData?.css_virtual) {
+          const key = args.pluginData.hash as string;
+          const contents = compiler.virtualModule.get(key)!;
+          return {
+            contents,
+            loader: 'css',
+          };
+        }
         return {
           contents: readFileSync(args.path),
           loader: 'css',

diff --git a/packages/solutions/module-tools/src/builder/feature/style/postcssTransformer.ts b/packages/solutions/module-tools/src/builder/feature/style/postcssTransformer.ts
@@ -1,7 +1,6 @@
-import { basename, extname } from 'path';
 import postcss from 'postcss';
 import { ICompiler } from '../../../types';
-import { getHash } from '../../../utils';
+import { getHash, normalizeSlashes } from '../../../utils';
 import { postcssUrlPlugin } from './postcssUrlPlugin';
 
 const cssLangs = `\\.(css|less|sass|scss)($|\\?)`;
@@ -67,15 +66,11 @@ export const postcssTransformer = async (
     ...processOptions,
   });
   if (Object.values(modules).length) {
-    // use hash to to set virtual module key
-    const hash = getHash(code, 'utf-8').substring(0, 8);
-    const replacedName = basename(entryPath, extname(entryPath)).replace(
-      '.',
-      '_',
-    );
-    const base = `${replacedName}.css`;
-    compilation.virtualModule.set(hash, code);
-    code = `import "${hash}?css_virtual&basename=${base}";export default ${JSON.stringify(
+    // add hash query for same path, let esbuild cache invalid
+    const normalizedPath = normalizeSlashes(entryPath);
+    const key = getHash(code, 'utf-8').slice(0, 5);
+    compilation.virtualModule.set(key, code);
+    code = `import "${normalizedPath}?css_virtual&hash=${key}";export default ${JSON.stringify(
       modules,
     )}`;
     loader = 'js';