You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
2.6 KiB
133 lines
2.6 KiB
const merge = require('merge-source-map') |
|
|
|
export interface StylePreprocessor { |
|
render( |
|
source: string, |
|
map: any | null, |
|
options: any |
|
): StylePreprocessorResults |
|
} |
|
|
|
export interface StylePreprocessorResults { |
|
code: string |
|
map?: any |
|
errors: Array<Error> |
|
} |
|
|
|
// .scss/.sass processor |
|
const scss: StylePreprocessor = { |
|
render( |
|
source: string, |
|
map: any | null, |
|
options: any |
|
): StylePreprocessorResults { |
|
const nodeSass = require('sass') |
|
const finalOptions = Object.assign({}, options, { |
|
data: source, |
|
file: options.filename, |
|
outFile: options.filename, |
|
sourceMap: !!map |
|
}) |
|
|
|
try { |
|
const result = nodeSass.renderSync(finalOptions) |
|
|
|
if (map) { |
|
return { |
|
code: result.css.toString(), |
|
map: merge(map, JSON.parse(result.map.toString())), |
|
errors: [] |
|
} |
|
} |
|
|
|
return { code: result.css.toString(), errors: [] } |
|
} catch (e) { |
|
return { code: '', errors: [e] } |
|
} |
|
} |
|
} |
|
|
|
const sass = { |
|
render( |
|
source: string, |
|
map: any | null, |
|
options: any |
|
): StylePreprocessorResults { |
|
return scss.render( |
|
source, |
|
map, |
|
Object.assign({}, options, { indentedSyntax: true }) |
|
) |
|
} |
|
} |
|
|
|
// .less |
|
const less = { |
|
render( |
|
source: string, |
|
map: any | null, |
|
options: any |
|
): StylePreprocessorResults { |
|
const nodeLess = require('less') |
|
|
|
let result: any |
|
let error: Error | null = null |
|
nodeLess.render( |
|
source, |
|
Object.assign({}, options, { syncImport: true }), |
|
(err: Error | null, output: any) => { |
|
error = err |
|
result = output |
|
} |
|
) |
|
|
|
if (error) return { code: '', errors: [error] } |
|
|
|
if (map) { |
|
return { |
|
code: result.css.toString(), |
|
map: merge(map, result.map), |
|
errors: [] |
|
} |
|
} |
|
|
|
return { code: result.css.toString(), errors: [] } |
|
} |
|
} |
|
|
|
// .styl |
|
const styl = { |
|
render( |
|
source: string, |
|
map: any | null, |
|
options: any |
|
): StylePreprocessorResults { |
|
const nodeStylus = require('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() |
|
if (map) { |
|
return { |
|
code: result, |
|
map: merge(map, ref.sourcemap), |
|
errors: [] |
|
} |
|
} |
|
|
|
return { code: result, errors: [] } |
|
} catch (e) { |
|
return { code: '', errors: [e] } |
|
} |
|
} |
|
} |
|
|
|
export const processors: { [key: string]: StylePreprocessor } = { |
|
less, |
|
sass, |
|
scss, |
|
styl, |
|
stylus: styl |
|
}
|
|
|