feat: preprocess scss/sass styles with node-sass (#4)

Author: znck

lib/compileStyle.ts

@@ -2,6 +2,7 @@ import { ProcessOptions, LazyResult } from 'postcss'
 import postcss = require('postcss')
 import trimPlugin from './stylePlugins/trim'
 import scopedPlugin from './stylePlugins/scoped'
+import { processors, StylePreprocessor, StylePreprocessorResults } from './styleProcessors'
 
 export interface StyleCompileOptions {
   source: string
@@ -10,6 +11,8 @@ export interface StyleCompileOptions {
   map?: any
   scoped?: boolean
   trim?: boolean
+  preprocessLang?: string
+  preprocessOptions?: any
 }
 
 export interface StyleCompileResults {
@@ -23,13 +26,16 @@ export function compileStyle (
   options: StyleCompileOptions
 ): StyleCompileResults {
   const {
-    source,
     filename,
     id,
-    map,
     scoped = true,
-    trim = true
+    trim = true,
+    preprocessLang
   } = options
+  const preprocessor = preprocessLang && processors[preprocessLang]
+  const preProcessedSource = preprocessor && preprocess(options, preprocessor)
+  const map = preProcessedSource ? preProcessedSource.map : options.map
+  const source = preProcessedSource ? preProcessedSource.code : options.source
 
   const plugins = []
   if (trim) {
@@ -69,3 +75,12 @@ export function compileStyle (
     rawResult: result
   }
 }
+
+function preprocess(
+  options: StyleCompileOptions,
+  preprocessor: StylePreprocessor
+): StylePreprocessorResults {
+  return preprocessor.render(options.source, options.map, Object.assign({
+    filename: options.filename
+  }, options.preprocessOptions))
+}

lib/styleProcessors/index.ts

@@ -0,0 +1,60 @@
+import merge from 'merge-source-map'
+
+export interface StylePreprocessor {
+  render(
+    source: string,
+    map: any | null,
+    options: any
+  ): StylePreprocessorResults
+}
+
+export interface StylePreprocessorResults {
+  code: string
+  map?: any
+}
+
+// .scss/.sass processor
+const scss: StylePreprocessor = {
+  render(
+    source: string,
+    map: any | null,
+    options: any
+  ): StylePreprocessorResults {
+    const nodeSass = require('node-sass')
+    const finalOptions = Object.assign({}, options, {
+      data: source,
+      file: options.filename,
+      sourceMap: !!map
+    })
+
+    const result = nodeSass.renderSync(finalOptions)
+
+    if (map) {
+      return {
+        code: result.css.toString(),
+        map: merge(map, JSON.parse(result.map.toString()))
+      }
+    }
+
+    return { code: result.css.toString() }
+  }
+}
+
+const sass = {
+  render(
+    source: string,
+    map: any | null,
+    options: any
+  ): StylePreprocessorResults {
+    return scss.render(
+      source,
+      map,
+      Object.assign({}, options, { indentedSyntax: true })
+    )
+  }
+}
+
+export const processors: { [key: string]: StylePreprocessor } = {
+  scss,
+  sass
+}

package.json

@@ -37,6 +37,7 @@
     "consolidate": "^0.15.1",
     "hash-sum": "^1.0.2",
     "lru-cache": "^4.1.2",
+    "merge-source-map": "^1.1.0",
     "postcss": "^6.0.20",
     "postcss-selector-parser": "^3.1.1",
     "prettier": "^1.11.1",

yarn.lock

@@ -2219,6 +2219,12 @@ mem@^1.1.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+merge-source-map@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
+  dependencies:
+    source-map "^0.6.1"
+
 merge-stream@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"