feat!: upgrade to css-loader 5; remove css.requireModuleExtension & css.modules options (#6332)

Author: haoqunjiang

docs/config/README.md

@@ -245,22 +245,9 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40
 
 ### css.modules
 
-Deprecated since v4, please use [`css.requireModuleExtension`](#css-requireModuleExtension) instead.
-
-In v3 this means the opposite of `css.requireModuleExtension`.
-
 ### css.requireModuleExtension
 
-- Type: `boolean`
-- Default: `true`
-
-  By default, only files that ends in `*.module.[ext]` are treated as CSS modules. Setting this to `false` will allow you to drop `.module` in the filenames and treat all `*.(css|scss|sass|less|styl(us)?)` files as CSS modules.
-
-  ::: tip
-  If you have customized CSS Modules configurations in `css.loaderOptions.css`, then the `css.requireModuleExtension` field must be explicitly configured to `true` or `false`, otherwise we can't be sure whether you want to apply these options to all CSS files or not.
-  :::
-
-  See also: [Working with CSS > CSS Modules](../guide/css.md#css-modules)
+Both removed in v5, see [Working with CSS > CSS Modules](../guide/css.md#css-modules) for guidance on how to treat all style imports as CSS Modules.
 
 ### css.extract
 

docs/guide/css.md

@@ -81,40 +81,48 @@ In the production build, Vue CLI optimizes your CSS and will drop unnecessary ve
 
 You can [use CSS Modules in `*.vue` files](https://vue-loader.vuejs.org/en/features/css-modules.html) out of the box with `<style module>`.
 
-To import CSS or other pre-processor files as CSS Modules in JavaScript, the filename should end with `.module.(css|less|sass|scss|styl)`:
+To import CSS or other pre-processor files as CSS Modules in JavaScript, the filename should end with `.module(s).(css|less|sass|scss|styl)`:
 
 ``` js
 import styles from './foo.module.css'
 // works for all supported pre-processors as well
 import sassStyles from './foo.module.scss'
 ```
 
-If you want to drop the `.module` in the filenames, set `css.requireModuleExtension` to `false` in `vue.config.js`:
+If you want to drop the `.module` in the file names and treat all style files as CSS Modules, you need to configure the `css-loader` option as follows:
 
 ``` js
 // vue.config.js
 module.exports = {
   css: {
-    requireModuleExtension: false
+    loaderOptions: {
+      css: {
+        modules: {
+          auto: () => true
+        }
+      }
+    }
   }
 }
 ```
 
-If you wish to customize the generated CSS modules class names, you can do so via `css.loaderOptions.css` in `vue.config.js`. All `css-loader` options are supported here, for example `localIdentName` and `camelCase`:
+If you wish to customize the generated CSS Modules class names, you can do so via `css.loaderOptions.css` in `vue.config.js`, too. All `css-loader` options are supported here:
 
 ``` js
 // vue.config.js
 module.exports = {
   css: {
     loaderOptions: {
       css: {
-        // Note: the following config format is different between Vue CLI v4 and v3
-        // For Vue CLI v3 users, please refer to css-loader v1 documentations
-        // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
+        // Note: the following config format is different between different Vue CLI versions
+        // See the corresponding css-loader documentation for more details.
+        // Vue CLI v3 uses css-loader v1: https://www.npmjs.com/package/css-loader/v/1.0.1
+        // Vue CLI v4 uses css-loader v3: https://www.npmjs.com/package/css-loader/v/3.6.0
+        // Vue CLI v5 uses css-loader v5: https://github.com/webpack-contrib/css-loader#readme
         modules: {
           localIdentName: '[name]-[hash]'
-        },
-        localsConvention: 'camelCaseOnly'
+          exportLocalsConvention: 'camelCaseOnly'
+        }
       }
     }
   }

docs/migrations/migrate-from-v4.md

@@ -72,6 +72,12 @@ Underlyingly, it uses the [`resolutions`](https://classic.yarnpkg.com/en/docs/se
 
 Though both work in all our tests, please be aware that the `module-alias` approach is still considered hacky, and may not be as stable as the `"resolutions"` one.
 
+#### CSS Modules
+
+The `css.requireModuleExtension` option is removed. If you do need to strip the `.module` part in CSS Module file names, please refer to [Working with CSS > CSS Modules](../guide/css.md#css-modules) for more guidance.
+
+`css-loader` is upgraded from v3 to v5, a few CSS Module related options have been renamed, along with other changes. See [full changelog](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md) for additional details.
+
 #### Sass/SCSS
 
 No longer supports generating project with `node-sass`. It has been [deprecated](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) for a while. Please use the `sass` package instead.