Skip to content

Commit e41d831

Browse files
underfinunderfin
authored
feat(compiler-sfc): export dependencies for css and css preprocessors (#1278)
1 parent ecf872f commit e41d831

File tree

7 files changed

+145
-21
lines changed

7 files changed

+145
-21
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
/**
2+
* @jest-environment node
3+
*/
4+
15
import {
26
compileStyle,
37
compileStyleAsync,
48
SFCStyleCompileOptions
59
} from '../src/compileStyle'
610
import { mockWarn } from '@vue/shared'
11+
import path from 'path'
712

813
describe('SFC scoped CSS', () => {
914
mockWarn()
@@ -318,3 +323,20 @@ describe('SFC CSS modules', () => {
318323
expect(result.modules!.bazQux).toBeUndefined()
319324
})
320325
})
326+
327+
describe('SFC style preprocessors', () => {
328+
test('scss @import', () => {
329+
const res = compileStyle({
330+
source: `
331+
@import "./import.scss";
332+
`,
333+
filename: path.resolve(__dirname, './fixture/test.scss'),
334+
id: '',
335+
preprocessLang: 'scss'
336+
})
337+
338+
expect([...res.dependencies]).toStrictEqual([
339+
path.join(__dirname, './fixture/import.scss')
340+
])
341+
})
342+
})

‎packages/compiler-sfc/__tests__/fixture/import.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
div {
2+
color: red;
3+
}

‎packages/compiler-sfc/__tests__/fixture/test.scss‎

Whitespace-only changes.

‎packages/compiler-sfc/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"devDependencies": {
5555
"@types/consolidate": "^0.14.0",
5656
"@types/lru-cache": "^5.1.0",
57-
"pug": "^2.0.4"
57+
"pug": "^2.0.4",
58+
"sass": "^1.26.9"
5859
}
5960
}

‎packages/compiler-sfc/src/compileStyle.ts‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import postcss, { ProcessOptions, LazyResult, Result, ResultMap } from 'postcss'
1+
import postcss, {
2+
ProcessOptions,
3+
LazyResult,
4+
Result,
5+
ResultMap,
6+
ResultMessage
7+
} from 'postcss'
28
import trimPlugin from './stylePluginTrim'
39
import scopedPlugin from './stylePluginScoped'
410
import {
@@ -48,6 +54,7 @@ export interface SFCStyleCompileResults {
4854
rawResult: LazyResult | Result | undefined
4955
errors: Error[]
5056
modules?: Record<string, string>
57+
dependencies: Set<string>
5158
}
5259

5360
export function compileStyle(
@@ -132,12 +139,28 @@ export function doCompileStyle(
132139
let result: LazyResult | undefined
133140
let code: string | undefined
134141
let outMap: ResultMap | undefined
142+
// stylus output include plain css. so need remove the repeat item
143+
const dependencies = new Set(
144+
preProcessedSource ? preProcessedSource.dependencies : []
145+
)
146+
// sass has filename self when provided filename option
147+
dependencies.delete(filename)
135148

136149
const errors: Error[] = []
137150
if (preProcessedSource && preProcessedSource.errors.length) {
138151
errors.push(...preProcessedSource.errors)
139152
}
140153

154+
const recordPlainCssDependencies = (messages: ResultMessage[]) => {
155+
messages.forEach(msg => {
156+
if (msg.type === 'dependency') {
157+
// postcss output path is absolute position path
158+
dependencies.add(msg.file)
159+
}
160+
})
161+
return dependencies
162+
}
163+
141164
try {
142165
result = postcss(plugins).process(source, postCSSOptions)
143166

@@ -149,16 +172,19 @@ export function doCompileStyle(
149172
map: result.map && (result.map.toJSON() as any),
150173
errors,
151174
modules: cssModules,
152-
rawResult: result
175+
rawResult: result,
176+
dependencies: recordPlainCssDependencies(result.messages)
153177
}))
154178
.catch(error => ({
155179
code: '',
156180
map: undefined,
157181
errors: [...errors, error],
158-
rawResult: undefined
182+
rawResult: undefined,
183+
dependencies
159184
}))
160185
}
161186

187+
recordPlainCssDependencies(result.messages)
162188
// force synchronous transform (we know we only have sync plugins)
163189
code = result.css
164190
outMap = result.map
@@ -170,7 +196,8 @@ export function doCompileStyle(
170196
code: code || ``,
171197
map: outMap && (outMap.toJSON() as any),
172198
errors,
173-
rawResult: result
199+
rawResult: result,
200+
dependencies
174201
}
175202
}
176203

