Skip to content

Commit

Permalink
fix(module-tools): change the output css module json filename when bu…
Browse files Browse the repository at this point in the history
…ndleless
  • Loading branch information
10Derozan committed Oct 11, 2023
1 parent d11870b commit c6d6560
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 20 deletions.
6 changes: 6 additions & 0 deletions .changeset/real-apricots-rescue.md
Original file line number Diff line number Diff line change
@@ -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' 两个文件,此操作可以避免命名冲突。
22 changes: 19 additions & 3 deletions packages/solutions/module-tools/src/builder/esbuild/adapter.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 =>
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
12 changes: 12 additions & 0 deletions packages/solutions/module-tools/src/utils/builder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit c6d6560

Please sign in to comment.