Refactoring & Documentation (#58)

* 📝 TODO: Add usage guidelines

* Fix image position

* 💩 Add less support

* Refactoring

* Choose minimal defaults

* Add missing dependency

Fixes #59

Author: znck

README.md

@@ -1,4 +1,4 @@
-<div class="text-center" style="align: center; margin: 20px">
+<div class="text-xs-center" align="center" style="margin: 20px">
   <img src="http://rollup-plugin-vue.znck.me/assets/images/logo.png">
 </div>
 

docs/introduction.md

@@ -1,4 +1,4 @@
-<div class="text-center" style="align: center; margin: 20px">
+<div class="text-xs-center" align="center" style="margin: 20px">
   <img src="http://rollup-plugin-vue.znck.me/assets/images/logo.png">
 </div>
 

package.json

@@ -37,9 +37,11 @@
   },
   "homepage": "https://github.com/znck/rollup-plugin-vue#readme",
   "dependencies": {
+    "babel-runtime": "^6.22.0",
     "de-indent": "^1.0.2",
     "debug": "^2.6.0",
     "html-minifier": "^3.2.3",
+    "less": "^2.7.2",
     "magic-string": "^0.19.0",
     "node-sass": "^4.5.0",
     "parse5": "^3.0.1",
@@ -69,11 +71,11 @@
     "gulp": "^3.9.1",
     "istanbul": "^0.4.5",
     "laravel-elixir": "^6.0.0-15",
+    "merge-options": "0.0.64",
     "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",
     "uglify-js": "^2.7.5",

src/index.js

@@ -4,49 +4,33 @@ import vueTransform from './vueTransform'
 import DEFAULT_OPTIONS from './options'
 import compileStyle from './style/index'
 import debug from './debug'
+import mergeOptions from 'merge-options'
 
-function mergeOptions (options, defaults) {
-    Object.keys(defaults).forEach((key) => {
-        const val = defaults[key]
-
-        if (key in options) {
-            if (typeof options[key] === 'object') {
-                mergeOptions(options[key], val)
-            }
-        } else {
-            options[key] = val
-        }
-    })
-
-    return options
-}
-
-export default function vue (options = {}) {
+export default function vue (opts = {}) {
     debug('Yo! rolling vue!')
-    const filter = createFilter(options.include, options.exclude)
+    const filter = createFilter(opts.include, opts.exclude)
 
-    delete options.include
-    delete options.exclude
+    delete opts.include
+    delete opts.exclude
 
     /* eslint-disable */
     try {
         const vueVersion = require('vue').version;
         if (parseInt(vueVersion.split('.')[0], 10) >= 2) {
-            if (!('compileTemplate' in options)) {
+            if (!('compileTemplate' in config)) {
                 debug('Vue 2.0 detected. Compiling template.');
-                options.compileTemplate = true;
+                opts.compileTemplate = true;
             }
         } else {
-            if (options.compileTemplate === true) {
+            if (opts.compileTemplate === true) {
                 console.warn('Vue version < 2.0.0 does not support compiled template.');
             }
-            options.compileTemplate = false;
+            opts.compileTemplate = false;
         }
     } catch (e) {}
     /* eslint-enable */
 
-    options = mergeOptions(options, DEFAULT_OPTIONS)
-
+    const config = mergeOptions(DEFAULT_OPTIONS, opts)
     const styles = {}
 
     return {
@@ -74,17 +58,19 @@ export default function vue (options = {}) {
                 return null
             }
 
-            const { code, css, map } = await vueTransform(source, id, options)
+            debug(`Compile: ${id}`)
+
+            const { code, css, map } = await vueTransform(source, id, config)
 
             styles[id] = css
 
             return { code, map }
         },
 
         ongenerate () {
-            if (options.styleToImports !== true) {
-                if (options.css === undefined || options.css === null) options.css = DEFAULT_OPTIONS.css
-                compileStyle(styles, options)
+            if (config.styleToImports !== true) {
+                if (config.css === undefined || config.css === null) config.css = DEFAULT_OPTIONS.css
+                compileStyle(styles, config)
             }
         }
     }

src/options.js

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

src/style/css.js

@@ -1,38 +1,67 @@
 import postcss from 'postcss'
 import modules from 'postcss-modules'
+import camelcase from 'camelcase'
+// import MagicString from 'magic-string'
+import debug from '../debug'
 
 function compileModule (code, map, source, options) {
     let style
+    debug(`CSS Modules: ${source.id}`)
 
     return postcss([
         modules({
             getJSON (filename, json) {
                 style = json
             },
-            ...options.modules
+            ...options.cssModules
         })
     ]).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
-            })
+          .then(
+                result => ({ code: result.css, map: result.map, module: style }),
+                error => {
+                    throw error
+                }
+          )
 }
 
 export default async function (promise, options) {
     const style = await promise
+    debug(`CSS: ${style.id}`)
     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
+
+                const classes = Object.keys(compiled.module)
+                const cssModule = {}
+
+                if (classes.length) {
+                    // Apply CSS modules to actual source.
+                    // TODO: Update source map.
+                    // const original = style.code
+
+                    style.code = classes.reduce(
+                          (result, name) => {
+                              cssModule[camelcase(name)] = compiled.module[name]
+
+                              return result.replace(`.${name}`, `.${compiled.module[name]}`)
+                          },
+                          style.code
+                    )
+                    // style.map = (new MagicString(original))
+
+                    compiled.module = (
+                          typeof (style.module) === 'string' && style.attrs.module.length
+                    ) ? { [style.module]: cssModule } : cssModule
+                }
             }
 
             style.$compiled = compiled
 
             return style
-        })
+        }).catch(error => debug(error))
     }
 
     const output = { code, map, lang: 'css' }

