fix(module-tools): change the output css module json filename when bu…

…ndleless
web-infra-dev · Oct 11, 2023 · b6071c9 · b6071c9
1 parent d11870b
commit b6071c9
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 43 deletions.
diff --git a/.changeset/real-apricots-rescue.md b/.changeset/real-apricots-rescue.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/module-tools': patch
+---
+
+fix: change the output css module json filename when bundleless, eg, when you have a input which called 'index.module.css', builder will generate 'index_module_css.js' and 'index_module.css', it will avoid naming conflicts.
+fix:  bundleless 时修改生成的 css module json 文件名，例如当你有一个入口文件叫做 'index.module.css'，构建器会生成 'index_module_css.js' 和 'index_module.css' 两个文件，此操作可以避免命名冲突。
diff --git a/packages/solutions/module-tools/src/builder/esbuild/adapter.ts b/packages/solutions/module-tools/src/builder/esbuild/adapter.ts
@@ -1,10 +1,14 @@
-import { dirname, resolve, extname } from 'path';
+import { dirname, resolve, extname, basename } from 'path';
 import module from 'module';
 import pm from 'picomatch';
 import { ImportKind, Loader, Plugin } from 'esbuild';
 import { fs, isString } from '@modern-js/utils';
 import { createFilter } from '@rollup/pluginutils';
-import { normalizeSourceMap, resolvePathAndQuery } from '../../utils';
+import {
+  normalizeSourceMap,
+  resolvePathAndQuery,
+  isCssModule,
+} from '../../utils';
 import { loaderMap } from '../../constants/loader';
 import { debugResolve } from '../../debug';
 import type { SideEffects, ICompiler } from '../../types';
@@ -270,7 +274,7 @@ export const adapterPlugin = (compiler: ICompiler): Plugin => {
           if (key.endsWith('.map')) {
             continue;
           }
-          const absPath = resolve(root, key);
+          let absPath = resolve(root, key);
           const item = result.outputFiles?.find(x => x.path === absPath);
           const mapping = result.outputFiles?.find(
             x =>
@@ -281,6 +285,18 @@ export const adapterPlugin = (compiler: ICompiler): Plugin => {
             continue;
           }
           if (absPath.endsWith('.js')) {
+            // when emit css module file in bundleless, we need change filename, eg.
+            // index.module.css -> index_module_css.js
+            if (
+              config.buildType === 'bundleless' &&
+              value.entryPoint &&
+              isCssModule(value.entryPoint, config.style.autoModules)
+            ) {
+              absPath = resolve(
+                dirname(absPath),
+                `${basename(value.entryPoint).replace(/\./g, '_')}.js`,
+              );
+            }
             compiler.emitAsset(absPath, {
               type: 'chunk',
               contents: item.text,
@@ -297,29 +313,6 @@ export const adapterPlugin = (compiler: ICompiler): Plugin => {
             });
           }
         }
-
-        for (const [key, value] of compiler.outputChunk.entries()) {
-          const context = compiler.getSourcemapContext(value.fileName);
-          if (value.type === 'chunk' && config.sourceMap) {
-            context.addSourceMap(context.genPluginId('adapter'), value.map);
-          }
-          const processedResult = await compiler.hooks.renderChunk.promise(
-            value,
-          );
-          if (processedResult.type === 'chunk' && config.sourceMap) {
-            processedResult.map = context.getSourceMap();
-          }
-          compiler.outputChunk.set(key, processedResult);
-        }
-
-        if (config.metafile) {
-          const now = Date.now();
-          compiler.emitAsset(
-            resolve(config.outDir, `metafile-${now}.json`),
-            JSON.stringify(result.metafile!, null, 2),
-          );
-        }
-
         await writeFile(compiler);
       });
     },

diff --git a/packages/solutions/module-tools/src/builder/feature/redirect.ts b/packages/solutions/module-tools/src/builder/feature/redirect.ts
@@ -25,10 +25,10 @@ import {
   normalizeSlashes,
   isJsExt,
   isJsLoader,
+  isCssModule,
   resolvePathAndQuery,
 } from '../../utils';
 import { getAssetContents, loadSvgr } from './asset';
-import { isCssModule } from './style/postcssTransformer';
 
 type MatchModule = {
   name?: string;
@@ -126,8 +126,10 @@ async function redirectImport(
         ) {
           // less sass
           if (isCssModule(name, compiler.config.style.autoModules ?? true)) {
-            str.overwrite(start, end, `${name.slice(0, -ext.length)}`);
+            // ./index.module.css -> ./index_module_css
+            str.overwrite(start, end, name.replace(/\.(?!\/)/g, '_'));
           } else {
+            // ./index.less -> ./index.css
             str.overwrite(start, end, `${name.slice(0, -ext.length)}.css`);
           }
           return;

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,20 +1,8 @@
 import postcss from 'postcss';
 import { ICompiler } from '../../../types';
-import { getHash, normalizeSlashes } from '../../../utils';
+import { getHash, normalizeSlashes, isCssModule } from '../../../utils';
 import { postcssUrlPlugin } from './postcssUrlPlugin';
 
-const cssLangs = `\\.(css|less|sass|scss)($|\\?)`;
-const cssModuleRE = new RegExp(`\\.module${cssLangs}`);
-
-export const isCssModule = (
-  filePath: string,
-  autoModules: boolean | RegExp,
-) => {
-  return typeof autoModules === 'boolean'
-    ? autoModules && cssModuleRE.test(filePath)
-    : autoModules.test(filePath);
-};
-
 export const postcssTransformer = async (
   css: string,
   entryPath: string,

diff --git a/packages/solutions/module-tools/src/utils/builder.ts b/packages/solutions/module-tools/src/utils/builder.ts
@@ -92,3 +92,15 @@ export const resolvePathAndQuery = (originalPath: string): ResolveResult => {
     rawQuery: queryStr,
   };
 };
+
+const cssLangs = `\\.(css|less|sass|scss)($|\\?)`;
+const cssModuleRE = new RegExp(`\\.module${cssLangs}`);
+
+export const isCssModule = (
+  filePath: string,
+  autoModules: boolean | RegExp,
+) => {
+  return typeof autoModules === 'boolean'
+    ? autoModules && cssModuleRE.test(filePath)
+    : autoModules.test(filePath);
+};
diff --git a/tests/integration/module/fixtures/build/redirect/redirect.test.ts b/tests/integration/module/fixtures/build/redirect/redirect.test.ts
@@ -33,14 +33,14 @@ describe('redirect', () => {
     expect(jsContent.includes(`import alias from "./alias"`)).toBeTruthy();
     // redirect style
     expect(
-      jsContent.includes(`import css from "./index.module";`),
+      jsContent.includes(`import css from "./index_module_css";`),
     ).toBeTruthy();
     // redirect asset
     expect(jsContent.includes(`import svg from "./assets/logo`)).toBeTruthy();
 
     const distJsonFilePath = path.join(
       fixtureDir,
-      './dist/redirect/index.module.js',
+      './dist/redirect/index_module_css.js',
     );
     const distCssFilePath = path.join(
       fixtureDir,