Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

1. Use <style module> in a component
2. Give a class to an element (e.g. <p :class="$style.paragraph" />)

What is expected?

The element's class should be: ComponentName_paragraph_[uniqueId]

What is actually happening?

The element's class is: _paragraph_[uniqueId]

Why do you expect the component name to be part of the class name?

Why do you expect the component name to be part of the class name?

This was the behavior in vue-cli (https://github.com/vuejs/vue-cli/commit/fd131060db0e35b0f421c7bcd6bb57af63ada2b4)

@vue/compiler-sfc (found here in this repo) provides options to configure this, just like it was done back then for Vue 2 in Vue CLI.

You can open an issue in Vue CLI asking for re-enabling this - though from a quick look at the latest version of vue-loader for Vue 3, I don't see how that would currently be possible, so it might be implented in VueLoder first. But then again, I'm not too firm in that loade's implementation.

I know that you can configure it in the Vite plugin though.

Either way, this isn't a "bug" solvable in this repository.

@sodatea do you have any insights in the current situation with Vue CLI / vue-loader? We might be hesitant to re-implement it as we want to bring Vue CLI into maintenance mode, and the ids generated now are still unique, so nothing breaks.

Vue CLI still has that default, so this issue is about the Vite plugin? You can customize it via the css.modules.generateScopedName config, available options are documented https://github.com/madyankin/postcss-modules#generating-scoped-names

Thanks @LinusBorg and @sodatea I thought it was a bug at first, but then realized it was configured in Vue CLI as the default. So this makes it a feature request to the Vite plugin instead of a bug. Having the component name as part of the class name is super helpful for debugging CSS. I guess it will benefit to have it as default also in the Vite plugin if that's possible