feat: css modules support (#3149)

lib/builder/webpack/base.js

@@ -136,26 +136,26 @@ export default class WebpackBaseConfig {
       },
       {
         test: /\.css$/,
-        use: perfLoader.pool('css', styleLoader.apply('css'))
+        oneOf: perfLoader.poolOneOf('css', styleLoader.apply('css'))
       },
       {
         test: /\.less$/,
-        use: perfLoader.pool('css', styleLoader.apply('less', 'less-loader'))
+        oneOf: perfLoader.poolOneOf('css', styleLoader.apply('less', 'less-loader'))
       },
       {
         test: /\.sass$/,
-        use: perfLoader.pool('css', styleLoader.apply('sass', {
+        oneOf: perfLoader.poolOneOf('css', styleLoader.apply('sass', {
           loader: 'sass-loader',
           options: { indentedSyntax: true }
         }))
       },
       {
         test: /\.scss$/,
-        use: perfLoader.pool('css', styleLoader.apply('scss', 'sass-loader'))
+        oneOf: perfLoader.poolOneOf('css', styleLoader.apply('scss', 'sass-loader'))
       },
       {
         test: /\.styl(us)?$/,
-        use: perfLoader.pool('css', styleLoader.apply('stylus', 'stylus-loader'))
+        oneOf: perfLoader.poolOneOf('css', styleLoader.apply('stylus', 'stylus-loader'))
       },
       {
         test: /\.(png|jpe?g|gif|svg)$/,

lib/builder/webpack/utils/perf-loader.js

@@ -53,4 +53,10 @@ export default class PerfLoader {
 
     return loaders
   }
+
+  poolOneOf(poolName, oneOfRules) {
+    return oneOfRules.map(rule => Object.assign({}, rule, {
+      use: this.pool(poolName, rule.use)
+    }))
+  }
 }

lib/builder/webpack/utils/style-loader.js

@@ -61,7 +61,7 @@ export default class StyleLoader {
     }
   }
 
-  css(importLoaders) {
+  css(importLoaders, options) {
     // css-loader
     // https://github.com/webpack-contrib/css-loader
     const cssLoaderAlias = {
@@ -71,12 +71,12 @@ export default class StyleLoader {
 
     return {
       loader: (this.isServer && this.extractCSS) ? 'css-loader/locals' : 'css-loader',
-      options: {
+      options: Object.assign({
         sourceMap: this.sourceMap,
         minimize: !this.dev,
         importLoaders: importLoaders,
         alias: cssLoaderAlias
-      }
+      }, options)
     }
   }
 
@@ -95,16 +95,35 @@ export default class StyleLoader {
   }
 
   apply(ext, loaders = []) {
-    const _customLoaders = [].concat(
+    const customLoaders = [].concat(
       this.postcss(loaders),
       this.styleResource(ext),
       this.normalize(loaders)
     ).filter(Boolean)
 
-    return [].concat(
-      this.extract() || this.vueStyle(),
-      this.css(_customLoaders.length),
-      _customLoaders
-    ).filter(Boolean)
+    const styleLoader = this.extract() || this.vueStyle()
+
+    return [
+      // This matches <style module>
+      {
+        resourceQuery: /module/,
+        use: [].concat(
+          styleLoader,
+          this.css(customLoaders.length, {
+            modules: true,
+            localIdentName: '[local]_[hash:base64:5]'
+          }),
+          customLoaders
+        )
+      },
+      // This matches plain <style> or <style scoped>
+      {
+        use: [].concat(
+          styleLoader,
+          this.css(customLoaders.length),
+          customLoaders
+        )
+      }
+    ]
   }
 }

test/fixtures/basic/pages/style.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1>H1 is rebeccapurple</h1>
+    {{ $style }}
+  </div>
+</template>
+
+<style>
+h1 {
+  color: rebeccapurple;
+}
+</style>
+
+<style module>
+:local(.foo) {
+  color: blue !important;
+}
+</style>