[CSS Modules] Module/Filename not included in scoped class names

[tobi-fis]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

Hey everyone,
When using the built-in CSS Modules feature of vue with vite, the generated class names of SFCs do not behave as expected.

Expected
Coming from vue+webpack, the out-of-the-box behavior was aligned with the way CSS modules are supposed to function. Generated class names should normally look like this by default:
[moduleName]_[className]_[hash]

e.g. for class mainButton in the <style module> section of pageHeader.vue
pageHeader_mainButton__active_h6fhX

Actual
But for some reason, the moduleName part is ommited when using vite, making classes look like this:
_[className]_[hash]
e.g.
_mainButton__active_h6fhX

While classes are still technically scoped through the hash value, this should not be the default behavior when using CSS Modules.
Why is this different now in vite?

What I have tried
Of course I have tried to configure the css.module.generateScopedName option of the vite.config.ts to recreate the default behavior as described in the docs:
generateScopedName: "[name]__[local]___[hash:base64:5]"

But the "name" part then renders to this abomination:
App-vue-vue-type-style-index-0-lang-module
insted of just App

I have tried other configurations found on stackoverflow etc. but I have yet to find a working solution.

Thanks for any help.

PS: I tried it with a discussion first, but saw that they are alle staying unanswered for months. Sorry if this is wrong.

Reproduction

https://stackblitz.com/edit/vue3-vite-starter-kf4t5f?file=src%2FApp.vue

Steps to reproduce

Open the stackblitz demo, let it render and inspect the tag's generated class names.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P        
    Memory: 15.63 GB / 31.70 GB
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.43)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-vue: 4.2.3 => 4.2.3 
    vite: 4.4.3 => 4.4.3

Used Package Manager

npm

Logs

No response

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.

[edison1105]

It's related to vite, you should create a new issue in https://github.com/vitejs/vite