Add CSS modules before compiling

Author: znck

package.json

@@ -45,11 +45,11 @@
     "postcss": "^5.2.11",
     "postcss-modules": "^0.6.4",
     "posthtml": "^0.9.2",
-    "posthtml-css-modules": "^0.1.1",
     "rollup-pluginutils": "^2.0.1",
     "vue-template-compiler": "^2.1.10",
     "vue-template-es2015-compiler": "^1.5.0",
-    "vue-template-validator": "^1.1.5"
+    "vue-template-validator": "^1.1.5",
+    "posthtml-attrs-parser": "^0.1.1"
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",

src/options.js

@@ -36,6 +36,7 @@ export default {
     },
     styleToImports: false,
     autoStyles: true,
+    disableCssModuleStaticReplacement: false,
     modules: {
         generateScopedName: '[name]__[local]___[hash:base64:5]'
     }

src/template/html.js

@@ -1,12 +1,30 @@
-// import posthtml from 'posthtml'
-// import parseAttrs from 'posthtml-attrs-parser'
-
-export default function (template, extras, options) {
-    if ('module' in extras) {
-        // return posthtml([
-        //
-        // ])
+import postHtml from 'posthtml'
+import parseAttrs from 'posthtml-attrs-parser'
+
+const plugin = (modules) => {
+    return function cssModules (tree) {
+        tree.match({attrs: {'class': /\w+/}}, node => {
+            const attrs = parseAttrs(node.attrs)
+
+            if (attrs.class) {
+                attrs.class = attrs.class.map(c => modules[c] || c)
+
+                node.attrs = attrs.compose()
+            }
+
+            return node
+        })
+    }
+}
+
+export default async function (template, extras, options) {
+    if ('modules' in extras && Object.keys(extras.modules).length) {
+        const output = await postHtml([
+            plugin(extras.modules)
+        ]).process(template)
+
+        return output.html
     }
 
-    return Promise.resolve(template)
+    return template
 }

src/template/index.js

@@ -4,6 +4,8 @@ const compilers = {
     html: compileHTML
 }
 
-export function compile (template, extras, options) {
-    return compilers[template.lang].call(null, template, extras, options)
+export default async function (template, extras, options) {
+    const lang = template.lang || 'html'
+
+    return await compilers[lang].call(null, template, extras, options)
 }

src/vueTransform.js

@@ -4,6 +4,7 @@ import parse5 from 'parse5'
 import validateTemplate from 'vue-template-validator'
 import transpileVueTemplate from 'vue-template-es2015-compiler'
 import { compile } from './style/index'
+import templateProcessor from './template/index'
 import { relative } from 'path'
 import MagicString from 'magic-string'
 import debug from './debug'
@@ -111,11 +112,15 @@ function injectTemplate (script, template, lang, options, modules) {
 /**
  * Compile template: DeIndent and minify html.
  */
-function processTemplate (source, id, content, options) {
+async function processTemplate (source, id, content, options, nodes, modules) {
     if (source === undefined) return undefined
 
     const { code } = source
-    const template = deIndent(code)
+    const template = deIndent(
+          await (options.disableCssModuleStaticReplacement !== true
+                ? templateProcessor(code, { modules }, options)
+                : code)
+    )
 
     if (!options.compileTemplate) {
         const warnings = validateTemplate(code, content)
@@ -130,8 +135,8 @@ function processTemplate (source, id, content, options) {
     return htmlMinifier.minify(template, options.htmlMinifier)
 }
 
-function processScript (source, id, content, options, nodes, modules) {
-    const template = processTemplate(nodes.template[0], id, content, options, nodes, modules)
+async function processScript (source, id, content, options, nodes, modules) {
+    const template = await processTemplate(nodes.template[0], id, content, options, nodes, modules)
 
     const lang = source.attrs.lang || 'js'
 
@@ -235,7 +240,7 @@ export default async function vueTransform (code, id, options) {
     const nodes = parseTemplate(code)
     const css = await processStyle(nodes.style, id, code, options, nodes)
     const modules = getModules(css)
-    const js = processScript(nodes.script[0], id, code, options, nodes, modules)
+    const js = await processScript(nodes.script[0], id, code, options, nodes, modules)
 
     const isProduction = process.env.NODE_ENV === 'production'
     const isWithStripped = options.stripWith !== false

test/expects/css-modules-static.css

@@ -0,0 +1,3 @@
+.test {
+    color: red;
+}

test/expects/css-modules-static.js

@@ -0,0 +1,3 @@
+var cssModulesStatic = { template: "<div class=\"file__test keep-me\">Foo</div>",cssModules: {"test":"file__test"},};
+
+export default cssModulesStatic;

test/expects/css-modules.js

@@ -1,3 +1,3 @@
-var cssModules = { template: "<div :class=\"$style.test\">Foo</div>",cssModules: {"test":"file__test___32Lja"},};
+var cssModules = { template: "<div :class=\"$style.test\">Foo</div>",cssModules: {"test":"file__test"},};
 
 export default cssModules;

test/fixtures/css-modules-static.vue

@@ -0,0 +1,13 @@
+<template>
+ <div class="test keep-me">Foo</div>
+</template>
+
+<script lang="babel">
+export default {}
+</script>
+
+<style lang="css" module>
+.test {
+    color: red;
+}
+</style>

test/test.js

@@ -26,6 +26,9 @@ function test(name) {
             entry: entry,
             plugins: [vuePlugin({
                 css: cssHandler,
+                modules: {
+                    generateScopedName: '[name]__[local]'
+                },
                 compileTemplate: ['compileTemplate', 'slot', 'table', 'table-n-slot'].indexOf(name) > -1
             })]
         }).then(function (bundle) {
@@ -34,7 +37,7 @@ function test(name) {
             assert.equal(code.trim(), expected.trim(), 'should compile code correctly')
 
             // Check css output
-            if (['style', 'css-modules'].indexOf(name) > -1) {
+            if (['style', 'css-modules', 'css-modules-static'].indexOf(name) > -1) {
                 var css = read('expects/' + name + '.css')
                 assert.equal(css.trim(), actualCss.trim(), 'should output style tag content')
             } else {