‎packages/compiler-sfc/src/stylePreprocessors.ts‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import merge from 'merge-source-map'
2+
import path from 'path'
23

34
export interface StylePreprocessor {
45
render(
@@ -13,6 +14,7 @@ export interface StylePreprocessorResults {
1314
code: string
1415
map?: object
1516
errors: Error[]
17+
dependencies: string[]
1618
}
1719

1820
// .scss/.sass processor
@@ -29,18 +31,20 @@ const scss: StylePreprocessor = {
2931

3032
try {
3133
const result = nodeSass.renderSync(finalOptions)
32-
34+
// sass output path is position path
35+
const dependencies = result.stats.includedFiles
3336
if (map) {
3437
return {
3538
code: result.css.toString(),
3639
map: merge(map, JSON.parse(result.map.toString())),
37-
errors: []
40+
errors: [],
41+
dependencies
3842
}
3943
}
4044

41-
return { code: result.css.toString(), errors: [] }
45+
return { code: result.css.toString(), errors: [], dependencies }
4246
} catch (e) {
43-
return { code: '', errors: [e] }
47+
return { code: '', errors: [e], dependencies: [] }
4448
}
4549
}
4650
}
@@ -75,17 +79,26 @@ const less: StylePreprocessor = {
7579
}
7680
)
7781

78-
if (error) return { code: '', errors: [error] }
79-
82+
if (error) return { code: '', errors: [error], dependencies: [] }
83+
// less output path is relative path
84+
const dependencies = getAbsolutePaths(
85+
result.imports,
86+
path.dirname(options.fileName)
87+
)
8088
if (map) {
8189
return {
8290
code: result.css.toString(),
8391
map: merge(map, result.map),
84-
errors: []
92+
errors: [],
93+
dependencies: dependencies
8594
}
8695
}
8796

88-
return { code: result.css.toString(), errors: [] }
97+
return {
98+
code: result.css.toString(),
99+
errors: [],
100+
dependencies: dependencies
101+
}
89102
}
90103
}
91104

@@ -99,17 +112,23 @@ const styl: StylePreprocessor = {
99112
if (map) ref.set('sourcemap', { inline: false, comment: false })
100113

101114
const result = ref.render()
115+
// stylus output path is relative path
116+
const dependencies = getAbsolutePaths(
117+
ref.deps(),
118+
path.dirname(options.fileName)
119+
)
102120
if (map) {
103121
return {
104122
code: result,
105123
map: merge(map, ref.sourcemap),
106-
errors: []
124+
errors: [],
125+
dependencies
107126
}
108127
}
109128

110-
return { code: result, errors: [] }
129+
return { code: result, errors: [], dependencies }
111130
} catch (e) {
112-
return { code: '', errors: [e] }
131+
return { code: '', errors: [e], dependencies: [] }
113132
}
114133
}
115134
}
@@ -123,3 +142,7 @@ export const processors: Record<PreprocessLang, StylePreprocessor> = {
123142
styl,
124143
stylus: styl
125144
}
145+
146+
function getAbsolutePaths(relativePaths: string[], dirname: string): string[] {
147+
return relativePaths.map(relativePath => path.join(dirname, relativePath))
148+
}

‎yarn.lock‎

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1103,7 +1103,7 @@ anymatch@^2.0.0:
11031103
micromatch "^3.1.4"
11041104
normalize-path "^2.1.1"
11051105

1106-
anymatch@^3.0.3:
1106+
anymatch@^3.0.3, anymatch@~3.1.1:
11071107
version "3.1.1"
11081108
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
11091109
integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
@@ -1356,6 +1356,11 @@ big.js@^5.2.2:
13561356
resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
13571357
integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
13581358

