feat: add css modules capability to style-compiler

vuejs · Oct 29, 2017 · d413d22 · d413d22
1 parent 9a30f9e
commit d413d22
Show file tree

Hide file tree

Showing 3 changed files with 228 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "lodash.defaultsdeep": "^4.6.0",
     "lru-cache": "^4.1.1",
     "postcss": "^6.0.12",
+    "postcss-modules": "^0.8.0",
     "postcss-selector-parser": "^2.2.3",
     "source-map": "^0.6.1",
     "vue-hot-reload-api": "^2.1.0",

diff --git a/src/style-compiler/index.js b/src/style-compiler/index.js
@@ -1,4 +1,5 @@
 const postcss = require('postcss')
+const cssModules = require('postcss-modules')
 const defaults = require('lodash.defaultsdeep')
 
 const trim = require('./plugins/trim')
@@ -40,9 +41,16 @@ module.exports = function compileStyle (style, filename, config) {
     plugins.push(scopeId({ id: config.scopeId }))
   }
 
+  let modules
+  if (style.descriptor.module) {
+    plugins.push(cssModules({
+      getJSON: (_, output) => { modules = output }
+    }))
+  }
+
   const output = postcss(plugins).process(style.code, options)
   const prepare = result => {
-    const output = { code: result.css }
+    const output = { code: result.css, modules }
 
     if (config.needMap) { output.map = result.map }
     result.warnings().forEach(warning => config.onWarn(warning))