✨ CSS Modules (#57)

* ✨ CSS Modules

* Add CSS modules before compiling

* Add scss support

* Add support for pug & jade

Fix #43

* Circle yarn issue

Author: znck

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    [ "es2015", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "retainLines": true,
+  "comments": true
+}

circle.yml

@@ -11,6 +11,7 @@ dependencies:
     - composer global require --no-progress sereno/installer
   override:
     - yarn --no-progress
+    - npm rebuild node-sass
   cache_directories:
     - "~/.yarn-cache"
     - "~/.composer/cache"

config/build.js

@@ -1,6 +1,6 @@
 "use strict";
 
-const buble = require('rollup-plugin-buble');
+const babel = require('rollup-plugin-babel');
 const rollup = require('rollup');
 const replace = require('rollup-plugin-replace');
 const zlib = require('zlib');
@@ -17,12 +17,7 @@ fs.writeFileSync('src/index.js', main);
 rollup.rollup({
           entry: 'src/index.js',
           plugins: [
-              buble({
-                  objectAssign: 'Object.assign',
-                  transforms: {
-                      dangerousForOf: true
-                  }
-              })
+              babel({ runtimeHelpers: true })
           ]
       })
       .then(function (bundle) {

package.json

@@ -41,14 +41,23 @@
     "debug": "^2.6.0",
     "html-minifier": "^3.2.3",
     "magic-string": "^0.19.0",
+    "node-sass": "^4.5.0",
     "parse5": "^3.0.1",
+    "postcss": "^5.2.11",
+    "postcss-modules": "^0.6.4",
+    "posthtml": "^0.9.2",
+    "posthtml-attrs-parser": "^0.1.1",
+    "pug": "^2.0.0-beta10",
     "rollup-pluginutils": "^2.0.1",
     "vue-template-compiler": "^2.1.10",
     "vue-template-es2015-compiler": "^1.5.0",
     "vue-template-validator": "^1.1.5"
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
     "clean-css": "^3.4.24",
     "coveralls": "^2.11.15",
     "eslint": "^3.14.0",
@@ -63,6 +72,7 @@
     "mocha": "^3.2.0",
     "mocha-lcov-reporter": "^1.2.0",
     "rollup": "^0.41.4",
+    "rollup-plugin-babel": "^2.7.1",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-css-only": "^0.2.0",
     "rollup-plugin-replace": "^1.1.1",

src/index.js

@@ -2,7 +2,7 @@ import { createFilter } from 'rollup-pluginutils'
 
 import vueTransform from './vueTransform'
 import DEFAULT_OPTIONS from './options'
-import compileStyle from './style'
+import compileStyle from './style/index'
 import debug from './debug'
 
 function mergeOptions (options, defaults) {
@@ -68,13 +68,14 @@ export default function vue (options = {}) {
                 return styles[component][index] || ''
             }
         },
-        transform (source, id) {
+        async transform (source, id) {
             if (!filter(id) || !id.endsWith('.vue')) {
                 debug(`Ignore: ${id}`)
                 return null
             }
 
-            const { code, css, map } = vueTransform(source, id, options)
+            const { code, css, map } = await vueTransform(source, id, options)
+
             styles[id] = css
 
             return { code, map }

src/options.js

@@ -34,5 +34,12 @@ export default {
             unicodeRegExp: false
         }
     },
-    styleToImports: false
+    styleToImports: false,
+    autoStyles: true,
+    disableCssModuleStaticReplacement: false,
+    modules: {
+        generateScopedName: '[name]__[local]___[hash:base64:5]'
+    },
+    scss: {},
+    pug: {}
 }

src/style.js

@@ -0,0 +1,45 @@
+import postcss from 'postcss'
+import modules from 'postcss-modules'
+
+function compileModule (code, map, source, options) {
+    let style
+
+    return postcss([
+        modules({
+            getJSON (filename, json) {
+                style = json
+            },
+            ...options.modules
+        })
+    ]).process(code, { map: { inline: false, prev: map }, from: source.id, to: source.id })
+      .then(
+            result => ({ code: result.css, map: result.map, module: style }),
+            error => {
+                throw error
+            })
+}
+
+export default async function (promise, options) {
+    const style = await promise
+    const { code, map } = ('$compiled' in style) ? style.$compiled : style
+
+    if (style.module === true) {
+        return compileModule(code, map, style, options).then(compiled => {
+            if (style.$compiled) {
+                compiled.$prev = style.$compiled
+            }
+
+            style.$compiled = compiled
+
+            return style
+        })
+    }
+
+    const output = { code, map, lang: 'css' }
+
+    if (style.$compiled) output.$prev = style.$compiled
+
+    style.$compiled = output
+
+    return style
+}

src/style/css.js

@@ -0,0 +1,60 @@
+import { writeFile } from 'fs'
+import compileCSS from './css'
+import compileSCSS from './scss'
+
+const compilers = {
+    scss: compileSCSS,
+    sass: compileSCSS
+}
+
+export async function compile (style, options) {
+    let output
+
+    if (style.lang === 'css') {
+        output = await compileCSS(style, options)
+    } else {
+        output = await compileCSS(await compilers[style.lang].call(null, style, options), options)
+    }
+
+    return output
+}
+
+export default function (files, options) {
+    if (options.css === false) {
+        return
+    }
+
+    // Combine all stylesheets.
+    let css = ''
+    const allStyles = []
+
+    Object.keys(files).forEach((file) => {
+        files[file].forEach((style) => {
+            css += style.code + '\n'
+            allStyles.push(style)
+        })
+    })
+
+    // Emit styles through callback
+    if (typeof (options.css) === 'function') {
+        options.css(css, allStyles, compile)
+
+        return
+    }
+
+    // Don't generate empty style file.
+    if (!css.trim().length) {
+        return
+    }
+
+    const dest = options.css
+
+    if (typeof dest !== 'string') {
+        return
+    }
+
+    // Emit styles to file
+    writeFile(dest, css, (err) => {
+        if (err) throw err
+    })
+}

src/style/index.js

@@ -0,0 +1,19 @@
+import sass from 'node-sass'
+
+export default function (style, options) {
+    const { css, map } = sass.renderSync({
+        file: style.id,
+        data: style.code,
+        omitSourceMapUrl: true,
+        sourceMap: true,
+        outFile: style.id,
+        ...options.scss
+    })
+
+    style.$compiled = {
+        code: css.toString(),
+        map: map.toString()
+    }
+
+    return style
+}

src/style/scss.js

@@ -0,0 +1,30 @@
+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 template
+}

src/template/html.js

@@ -0,0 +1,12 @@
+import compileHTML from './html'
+import compilePug from './pug'
+
+const compilers = {
+    html: compileHTML,
+    pug: compilePug,
+    jade: compilePug
+}
+
+export default async function (template, extras, options) {
+    return await compilers[extras.lang || 'html'].call(null, template, extras, options)
+}

src/template/index.js

@@ -0,0 +1,7 @@
+import pug from 'pug'
+
+export default async function (template, extras, options) {
+    const compiler = pug.compile(template, { filename: extras.id, ...options.pug })
+
+    return compiler({css: extras.modules || {}})
+}