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>

test/test.js

@@ -18,8 +18,12 @@ function test(name) {
         var entry = './fixtures/' + name + '.vue'
         var expected = read('expects/' + name + '.js').replace(/\r/g, '')
         var actualCss
-        var cssHandler = function (css) {
-            actualCss = css
+        var cssHandler = function (css, styles) {
+            if (['scss'].indexOf(name) > -1) {
+                actualCss = styles[0].$compiled.code
+            } else {
+                actualCss = css
+            }
         }
 
         return rollup.rollup({
@@ -37,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'].indexOf(name) > -1) {
+            if (['style', 'css-modules', 'css-modules-static', 'scss'].indexOf(name) > -1) {
                 var css = read('expects/' + name + '.css')
                 assert.equal(css.trim(), actualCss.trim(), 'should output style tag content')
             } else {

yarn.lock

@@ -2809,10 +2809,6 @@ lodash.flatten@^4.2.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
 
-lodash.get@^4.0.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
-
 lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -2849,6 +2845,10 @@ lodash.merge@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
 
+lodash.mergewith@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
+
 lodash.partialright@^4.1.4:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/lodash.partialright/-/lodash.partialright-4.2.1.tgz#0130d80e83363264d40074f329b8a3e7a8a1cc4b"
@@ -3197,6 +3197,29 @@ node-sass@^3.4.2:
     request "^2.61.0"
     sass-graph "^2.1.1"
 
+node-sass@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.0.tgz#532e37bad0ce587348c831535dbc98ea4289508b"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.3.2"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "^2.61.0"
+    sass-graph "^2.1.1"
+    stdout-stream "^1.4.0"
+
 node-uuid@~1.4.7:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
@@ -3508,13 +3531,6 @@ posthtml-attrs-parser@^0.1.1:
   dependencies:
     object-assign "^4.0.1"
 
-posthtml-css-modules@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/posthtml-css-modules/-/posthtml-css-modules-0.1.1.tgz#0d5f38e1a0b8a06ca4462ec3425d649aa49c8676"
-  dependencies:
-    lodash.get "^4.0.2"
-    posthtml-attrs-parser "^0.1.1"
-
 posthtml-parser@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.2.0.tgz#8e4a742e3c10865a718b157d68b879896fa26b1b"
@@ -4070,6 +4086,12 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
+stdout-stream@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
+  dependencies:
+    readable-stream "^2.0.1"
+
 stream-array@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/stream-array/-/stream-array-1.1.2.tgz#9e5f7345f2137c30ee3b498b9114e80b52bb7eb5"