feat: allow configuring css-loader options via css.loaderOptions.css

close #1484

BREAKING CHANGE: css.localIdentName has been deprecated. Use
css.loaderOptions.css.localIdentName instead.

Author: yyx990803

packages/@vue/cli-service/__tests__/css.spec.js

@@ -27,10 +27,10 @@ const findRule = (config, lang, index = 3) => {
     return rule.test.test(`.${lang}`)
   })
   // all CSS rules have 4 oneOf rules:
-  // - <style lang="module"> in Vue files
-  // - <style> in Vue files
-  // - *.modules.css imports from JS
-  // - *.css imports from JS
+  // 0 - <style lang="module"> in Vue files
+  // 1 - <style> in Vue files
+  // 2 - *.modules.css imports from JS
+  // 3 - *.css imports from JS
   return baseRule.oneOf[index]
 }
 
@@ -132,17 +132,28 @@ test('css.sourceMap', () => {
   })
 })
 
-test('css.localIdentName', () => {
+test('css-loader options', () => {
   const localIdentName = '[name]__[local]--[hash:base64:5]'
   const config = genConfig({
     vue: {
       css: {
-        localIdentName: localIdentName
+        loaderOptions: {
+          css: {
+            localIdentName,
+            camelCase: 'only'
+          }
+        }
       }
     }
   })
   LANGS.forEach(lang => {
-    expect(findOptions(config, lang, 'css', 0).localIdentName).toBe(localIdentName)
+    const vueOptions = findOptions(config, lang, 'css', 0)
+    expect(vueOptions.localIdentName).toBe(localIdentName)
+    expect(vueOptions.camelCase).toBe('only')
+
+    const extOptions = findOptions(config, lang, 'css', 2)
+    expect(extOptions.localIdentName).toBe(localIdentName)
+    expect(extOptions.camelCase).toBe('only')
   })
 })
 

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

@@ -269,6 +269,15 @@ module.exports = class Service {
     ensureSlash(resolved, 'baseUrl')
     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

@@ -17,7 +17,6 @@ module.exports = (api, options) => {
       modules = false,
       extract = true,
       sourceMap = false,
-      localIdentName = '[name]_[local]_[hash:base64:5]',
       loaderOptions = {}
     } = options.css || {}
 
@@ -79,21 +78,26 @@ module.exports = (api, options) => {
             })
         }
 
-        const cssLoaderOptions = {
+        const cssLoaderOptions = Object.assign({
           minimize: isProd,
           sourceMap,
           importLoaders: (
             1 + // stylePostLoader injected by vue-loader
             hasPostCSSConfig +
             !!loader
           )
-        }
+        }, loaderOptions.css)
+
         if (modules) {
+          const {
+            localIdentName = '[name]_[local]_[hash:base64:5]'
+          } = loaderOptions.css || {}
           Object.assign(cssLoaderOptions, {
             modules,
             localIdentName
           })
         }
+
         rule
           .use('css-loader')
           .loader('css-loader')

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

@@ -14,10 +14,10 @@ const schema = createSchema(joi => joi.object({
   // css
   css: joi.object({
     modules: joi.boolean(),
-    localIdentName: joi.string(),
     extract: joi.alternatives().try(joi.boolean(), joi.object()),
     sourceMap: joi.boolean(),
     loaderOptions: joi.object({
+      css: joi.object(),
       sass: joi.object(),
       less: joi.object(),
       stylus: joi.object(),