src/style/index.js

@@ -1,10 +1,12 @@
 import { writeFile } from 'fs'
 import compileCSS from './css'
 import compileSCSS from './scss'
+import compileLESS from './less'
 
 const compilers = {
     scss: compileSCSS,
-    sass: compileSCSS
+    sass: compileSCSS,
+    less: compileLESS
 }
 
 export async function compile (style, options) {
@@ -30,7 +32,8 @@ export default function (files, options) {
 
     Object.keys(files).forEach((file) => {
         files[file].forEach((style) => {
-            css += style.code + '\n'
+            css += ('$compiled' in style) ? `${style.$compiled.code}\n` : `${style.code}\n`
+
             allStyles.push(style)
         })
     })

src/style/less.js

@@ -0,0 +1,18 @@
+import less from 'less'
+
+export default async function (style, options) {
+    const { css, map } = await less.render(style.code, {
+        sourceMap: {
+            sourceMapFullFilename: style.id,
+            sourceMapFileInline: false
+        },
+        ...options.less
+    })
+
+    style.$compiled = {
+        code: css.toString(),
+        map: map.toString()
+    }
+
+    return style
+}

src/style/scss.js

@@ -1,6 +1,8 @@
 import sass from 'node-sass'
+import debug from '../debug'
 
 export default function (style, options) {
+    debug(`SASS: ${style.id}`)
     const { css, map } = sass.renderSync({
         file: style.id,
         data: style.code,

src/vueTransform.js

@@ -109,7 +109,7 @@ function injectTemplate (script, template, lang, options, modules) {
     throw new Error('[rollup-plugin-vue] could not find place to inject template in script.')
 }
 
-var validateTemplate = function (code, content, id) {
+function validateTemplate (code, content, id) {
     const warnings = templateValidator(code, content)
     if (warnings) {
         const relativePath = relative(process.cwd(), id)
@@ -124,6 +124,8 @@ var validateTemplate = function (code, content, id) {
 async function processTemplate (source, id, content, options, nodes, modules) {
     if (source === undefined) return undefined
 
+    debug(`Process template: ${id}`)
+
     const extras = { modules, id, lang: source.attrs.lang }
     const { code } = source
     const template = deIndent(
@@ -142,6 +144,8 @@ async function processTemplate (source, 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)
 
+    debug(`Process script: ${id}`)
+
     const lang = source.attrs.lang || 'js'
 
     const script = deIndent(padContent(content.slice(0, content.indexOf(source.code))) + source.code)
@@ -159,9 +163,10 @@ async function processScript (source, id, content, options, nodes, modules) {
     }
 }
 
+// eslint-disable-next-line complexity
 async function processStyle (styles, id, content, options) {
+    debug(`Process styles: ${id}`)
     const outputs = []
-
     for (let i = 0; i < styles.length; i += 1) {
         const style = styles[i]
 
@@ -176,21 +181,18 @@ async function processStyle (styles, id, content, options) {
             code: code,
             map: map,
             lang: style.attrs.lang || 'css',
-            module: 'module' in style.attrs,
-            scoped: 'scoped' in style.attrs
+            module: 'module' in style.attrs ? style.attrs.module || true : false,
+            scoped: 'scoped' in style.attrs ? style.attrs.scoped || true : false
         }
 
-        if (options.autoStyles) {
-            outputs.push(await compile(output, options))
-        } else {
-            outputs.push(output)
-        }
+        outputs.push(options.autoStyles ? await compile(output, options) : output)
     }
 
     return outputs
 }
 
 function parseTemplate (code) {
+    debug('Parsing template....')
     const fragment = parse5.parseFragment(code, { locationInfo: true })
 
     const nodes = {