feat(compiler-sfc): export dependencies for css and css preprocessors (#1278)

Author: underfin

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')
+    ])
+  })
+})

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

@@ -0,0 +1,3 @@
+div {
+  color: red;
+}

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

@@ -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"
   }
 }

packages/compiler-sfc/package.json

@@ -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<string, string>
+  dependencies: Set<string>
 }
 
 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
   }
 }
 

packages/compiler-sfc/src/compileStyle.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<PreprocessLang, StylePreprocessor> = {
   styl,
   stylus: styl
 }
+
+function getAbsolutePaths(relativePaths: string[], dirname: string): string[] {
+  return relativePaths.map(relativePath => path.join(dirname, relativePath))
+}

packages/compiler-sfc/src/stylePreprocessors.ts

@@ -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"