Add support for pug & jade

Fix #43

Author: znck

package.json

@@ -47,6 +47,7 @@
     "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",

src/options.js

@@ -40,5 +40,6 @@ export default {
     modules: {
         generateScopedName: '[name]__[local]___[hash:base64:5]'
     },
-    scss: {}
+    scss: {},
+    pug: {}
 }

src/style/index.js

@@ -3,7 +3,8 @@ import compileCSS from './css'
 import compileSCSS from './scss'
 
 const compilers = {
-    scss: compileSCSS
+    scss: compileSCSS,
+    sass: compileSCSS
 }
 
 export async function compile (style, options) {

src/template/index.js

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

src/template/pug.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 || {}})
+}

src/vueTransform.js

@@ -1,7 +1,7 @@
 import deIndent from 'de-indent'
 import htmlMinifier from 'html-minifier'
 import parse5 from 'parse5'
-import validateTemplate from 'vue-template-validator'
+import templateValidator from 'vue-template-validator'
 import transpileVueTemplate from 'vue-template-es2015-compiler'
 import { compile } from './style/index'
 import templateProcessor from './template/index'
@@ -109,27 +109,31 @@ 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) {
+    const warnings = templateValidator(code, content)
+    if (warnings) {
+        const relativePath = relative(process.cwd(), id)
+        warnings.forEach((msg) => {
+            console.warn(`\n Warning in ${relativePath}:\n ${msg}`)
+        })
+    }
+}
 /**
  * Compile template: DeIndent and minify html.
  */
 async function processTemplate (source, id, content, options, nodes, modules) {
     if (source === undefined) return undefined
 
+    const extras = { modules, id, lang: source.attrs.lang }
     const { code } = source
     const template = deIndent(
           await (options.disableCssModuleStaticReplacement !== true
-                ? templateProcessor(code, { modules }, options)
+                ? templateProcessor(code, extras, options)
                 : code)
     )
 
     if (!options.compileTemplate) {
-        const warnings = validateTemplate(code, content)
-        if (warnings) {
-            const relativePath = relative(process.cwd(), id)
-            warnings.forEach((msg) => {
-                console.warn(`\n Warning in ${relativePath}:\n ${msg}`)
-            })
-        }
+        validateTemplate(code, content, id)
     }
 
     return htmlMinifier.minify(template, options.htmlMinifier)

test/expects/pug.css

@@ -0,0 +1,2 @@
+.pug__test {
+  color: red; }

test/expects/pug.js

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

test/fixtures/pug.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+div(class=css.test class='keep-me') foo
+</template>
+
+<script lang="babel">
+export default {}
+</script>
+
+
+<style lang="scss" module>
+$var: red;
+
+.test {
+    color: $var;
+}
+</style>

test/test.js

@@ -19,7 +19,7 @@ function test(name) {
         var expected = read('expects/' + name + '.js').replace(/\r/g, '')
         var actualCss
         var cssHandler = function (css, styles) {
-            if (['scss'].indexOf(name) > -1) {
+            if (['scss', 'pug'].indexOf(name) > -1) {
                 actualCss = styles[0].$compiled.code
             } else {
                 actualCss = css
@@ -41,7 +41,7 @@ function test(name) {
             assert.equal(code.trim(), expected.trim(), 'should compile code correctly')
 
             // Check css output
-            if (['style', 'css-modules', 'css-modules-static', 'scss'].indexOf(name) > -1) {
+            if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug'].indexOf(name) > -1) {
                 var css = read('expects/' + name + '.css')
                 assert.equal(css.trim(), actualCss.trim(), 'should output style tag content')
             } else {