The css file is not generated into the corresponding directory

[fangzhongya]

Describe the bug

vite": "4.1.1"
When both cssCodeSplit: true and rollupOptions.output.preserveModules: true are set to true, the css file is not generated into the corresponding directory, and the file path is deleted in the code

        //css分离
        cssCodeSplit: true,
        rollupOptions: {
            output: [
                {
                    //让打包目录和我们目录对应
                    preserveModules: true,
                    //配置打包根目录
                    dir: resolve(__dirname, './dist/es'),
                },
            ],
        },

// emit corresponding css file
      const referenceId = this.emitFile({
        name: path.basename(cssFileName),
        type: 'asset',
        source: chunkCSS,
      })

It is recommended to keep the file path

// emit corresponding css file
      const referenceId = this.emitFile({
        name: cssFileName,
        type: 'asset',
        source: chunkCSS,
      })

Reproduction

https://stackblitz.com/edit/vitejs-vite-g83ntf?file=src%2Fdom1%2Findex.ts,src%2Fdom2%2Findex.ts,src%2Findex.ts,vite.config.ts&terminal=dev

Steps to reproduce

npm run build

System Info

Windows 10 
Google Chrome  109.0.5414.122

Used Package Manager

npm

Logs

❯ npm run build
$ vite build
vite v4.1.1 building for production...
✓ 5 modules transformed.
dist/es/index2.css 0.02 kB │ gzip: 0.04 kB
dist/es/index.css 0.02 kB │ gzip: 0.04 kB
dist/es/dom1/index.js 0.09 kB │ gzip: 0.09 kB
dist/es/dom2/index.js 0.09 kB │ gzip: 0.09 kB
dist/es/index.js 0.17 kB │ gzip: 0.13 kB

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[surgeboris]

I encountered this bug as well.

Looks like it was introduced by @patak-dev in this commit. It also seems to be a deliberate decision, as the change is prepended with the following comment:

// Ignore directory structure for asset file names

I wasn't able to find any clarifications on why it's the case and would be really interested to hear the rationale for it. And I'm not the only one who has problems with that decision as this comment and this discussion suggest.

Anyway, my use-case is to use Vite to build a library that has multiple self-contained directories in the output (basically what this discussion suggests). For me not being able to access the directory structure in rollupOptions.output.assetFileNames function means that it's really hard to tell the difference between two CSS assets that have the same basename. And that makes it hard to redirect CSS asset output (and results in an annoying restriction that all of the CSS file basenames should be unique across the project).

[Profesor08]

CSS file basenames should be unique across the project

And to sit into one common directory

Also this issue is related to: #11424

[fangzhongya]

I want to modularize and provide minimal imports. No path is given, so it is impossible to distinguish who is who, and it is also impossible to split the css into corresponding modules

[paulcollett]

Our use case also relied on rollupOptions.output.assetFileNames to provide a path to the file. We did this to make a special SSR bundle in dev with vite.build() that outputted those original asset paths so ViteDevServer could continue to serve them.

I too would be interested in learning how to deal with use cases like this where ssrLoadModule falls short, unless we can expose this in some way again

[stokesman]

I ran into this too and I'm voicing my wish that preserving the directory structure of assets will be supported. 🙏

For my use case, I was able to work around it with a simple plugin. I tried adapting it to the reproduction in the OP and I think it allows for the desired result. Here’s the fork in case it helps anyone.

[casually-creative]

Also encountering this issue. I want to preserve the directory structure since I'll still be manually referencing scripts and stylesheets in my .cshtml files in ASP.NET.

I have an implementation using rollupOptions.output.entryFileNames and some path magic on the facadeModuleId, but it only works for scripts and not stylesheets. (implementation shown here)

Would REALLY love a fix for this. The option to preserving the directory structure for all the files seems to me like a very important feature to have.

[0x1eef]

I ran into this issue as well. I would like emitFile to preserve all of the path vs taking just the basename of a path, and for reasons similar to what has already been mentioned.

[Geoffrey60fps]

Tried to update to vite 4 and ran into this.
Not being able to manage the output file structure is a blocker as I have to comply to a specific directory tree directed by business rules.
This means vite 4 is a no go in my case.

[rschristian]

To add a slightly different use case:

CSS assets seem to take their names from the basenames of modules that import them, which tends to be problematic when working with the following component/page directory structure, as you might with (say) (p)react:

MyPage/
--index.jsx
--style.css

Because of this (and route-based code splitting), I have 26 index-<hash>.css files sitting in my output directory at the moment.... this is pretty much impossible to debug at larger scale. Matching up file hashes in a directory browser is a pretty miserable experience.

While the previous suggestion of exposing the source file path would be great, I'd also be very happy with a simple index -> dirname substitution, outputting MyPage-<hash>.css in the example above. It'd address some of the problems, though I'm not sure if it's any more or less breaking than the existing suggestions.

[matty-at-rdc]

This also bit me 🙁 doing a multi-page app and need to be able to get the known path names.

[PatrykKuniczak]

Any moves forwards?

Because its annoying, this feature is removed on v4

[supuwoerc]

Still no progress? I installed the latest vite and the results are the same as before...sad...

[PatrykKuniczak]

@supuwoerc it's done, but they want to add it to 5.18 it's in beta right now, i'm also waiting, it's sad they don't publish it for v4

[supuwoerc]

@supuwoerc it's done, but they want to add it to 5.18 it's in beta right now, i'm also waiting, it's sad they don't publish it for v4

Thanks for informing, looking forward to release soon ~