fix: fix css.loaderOptions.css.modules default values (#4363)

fixes #4357

Author: haoqunjiang

docs/guide/css.md

@@ -108,8 +108,13 @@ module.exports = {
   css: {
     loaderOptions: {
       css: {
-        localIdentName: '[name]-[hash]',
-        camelCase: 'only'
+        // 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
+        modules: {
+          localIdentName: '[name]-[hash]',
+          localsConvention: 'camelCaseOnly'
+        }
       }
     }
   }

packages/@vue/cli-service/lib/Service.js

@@ -370,15 +370,6 @@ module.exports = class Service {
     resolved.baseUrl = resolved.publicPath
     removeSlash(resolved, 'outputDir')
 
-    // deprecation warning
-    // TODO remove in final release
-    if (resolved.css && resolved.css.localIdentName) {
-      warn(
-        `css.localIdentName has been deprecated. ` +
-        `All css-loader options (except "modules") are now supported via css.loaderOptions.css.`
-      )
-    }
-
     // validate options
     validate(resolved, msg => {
       error(

packages/@vue/cli-service/lib/config/css.js

@@ -9,7 +9,7 @@ const findExisting = (context, files) => {
   }
 }
 
-module.exports = (api, options) => {
+module.exports = (api, rootOptions) => {
   api.chainWebpack(webpackConfig => {
     const getAssetPath = require('../util/getAssetPath')
     const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
@@ -22,16 +22,15 @@ module.exports = (api, options) => {
     } catch (e) {}
 
     const {
-      modules = false,
       extract = isProd,
       sourceMap = false,
       loaderOptions = {}
-    } = options.css || {}
+    } = rootOptions.css || {}
 
     const shouldExtract = extract !== false && !shadowMode
     const filename = getAssetPath(
-      options,
-      `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`
+      rootOptions,
+      `css/[name]${rootOptions.filenameHashing ? '.[contenthash:8]' : ''}.css`
     )
     const extractOptions = Object.assign({
       filename,
@@ -71,7 +70,7 @@ module.exports = (api, options) => {
         cssDeclarationSorter: false
       }]
     }
-    if (options.productionSourceMap && sourceMap) {
+    if (rootOptions.productionSourceMap && sourceMap) {
       cssnanoOptions.map = { inline: false }
     }
 
@@ -92,9 +91,10 @@ module.exports = (api, options) => {
 
       // rules for normal CSS imports
       const normalRule = baseRule.oneOf('normal')
-      applyLoaders(normalRule, modules)
+      const treatAllAsModules = !!(rootOptions.css && rootOptions.css.modules)
+      applyLoaders(normalRule, treatAllAsModules)
 
-      function applyLoaders (rule, modules) {
+      function applyLoaders (rule, isCssModule) {
         if (shouldExtract) {
           rule
             .use('extract-css-loader')
@@ -122,15 +122,11 @@ module.exports = (api, options) => {
           )
         }, loaderOptions.css)
 
-        if (modules) {
-          const {
-            localIdentName = '[name]_[local]_[hash:base64:5]'
-          } = loaderOptions.css || {}
-          Object.assign(cssLoaderOptions, {
-            modules: {
-              localIdentName
-            }
-          })
+        if (isCssModule) {
+          cssLoaderOptions.modules = {
+            localIdentName: '[name]_[local]_[hash:base64:5]',
+            ...cssLoaderOptions.modules
+          }
         }
 
         rule
@@ -186,7 +182,7 @@ module.exports = (api, options) => {
         webpackConfig
           .plugin('optimize-css')
             .use(require('@intervolga/optimize-cssnano-plugin'), [{
-              sourceMap: options.productionSourceMap && sourceMap,
+              sourceMap: rootOptions.productionSourceMap && sourceMap,
               cssnanoOptions
             }])
       }

packages/@vue/cli-service/lib/options.js

@@ -122,7 +122,6 @@ exports.defaults = () => ({
   css: {
     // extract: true,
     // modules: false,
-    // localIdentName: '[name]_[local]_[hash:base64:5]',
     // sourceMap: false,
     // loaderOptions: {}
   },