diff --git a/lib/compileStyle.ts b/lib/compileStyle.ts index f8039d6..ec34d4e 100644 --- a/lib/compileStyle.ts +++ b/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)) +} diff --git a/lib/styleProcessors/index.ts b/lib/styleProcessors/index.ts new file mode 100644 index 0000000..21861db --- /dev/null +++ b/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 +} diff --git a/package.json b/package.json index 468c2ae..d3639da 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 9466883..9042dbb 100644 --- a/yarn.lock +++ b/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"