vue3-yuanma/packages/compiler-sfc/src/stylePreprocessors.ts

143 lines
3.3 KiB
TypeScript
Raw Normal View History

2019-11-07 10:58:15 +08:00
import merge from 'merge-source-map'
import path from 'path'
import { RawSourceMap } from 'source-map'
import { SFCStyleCompileOptions } from './compileStyle'
2019-11-07 10:58:15 +08:00
export type StylePreprocessor = (
source: string,
map: RawSourceMap | undefined,
options: {
[key: string]: any
filename: string
},
customRequire: SFCStyleCompileOptions['preprocessCustomRequire']
) => StylePreprocessorResults
2019-11-07 10:58:15 +08:00
export interface StylePreprocessorResults {
code: string
map?: object
2019-12-12 02:33:45 +08:00
errors: Error[]
dependencies: string[]
2019-11-07 10:58:15 +08:00
}
// .scss/.sass processor
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
2019-11-07 10:58:15 +08:00
}
try {
const result = nodeSass.renderSync(finalOptions)
// sass output path is position path
const dependencies = result.stats.includedFiles
2019-11-07 10:58:15 +08:00
if (map) {
return {
code: result.css.toString(),
map: merge(map, JSON.parse(result.map.toString())),
errors: [],
dependencies
2019-11-07 10:58:15 +08:00
}
}
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
}
2019-11-07 10:58:15 +08:00
}
return {
code: result.css.toString(),
errors: [],
dependencies: dependencies
}
2019-11-07 10:58:15 +08:00
}
// .styl
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
2019-11-07 10:58:15 +08:00
}
}
return { code: result, errors: [], dependencies }
} catch (e) {
return { code: '', errors: [e], dependencies: [] }
2019-11-07 10:58:15 +08:00
}
}
export type PreprocessLang = 'less' | 'sass' | 'scss' | 'styl' | 'stylus'
export const processors: Record<PreprocessLang, StylePreprocessor> = {
2019-11-07 10:58:15 +08:00
less,
sass,
scss,
styl,
stylus: styl
}
function getAbsolutePaths(relativePaths: string[], dirname: string): string[] {
return relativePaths.map(relativePath => path.join(dirname, relativePath))
}