diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 94443f197c6..328ac9a9811 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -1,9 +1,14 @@ +/** + * @jest-environment node + */ + import { compileStyle, compileStyleAsync, SFCStyleCompileOptions } from '../src/compileStyle' import { mockWarn } from '@vue/shared' +import path from 'path' describe('SFC scoped CSS', () => { mockWarn() @@ -318,3 +323,20 @@ describe('SFC CSS modules', () => { expect(result.modules!.bazQux).toBeUndefined() }) }) + +describe('SFC style preprocessors', () => { + test('scss @import', () => { + const res = compileStyle({ + source: ` + @import "./import.scss"; + `, + filename: path.resolve(__dirname, './fixture/test.scss'), + id: '', + preprocessLang: 'scss' + }) + + expect([...res.dependencies]).toStrictEqual([ + path.join(__dirname, './fixture/import.scss') + ]) + }) +}) diff --git a/packages/compiler-sfc/__tests__/fixture/import.scss b/packages/compiler-sfc/__tests__/fixture/import.scss new file mode 100644 index 00000000000..538fa56f4ac --- /dev/null +++ b/packages/compiler-sfc/__tests__/fixture/import.scss @@ -0,0 +1,3 @@ +div { + color: red; +} diff --git a/packages/compiler-sfc/__tests__/fixture/test.scss b/packages/compiler-sfc/__tests__/fixture/test.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json index 5ebe7475d63..83cc55c82c2 100644 --- a/packages/compiler-sfc/package.json +++ b/packages/compiler-sfc/package.json @@ -54,6 +54,7 @@ "devDependencies": { "@types/consolidate": "^0.14.0", "@types/lru-cache": "^5.1.0", - "pug": "^2.0.4" + "pug": "^2.0.4", + "sass": "^1.26.9" } } diff --git a/packages/compiler-sfc/src/compileStyle.ts b/packages/compiler-sfc/src/compileStyle.ts index eab0456b652..60ecffc75ca 100644 --- a/packages/compiler-sfc/src/compileStyle.ts +++ b/packages/compiler-sfc/src/compileStyle.ts @@ -1,4 +1,10 @@ -import postcss, { ProcessOptions, LazyResult, Result, ResultMap } from 'postcss' +import postcss, { + ProcessOptions, + LazyResult, + Result, + ResultMap, + ResultMessage +} from 'postcss' import trimPlugin from './stylePluginTrim' import scopedPlugin from './stylePluginScoped' import { @@ -48,6 +54,7 @@ export interface SFCStyleCompileResults { rawResult: LazyResult | Result | undefined errors: Error[] modules?: Record + dependencies: Set } export function compileStyle( @@ -132,12 +139,28 @@ export function doCompileStyle( let result: LazyResult | undefined let code: string | undefined let outMap: ResultMap | undefined + // stylus output include plain css. so need remove the repeat item + const dependencies = new Set( + preProcessedSource ? preProcessedSource.dependencies : [] + ) + // sass has filename self when provided filename option + dependencies.delete(filename) const errors: Error[] = [] if (preProcessedSource && preProcessedSource.errors.length) { errors.push(...preProcessedSource.errors) } + const recordPlainCssDependencies = (messages: ResultMessage[]) => { + messages.forEach(msg => { + if (msg.type === 'dependency') { + // postcss output path is absolute position path + dependencies.add(msg.file) + } + }) + return dependencies + } + try { result = postcss(plugins).process(source, postCSSOptions) @@ -149,16 +172,19 @@ export function doCompileStyle( map: result.map && (result.map.toJSON() as any), errors, modules: cssModules, - rawResult: result + rawResult: result, + dependencies: recordPlainCssDependencies(result.messages) })) .catch(error => ({ code: '', map: undefined, errors: [...errors, error], - rawResult: undefined + rawResult: undefined, + dependencies })) } + recordPlainCssDependencies(result.messages) // force synchronous transform (we know we only have sync plugins) code = result.css outMap = result.map @@ -170,7 +196,8 @@ export function doCompileStyle( code: code || ``, map: outMap && (outMap.toJSON() as any), errors, - rawResult: result + rawResult: result, + dependencies } } diff --git a/packages/compiler-sfc/src/stylePreprocessors.ts b/packages/compiler-sfc/src/stylePreprocessors.ts index c52910d7cd2..13e9f9769fc 100644 --- a/packages/compiler-sfc/src/stylePreprocessors.ts +++ b/packages/compiler-sfc/src/stylePreprocessors.ts @@ -1,4 +1,5 @@ import merge from 'merge-source-map' +import path from 'path' export interface StylePreprocessor { render( @@ -13,6 +14,7 @@ export interface StylePreprocessorResults { code: string map?: object errors: Error[] + dependencies: string[] } // .scss/.sass processor @@ -29,18 +31,20 @@ const scss: StylePreprocessor = { 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: [] + errors: [], + dependencies } } - return { code: result.css.toString(), errors: [] } + return { code: result.css.toString(), errors: [], dependencies } } catch (e) { - return { code: '', errors: [e] } + return { code: '', errors: [e], dependencies: [] } } } } @@ -75,17 +79,26 @@ const less: StylePreprocessor = { } ) - if (error) return { code: '', errors: [error] } - + 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: [] + errors: [], + dependencies: dependencies } } - return { code: result.css.toString(), errors: [] } + return { + code: result.css.toString(), + errors: [], + dependencies: dependencies + } } } @@ -99,17 +112,23 @@ const styl: StylePreprocessor = { 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: [] + errors: [], + dependencies } } - return { code: result, errors: [] } + return { code: result, errors: [], dependencies } } catch (e) { - return { code: '', errors: [e] } + return { code: '', errors: [e], dependencies: [] } } } } @@ -123,3 +142,7 @@ export const processors: Record = { styl, stylus: styl } + +function getAbsolutePaths(relativePaths: string[], dirname: string): string[] { + return relativePaths.map(relativePath => path.join(dirname, relativePath)) +} diff --git a/yarn.lock b/yarn.lock index 3214b2ca7d1..08d2f3fc76d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1103,7 +1103,7 @@ anymatch@^2.0.0: micromatch "^3.1.4" normalize-path "^2.1.1" -anymatch@^3.0.3: +anymatch@^3.0.3, anymatch@~3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142" integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg== @@ -1356,6 +1356,11 @@ big.js@^5.2.2: resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== +binary-extensions@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9" + integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ== + bl@~0.8.1: version "0.8.2" resolved "https://registry.yarnpkg.com/bl/-/bl-0.8.2.tgz#c9b6bca08d1bc2ea00fc8afb4f1a5fd1e1c66e4e" @@ -1410,7 +1415,7 @@ braces@^2.3.1: split-string "^3.0.2" to-regex "^3.0.1" -braces@^3.0.1: +braces@^3.0.1, braces@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -1676,6 +1681,21 @@ character-parser@^2.1.1: dependencies: is-regex "^1.0.3" +"chokidar@>=2.0.0 <4.0.0": + version "3.4.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1" + integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.4.0" + optionalDependencies: + fsevents "~2.1.2" + ci-info@^1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.5.1.tgz#17e8eb5de6f8b2b6038f0cbb714d410bfa9f3030" @@ -3118,6 +3138,13 @@ glob-parent@^5.0.0: dependencies: is-glob "^4.0.1" +glob-parent@~5.1.0: + version "5.1.1" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229" + integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ== + dependencies: + is-glob "^4.0.1" + glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.1.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" @@ -3443,6 +3470,13 @@ is-arrayish@^0.2.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-buffer@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" @@ -3558,7 +3592,7 @@ is-generator-fn@^2.0.0: resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118" integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ== -is-glob@^4.0.0, is-glob@^4.0.1: +is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc" integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg== @@ -5038,7 +5072,7 @@ normalize-path@^2.1.1: dependencies: remove-trailing-separator "^1.0.1" -normalize-path@^3.0.0: +normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== @@ -5405,7 +5439,7 @@ performance-now@^2.1.0: resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= -picomatch@^2.0.4, picomatch@^2.2.2: +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== @@ -5930,6 +5964,13 @@ readable-stream@~1.0.26, readable-stream@~1.0.26-4: isarray "0.0.1" string_decoder "~0.10.x" +readdirp@~3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada" + integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ== + dependencies: + picomatch "^2.2.1" + rechoir@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384" @@ -6259,6 +6300,13 @@ sane@^4.0.3: minimist "^1.1.1" walker "~1.0.5" +sass@^1.26.9: + version "1.26.10" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.10.tgz#851d126021cdc93decbf201d1eca2a20ee434760" + integrity sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw== + dependencies: + chokidar ">=2.0.0 <4.0.0" + saxes@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"