Skip to content

Commit 066d514

Browse files
authored
feat(compiler-sfc): additionalData support for css preprocessors (#2126)
close vitejs/vite#520
1 parent 7449c76 commit 066d514

File tree

2 files changed

+45
-3
lines changed

2 files changed

+45
-3
lines changed

packages/compiler-sfc/__tests__/compileStyle.spec.ts

+29-1
Original file line numberDiff line numberDiff line change
@@ -337,7 +337,7 @@ describe('SFC style preprocessors', () => {
337337
])
338338
})
339339

340-
test('scss respect user-defined options.additionalData', () => {
340+
test('scss respect user-defined string options.additionalData', () => {
341341
const res = compileStyle({
342342
preprocessOptions: {
343343
additionalData: `
@@ -358,4 +358,32 @@ describe('SFC style preprocessors', () => {
358358

359359
expect(res.errors.length).toBe(0)
360360
})
361+
362+
test('scss respect user-defined function options.additionalData', () => {
363+
const source = `
364+
.square {
365+
@include square(100px);
366+
}
367+
`
368+
const filename = path.resolve(__dirname, './fixture/test.scss')
369+
const res = compileStyle({
370+
preprocessOptions: {
371+
additionalData: (s: string, f: string) => {
372+
expect(s).toBe(source)
373+
expect(f).toBe(filename)
374+
return `
375+
@mixin square($size) {
376+
width: $size;
377+
height: $size;
378+
}`
379+
}
380+
},
381+
source,
382+
filename,
383+
id: '',
384+
preprocessLang: 'scss'
385+
})
386+
387+
expect(res.errors.length).toBe(0)
388+
})
361389
})

packages/compiler-sfc/src/stylePreprocessors.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import merge from 'merge-source-map'
22
import { RawSourceMap } from 'source-map'
33
import { SFCStyleCompileOptions } from './compileStyle'
4+
import { isFunction } from '@vue/shared'
45

56
export type StylePreprocessor = (
67
source: string,
78
map: RawSourceMap | undefined,
89
options: {
910
[key: string]: any
11+
additionalData?: string | ((source: string, filename: string) => string)
1012
filename: string
1113
},
1214
customRequire: SFCStyleCompileOptions['preprocessCustomRequire']
@@ -24,7 +26,7 @@ const scss: StylePreprocessor = (source, map, options, load = require) => {
2426
const nodeSass = load('sass')
2527
const finalOptions = {
2628
...options,
27-
data: (options.additionalData || '') + source,
29+
data: getSource(source, options.filename, options.additionalData),
2830
file: options.filename,
2931
outFile: options.filename,
3032
sourceMap: !!map
@@ -66,7 +68,7 @@ const less: StylePreprocessor = (source, map, options, load = require) => {
6668
let result: any
6769
let error: Error | null = null
6870
nodeLess.render(
69-
source,
71+
getSource(source, options.filename, options.additionalData),
7072
{ ...options, syncImport: true },
7173
(err: Error | null, output: any) => {
7274
error = err
@@ -117,6 +119,18 @@ const styl: StylePreprocessor = (source, map, options, load = require) => {
117119
}
118120
}
119121

122+
function getSource(
123+
source: string,
124+
filename: string,
125+
additionalData?: string | ((source: string, filename: string) => string)
126+
) {
127+
if (!additionalData) return source
128+
if (isFunction(additionalData)) {
129+
return additionalData(source, filename)
130+
}
131+
return additionalData + source
132+
}
133+
120134
export type PreprocessLang = 'less' | 'sass' | 'scss' | 'styl' | 'stylus'
121135

122136
export const processors: Record<PreprocessLang, StylePreprocessor> = {

0 commit comments

Comments
 (0)