feat(css modules): Add CSS Module localIdentName option to vue config (#915)

Changed the vue config to take a user input option for CSS module localIdentName and default back to initial localIdentName ([name]_[local]__[hash:base64:5])

Author: n-zeplo

docs/css.md

@@ -17,6 +17,8 @@ As for standalone style files, any files ending with `.module.(css|sass|scss|les
 
 If you wish to be able to use CSS modules without the `.module` postfix, you can set `css: { modules: true }` in `vue.config.js`. This option does not affect `*.vue` files.
 
+If you wish to customize the CSS modules class name output you can set the `css: { localIdentName: [name]__[local]--[hash:base64:5]}` in `vue.config.js`.
+
 ### Pre-Processors
 
 You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, you can also just manually install the corresponding webpack loaders. The loaders are pre-configured and will automatically be picked up. For example, to add Sass to an existing project, simply run:

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

@@ -140,6 +140,21 @@ test('css.sourceMap', () => {
   })
 })
 
+test('css.localIdentName', () => {
+  const localIdentName = '[name]__[local]--[hash:base64:5]'
+  const config = genConfig({
+    vue: {
+      css: {
+        modules: true,
+        localIdentName: localIdentName
+      }
+    }
+  })
+  LANGS.forEach(lang => {
+    expect(findOptions(config, lang, 'css').localIdentName).toBe(localIdentName)
+  })
+})
+
 test('css.loaderOptions', () => {
   const data = '$env: production;'
   const config = genConfig({

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

@@ -19,7 +19,8 @@ module.exports = (api, options) => {
       extract: true,
       modules: false,
       sourceMap: false,
-      loaderOptions: {}
+      loaderOptions: {},
+      localIdentName: '[name]_[local]__[hash:base64:5]'
     }
     const userOptions = Object.assign(defaultOptions, options.css || {})
     const extract = isProd && userOptions.extract !== false
@@ -52,7 +53,7 @@ module.exports = (api, options) => {
           options.loaders = Object.assign(resolver.vue(), options.loaders)
           options.cssSourceMap = !!userOptions.cssSourceMap
           options.cssModules = Object.assign({
-            localIdentName: '[name]_[local]__[hash:base64:5]'
+            localIdentName: baseOptions.localIdentName
           }, options.cssModules)
           return options
         })

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

@@ -17,6 +17,7 @@ const schema = createSchema(joi => joi.object({
   css: joi.object({
     modules: joi.boolean(),
     extract: joi.boolean(),
+    localIdentName: joi.string(),
     sourceMap: joi.boolean(),
     loaderOptions: joi.object({
       sass: joi.object(),
@@ -77,6 +78,7 @@ exports.defaults = () => ({
   css: {
     // extract: true,
     // modules: false,
+    // localIdentName: '[name]_[local]_[hash:base64:5]',
     // sourceMap: false,
     // loaderOptions: {}
   },

packages/@vue/cli-service/lib/webpack/CSSLoaderResolver.js

@@ -13,6 +13,7 @@ module.exports = class CSSLoaderResolver {
    * @param {Object} options
    * @param {boolean} [options.sourceMap=undefined] Enable sourcemaps.
    * @param {boolean} [options.modules=undefined]  Enable CSS modules.
+   * @param {string} [options.localIdentName='[name]_[local]__[hash:base64:5]']  Customizes CSS modules localIdentName.
    * @param {boolean} [options.extract=undefined] Extract CSS.
    * @param {boolean} [options.minimize=undefined] Minimize CSS.
    * @param {boolean} [options.postcss=undefined] Enable postcss-loader.
@@ -21,6 +22,7 @@ module.exports = class CSSLoaderResolver {
   constructor ({
     sourceMap,
     modules,
+    localIdentName,
     extract,
     minimize,
     postcss,
@@ -32,6 +34,7 @@ module.exports = class CSSLoaderResolver {
     this.extract = extract && !process.env.VUE_CLI_CSS_SHADOW_MODE
     this.minimize = minimize
     this.modules = modules
+    this.localIdentName = localIdentName
     this.postcss = postcss
     this.loaderOptions = loaderOptions || {}
   }
@@ -45,7 +48,7 @@ module.exports = class CSSLoaderResolver {
     if (this.modules) {
       cssLoaderOptions.modules = true
       cssLoaderOptions.importLoaders = 1
-      cssLoaderOptions.localIdentName = '[name]_[local]__[hash:base64:5]'
+      cssLoaderOptions.localIdentName = this.localIdentName
     }
 
     if (loader === 'css') {