theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(compiler-sfc): simplify style preprocessors

Browse Source
This commit is contained in:
Evan You 2020-07-16 13:38:46 -04:00
parent 9cb29eea3a
commit d5055cd8dd
2 changed files with 92 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/compiler-sfc/src/compileStyle.ts
View File

@ -213,7 +213,7 @@ function preprocess(
)
}
return preprocessor.render(
return preprocessor(
options.source,
options.map,
{

193
packages/compiler-sfc/src/stylePreprocessors.ts
View File

@ -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: [] }
}
}