CSS Modules not working as document

[Maorey]

Version

4.0.0-beta.2

Reproduction link

https://github.com/vuejs/vue-cli/tree/v4.0.0-beta.2

Environment info

Irrelevant

Steps to reproduce

1. in vue.config.js, set:

css.loaderOptions.css = {
  localIdentName: process.env.NODE_ENV === 'production' 
    ? '[hash:5]'
    : '[folder]-[name]-[local][emoji]',
  camelCase: 'only'
}

2. yarn run serve

What is expected?

1. <style> in .vue file is global mode
2. <style module> in .vue file is local mode
3. file /\w+\.(?:css|scss|sass|less|styl)/ is global mode
4. file /\w+\.module\.(?:css|scss|sass|less|styl)/ is local mode
   mode

What is actually happening?

css-loader ValidationError

And try:

css.loaderOptions.css = {
  modules: {
      localIdentName: process.env.NODE_ENV === 'production' 
        ? '[hash:5]'
        : '[folder]-[name]-[local][emoji]',
  },
  localsConvention: 'camelCaseOnly',
}

All css are local mode

---

Maybe the option css.loaderOptions.css.modules should be rename to avoid conflict with css-loader option.

[haoqunjiang]

I think this is the natural outcome of the css-loader v3 update.

In the past, it's possible to customize these options without touching the module field. So we can separate the modules options out to css.modules and default it to false, whatever you do on localsIndentName doesn't affect the modules option.

With the css-loader v3 configuration update, it's hard to keep the opt-in semantic of css.modules option if we don't touch the semantic of loaderOptions (they are meant to apply to all nested loaders configs).
I'm still not sure what's the best way out.

[haoqunjiang]

One possible solution:
If css.loaderOptions.css.modules is not undefined, then the user will be prompt to explicitly set css.modules.
If it's false, then the custom loaderOptions.css.modules only applies to <style module> and .module.css.

[haoqunjiang]

That feels super unintuitive though.
Maybe css.modules should be renamed to css.enableModulesForAll.