[Bug]: Two output files share the same path when use CSS modules

[chenjiahan]

Version

System:
    OS: macOS 13.5.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 342.98 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 16.6
  npmPackages:
    @modern-js/eslint-config: 2.33.1 => 2.33.1 
    @modern-js/module-tools: 2.33.1 => 2.33.1 
    @modern-js/tsconfig: 2.33.1 => 2.33.1

Details

The compiled CSS module filename may be same as another files.

For example, we have two files:

• /index.ts
• /index.css

Then we use autoModules to make index.css as a CSS module file.

import { moduleTools, defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  plugins: [moduleTools()],
  buildConfig: {
    buildType: 'bundleless',
    style: {
      autoModules: /\.css$/,
    },
  },
});

Run build command, the build will fail:

Reproduce link

https://github.com/chenjiahan/modern-module-css-modules-name-issue

Reproduce Steps

1. pnpm i
2. pnpm build

[10Derozan]

Maybe you should change the filename..
Or What is the expected output?

[chenjiahan]

The expect behavior is that index.ts and index.css can work together.

We can rename the generated js file of index.css by adding a special suffix, so it will not conflict with index.ts.

[10Derozan]

I'll save the filename, and replace . with _, so index.css will be index_css.js. How about it

[10Derozan]

but index.module.css will be index_module_css.js, but now it is index_module.js

[chenjiahan]

This looks good:

• index.css -> index_css.js
• index.module.css -> index_module_css.js

Maybe this is even more safer:

• index.css -> __index_css.js or $index_css.js