From 90613b43a5a997fb48df9cb30df135a992ee8283 Mon Sep 17 00:00:00 2001 From: Rahul Kadyan Date: Tue, 3 Apr 2018 23:50:18 +0530 Subject: [PATCH 1/3] feat: preprocess scss/sass styles with node-sass --- lib/compileStyle.ts | 19 ++++++++++-- lib/styleProcessors/index.ts | 58 ++++++++++++++++++++++++++++++++++++ package.json | 1 + yarn.lock | 6 ++++ 4 files changed, 81 insertions(+), 3 deletions(-) create mode 100644 lib/styleProcessors/index.ts diff --git a/lib/compileStyle.ts b/lib/compileStyle.ts index f8039d6..1341d3b 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,14 @@ 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 { map, source } = preprocessor ? preprocess(options, preprocessor) : options const plugins = [] if (trim) { @@ -69,3 +73,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..635bd24 --- /dev/null +++ b/lib/styleProcessors/index.ts @@ -0,0 +1,58 @@ +import merge from "merge-source-map"; + +export interface StylePreprocessor { + render( + source: string, + map: any | null, + options: any + ): StylePreprocessorResults; +} + +export interface StylePreprocessorResults { + source: string; + map?: any; +} + +// .scss/.sass processor +let nodeSass: any; +const scss: StylePreprocessor = { + render( + source: string, + map: any | null, + options: any + ): StylePreprocessorResults { + if (!nodeSass) nodeSass = require("node-sass"); + + const finalOptions = Object.assign({}, options, { + data: source, + file: options.filename, + sourceMap: !!map + }); + + const result = nodeSass.renderSync(finalOptions); + + if (map) { + return { + source: result.css.toString(), + map: merge(map, JSON.parse(result.map.toString())) + }; + } + + return { source: 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" From 75e695282dd035354a508a4b8bf862e0c8760ef7 Mon Sep 17 00:00:00 2001 From: Rahul Kadyan Date: Wed, 4 Apr 2018 09:03:58 +0530 Subject: [PATCH 2/3] fix: conventions and code style - Remove semi-colons - Use `code` instead of `source` in preprocessor output --- lib/compileStyle.ts | 4 +++- lib/styleProcessors/index.ts | 26 ++++++++++++-------------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/lib/compileStyle.ts b/lib/compileStyle.ts index 1341d3b..ec34d4e 100644 --- a/lib/compileStyle.ts +++ b/lib/compileStyle.ts @@ -33,7 +33,9 @@ export function compileStyle ( preprocessLang } = options const preprocessor = preprocessLang && processors[preprocessLang] - const { map, source } = preprocessor ? preprocess(options, preprocessor) : options + const preProcessedSource = preprocessor && preprocess(options, preprocessor) + const map = preProcessedSource ? preProcessedSource.map : options.map + const source = preProcessedSource ? preProcessedSource.code : options.source const plugins = [] if (trim) { diff --git a/lib/styleProcessors/index.ts b/lib/styleProcessors/index.ts index 635bd24..0be4eda 100644 --- a/lib/styleProcessors/index.ts +++ b/lib/styleProcessors/index.ts @@ -1,46 +1,44 @@ -import merge from "merge-source-map"; +import merge from 'merge-source-map' export interface StylePreprocessor { render( source: string, map: any | null, options: any - ): StylePreprocessorResults; + ): StylePreprocessorResults } export interface StylePreprocessorResults { - source: string; - map?: any; + code: string + map?: any } // .scss/.sass processor -let nodeSass: any; const scss: StylePreprocessor = { render( source: string, map: any | null, options: any ): StylePreprocessorResults { - if (!nodeSass) nodeSass = require("node-sass"); - + const nodeSass = require('node-sass') const finalOptions = Object.assign({}, options, { data: source, file: options.filename, sourceMap: !!map - }); + }) - const result = nodeSass.renderSync(finalOptions); + const result = nodeSass.renderSync(finalOptions) if (map) { return { - source: result.css.toString(), + code: result.css.toString(), map: merge(map, JSON.parse(result.map.toString())) - }; + } } - return { source: result.css.toString() }; + return { code: result.css.toString() } } -}; +} const sass = { render( @@ -55,4 +53,4 @@ const sass = { export const processors: { [key: string]: StylePreprocessor } = { scss, sass -}; +} From d148a45ecdedf1309b1f3b45956d8dd029103bae Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 4 Apr 2018 09:11:05 -0400 Subject: [PATCH 3/3] Update index.ts --- lib/styleProcessors/index.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/styleProcessors/index.ts b/lib/styleProcessors/index.ts index 0be4eda..21861db 100644 --- a/lib/styleProcessors/index.ts +++ b/lib/styleProcessors/index.ts @@ -46,7 +46,11 @@ const sass = { map: any | null, options: any ): StylePreprocessorResults { - return scss.render(source, map, Object.assign({}, options, { indentedSyntax: true })) + return scss.render( + source, + map, + Object.assign({}, options, { indentedSyntax: true }) + ) } }