1359+
binary-extensions@^2.0.0:
1360+
version "2.1.0"
1361+
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
1362+
integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
1363+
13591364
bl@~0.8.1:
13601365
version "0.8.2"
13611366
resolved "https://registry.yarnpkg.com/bl/-/bl-0.8.2.tgz#c9b6bca08d1bc2ea00fc8afb4f1a5fd1e1c66e4e"
@@ -1410,7 +1415,7 @@ braces@^2.3.1:
14101415
split-string "^3.0.2"
14111416
to-regex "^3.0.1"
14121417

1413-
braces@^3.0.1:
1418+
braces@^3.0.1, braces@~3.0.2:
14141419
version "3.0.2"
14151420
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
14161421
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -1676,6 +1681,21 @@ character-parser@^2.1.1:
16761681
dependencies:
16771682
is-regex "^1.0.3"
16781683

1684+
"chokidar@>=2.0.0 <4.0.0":
1685+
version "3.4.1"
1686+
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1"
1687+
integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g==
1688+
dependencies:
1689+
anymatch "~3.1.1"
1690+
braces "~3.0.2"
1691+
glob-parent "~5.1.0"
1692+
is-binary-path "~2.1.0"
1693+
is-glob "~4.0.1"
1694+
normalize-path "~3.0.0"
1695+
readdirp "~3.4.0"
1696+
optionalDependencies:
1697+
fsevents "~2.1.2"
1698+
16791699
ci-info@^1.5.0:
16801700
version "1.5.1"
16811701
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.5.1.tgz#17e8eb5de6f8b2b6038f0cbb714d410bfa9f3030"
@@ -3118,6 +3138,13 @@ glob-parent@^5.0.0:
31183138
dependencies:
31193139
is-glob "^4.0.1"
31203140

3141+
glob-parent@~5.1.0:
3142+
version "5.1.1"
3143+
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
3144+
integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
3145+
dependencies:
3146+
is-glob "^4.0.1"
3147+
31213148
glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
31223149
version "7.1.6"
31233150
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -3443,6 +3470,13 @@ is-arrayish@^0.2.1:
34433470
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
34443471
integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
34453472

3473+
is-binary-path@~2.1.0:
3474+
version "2.1.0"
3475+
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
3476+
integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
3477+
dependencies:
3478+
binary-extensions "^2.0.0"
3479+
34463480
is-buffer@^1.1.5:
34473481
version "1.1.6"
34483482
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3558,7 +3592,7 @@ is-generator-fn@^2.0.0:
35583592
resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
35593593
integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
35603594

3561-
is-glob@^4.0.0, is-glob@^4.0.1:
3595+
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
35623596
version "4.0.1"
35633597
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
35643598
integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
@@ -5038,7 +5072,7 @@ normalize-path@^2.1.1:
50385072
dependencies:
50395073
remove-trailing-separator "^1.0.1"
50405074

5041-
normalize-path@^3.0.0:
5075+
normalize-path@^3.0.0, normalize-path@~3.0.0:
50425076
version "3.0.0"
50435077
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
50445078
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -5405,7 +5439,7 @@ performance-now@^2.1.0:
54055439
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
54065440
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
54075441

5408-
picomatch@^2.0.4, picomatch@^2.2.2:
5442+
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
54095443
version "2.2.2"
54105444
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
54115445
integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -5930,6 +5964,13 @@ readable-stream@~1.0.26, readable-stream@~1.0.26-4:
59305964
isarray "0.0.1"
59315965
string_decoder "~0.10.x"
59325966

5967+
readdirp@~3.4.0:
5968+
version "3.4.0"
5969+
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
5970+
integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
5971+
dependencies:
5972+
picomatch "^2.2.1"
5973+
59335974
rechoir@^0.6.2:
59345975
version "0.6.2"
59355976
resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -6259,6 +6300,13 @@ sane@^4.0.3:
62596300
minimist "^1.1.1"
62606301
walker "~1.0.5"
62616302

6303+
sass@^1.26.9:
6304+
version "1.26.10"
6305+
resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.10.tgz#851d126021cdc93decbf201d1eca2a20ee434760"
6306+
integrity sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==
6307+
dependencies:
6308+
chokidar ">=2.0.0 <4.0.0"
6309+
62626310
saxes@^5.0.0:
62636311
version "5.0.1"
62646312
resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"

0 commit comments

Comments
 (0)