Add scss support

Author: znck

package.json

@@ -41,15 +41,16 @@
     "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",
     "rollup-pluginutils": "^2.0.1",
     "vue-template-compiler": "^2.1.10",
     "vue-template-es2015-compiler": "^1.5.0",
-    "vue-template-validator": "^1.1.5",
-    "posthtml-attrs-parser": "^0.1.1"
+    "vue-template-validator": "^1.1.5"
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",

src/options.js

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

src/style/css.js

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

src/style/index.js

@@ -12,7 +12,7 @@ export async function compile (style, options) {
     if (style.lang === 'css') {
         output = await compileCSS(style, options)
     } else {
-        output = await compileCSS(compilers[style.lang].call(null, style, options), options)
+        output = await compileCSS(await compilers[style.lang].call(null, style, options), options)
     }
 
     return output

src/style/scss.js

@@ -1,2 +1,19 @@
-export default function () {
+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
 }

test/expects/css-modules-static.js

@@ -1,3 +1,3 @@
-var cssModulesStatic = { template: "<div class=\"file__test keep-me\">Foo</div>",cssModules: {"test":"file__test"},};
+var cssModulesStatic = { template: "<div class=\"css-modules-static__test keep-me\">Foo</div>",cssModules: {"test":"css-modules-static__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"},};
+var cssModules = { template: "<div :class=\"$style.test\">Foo</div>",cssModules: {"test":"css-modules__test"},};
 
 export default cssModules;

test/expects/scss.css

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

test/expects/scss.js

@@ -0,0 +1,3 @@
+var scss = { template: "<div class=\"scss__test\"></div>",cssModules: {"test":"scss__test"},};
+
+export default scss;

test/fixtures/scss.vue

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