From d5055cd8dd80f0b7adbfc91d45b99b189f978e89 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 16 Jul 2020 13:38:46 -0400 Subject: [PATCH] refactor(compiler-sfc): simplify style preprocessors --- packages/compiler-sfc/src/compileStyle.ts | 2 +- .../compiler-sfc/src/stylePreprocessors.ts | 193 +++++++++--------- 2 files changed, 92 insertions(+), 103 deletions(-) diff --git a/packages/compiler-sfc/src/compileStyle.ts b/packages/compiler-sfc/src/compileStyle.ts index 60ecffc7..b0aa484c 100644 --- a/packages/compiler-sfc/src/compileStyle.ts +++ b/packages/compiler-sfc/src/compileStyle.ts @@ -213,7 +213,7 @@ function preprocess( ) } - return preprocessor.render( + return preprocessor( options.source, options.map, { diff --git a/packages/compiler-sfc/src/stylePreprocessors.ts b/packages/compiler-sfc/src/stylePreprocessors.ts index 31a98379..f0a09d75 100644 --- a/packages/compiler-sfc/src/stylePreprocessors.ts +++ b/packages/compiler-sfc/src/stylePreprocessors.ts @@ -3,17 +3,15 @@ import path from 'path' import { RawSourceMap } from 'source-map' import { SFCStyleCompileOptions } from './compileStyle' -export interface StylePreprocessor { - render( - source: string, - map: RawSourceMap | undefined, - options: { - [key: string]: any - filename: string - }, - customRequire: SFCStyleCompileOptions['preprocessCustomRequire'] - ): StylePreprocessorResults -} +export type StylePreprocessor = ( + source: string, + map: RawSourceMap | undefined, + options: { + [key: string]: any + filename: string + }, + customRequire: SFCStyleCompileOptions['preprocessCustomRequire'] +) => StylePreprocessorResults export interface StylePreprocessorResults { code: string @@ -23,118 +21,109 @@ export interface StylePreprocessorResults { } // .scss/.sass processor -const scss: StylePreprocessor = { - render(source, map, options, load = require) { - const nodeSass = load('sass') - const finalOptions = { - ...options, - data: source, - file: options.filename, - outFile: options.filename, - sourceMap: !!map - } - - try { - const result = nodeSass.renderSync(finalOptions) - // sass output path is position path - const dependencies = result.stats.includedFiles - if (map) { - return { - code: result.css.toString(), - map: merge(map, JSON.parse(result.map.toString())), - errors: [], - dependencies - } - } - - return { code: result.css.toString(), errors: [], dependencies } - } catch (e) { - return { code: '', errors: [e], dependencies: [] } - } +const scss: StylePreprocessor = (source, map, options, load = require) => { + const nodeSass = load('sass') + const finalOptions = { + ...options, + data: source, + file: options.filename, + outFile: options.filename, + sourceMap: !!map } -} -const sass: StylePreprocessor = { - render(source, map, options, load) { - return scss.render( - source, - map, - { - ...options, - indentedSyntax: true - }, - load - ) - } -} - -// .less -const less: StylePreprocessor = { - render(source, map, options, load = require) { - const nodeLess = load('less') - - let result: any - let error: Error | null = null - nodeLess.render( - source, - { ...options, syncImport: true }, - (err: Error | null, output: any) => { - error = err - result = output - } - ) - - if (error) return { code: '', errors: [error], dependencies: [] } - // less output path is relative path - const dependencies = getAbsolutePaths( - result.imports, - path.dirname(options.filename) - ) + try { + const result = nodeSass.renderSync(finalOptions) + // sass output path is position path + const dependencies = result.stats.includedFiles if (map) { return { code: result.css.toString(), - map: merge(map, result.map), + map: merge(map, JSON.parse(result.map.toString())), errors: [], - dependencies: dependencies + dependencies } } + return { code: result.css.toString(), errors: [], dependencies } + } catch (e) { + return { code: '', errors: [e], dependencies: [] } + } +} + +const sass: StylePreprocessor = (source, map, options, load) => + scss( + source, + map, + { + ...options, + indentedSyntax: true + }, + load + ) + +// .less +const less: StylePreprocessor = (source, map, options, load = require) => { + const nodeLess = load('less') + + let result: any + let error: Error | null = null + nodeLess.render( + source, + { ...options, syncImport: true }, + (err: Error | null, output: any) => { + error = err + result = output + } + ) + + if (error) return { code: '', errors: [error], dependencies: [] } + // less output path is relative path + const dependencies = getAbsolutePaths( + result.imports, + path.dirname(options.filename) + ) + if (map) { return { code: result.css.toString(), + map: merge(map, result.map), errors: [], dependencies: dependencies } } + + return { + code: result.css.toString(), + errors: [], + dependencies: dependencies + } } // .styl -const styl: StylePreprocessor = { - render(source, map, options, load = require) { - const nodeStylus = load('stylus') - try { - const ref = nodeStylus(source) - Object.keys(options).forEach(key => ref.set(key, options[key])) - if (map) ref.set('sourcemap', { inline: false, comment: false }) +const styl: StylePreprocessor = (source, map, options, load = require) => { + const nodeStylus = load('stylus') + try { + const ref = nodeStylus(source) + Object.keys(options).forEach(key => ref.set(key, options[key])) + if (map) ref.set('sourcemap', { inline: false, comment: false }) - const result = ref.render() - // stylus output path is relative path - const dependencies = getAbsolutePaths( - ref.deps(), - path.dirname(options.fileName) - ) - if (map) { - return { - code: result, - map: merge(map, ref.sourcemap), - errors: [], - dependencies - } + const result = ref.render() + // stylus output path is relative path + const dependencies = getAbsolutePaths( + ref.deps(), + path.dirname(options.fileName) + ) + if (map) { + return { + code: result, + map: merge(map, ref.sourcemap), + errors: [], + dependencies } - - return { code: result, errors: [], dependencies } - } catch (e) { - return { code: '', errors: [e], dependencies: [] } } + + return { code: result, errors: [], dependencies } + } catch (e) { + return { code: '', errors: [e], dependencies: [] } } }