feat(compiler-sfc): upgrade to postcss 8 (#2710)

vuejs · Feb 4, 2021 · 49bc2e4 · 49bc2e4
1 parent a89d985
commit 49bc2e4
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 247 deletions.
diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json
@@ -46,8 +46,8 @@
  "lru-cache": "^5.1.1",
  "magic-string": "^0.25.7",
  "merge-source-map": "^1.1.0",
- "postcss": "^7.0.32",
- "postcss-modules": "^3.2.2",
+ "postcss": "^8.1.10",
+ "postcss-modules": "^4.0.0",
  "postcss-selector-parser": "^6.0.4",
  "source-map": "^0.6.1"
  },

diff --git a/packages/compiler-sfc/src/compileStyle.ts b/packages/compiler-sfc/src/compileStyle.ts
@@ -1,9 +1,9 @@
 import postcss, {
  ProcessOptions,
- LazyResult,
  Result,
- ResultMap,
- ResultMessage
+ SourceMap,
+ Message,
+ LazyResult
 } from 'postcss'
 import trimPlugin from './stylePluginTrim'
 import scopedPlugin from './stylePluginScoped'
@@ -35,28 +35,33 @@ export interface SFCStyleCompileOptions {
  map?: RawSourceMap
 }
 
+/**
+ * Aligns with postcss-modules
+ * https://github.com/css-modules/postcss-modules
+ */
+export interface CSSModulesOptions {
+ scopeBehaviour?: 'global' | 'local'
+ generateScopedName?:
+ | string
+ | ((name: string, filename: string, css: string) => string)
+ hashPrefix?: string
+ localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
+ exportGlobals?: boolean
+ globalModulePaths?: string[]
+}
+
 export interface SFCAsyncStyleCompileOptions extends SFCStyleCompileOptions {
  isAsync?: boolean
  // css modules support, note this requires async so that we can get the
  // resulting json
  modules?: boolean
- // maps to postcss-modules options
- // https://github.com/css-modules/postcss-modules
- modulesOptions?: {
- scopeBehaviour?: 'global' | 'local'
- globalModulePaths?: string[]
- generateScopedName?:
- | string
- | ((name: string, filename: string, css: string) => string)
- hashPrefix?: string
- localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
- }
+ modulesOptions?: CSSModulesOptions
 }
 
 export interface SFCStyleCompileResults {
  code: string
  map: RawSourceMap | undefined
- rawResult: LazyResult | Result | undefined
+ rawResult: Result | LazyResult | undefined
  errors: Error[]
  modules?: Record<string, string>
  dependencies: Set<string>
@@ -149,7 +154,7 @@ export function doCompileStyle(
 
  let result: LazyResult | undefined
  let code: string | undefined
- let outMap: ResultMap | undefined
+ let outMap: SourceMap | undefined
  // stylus output include plain css. so need remove the repeat item
  const dependencies = new Set(
  preProcessedSource ? preProcessedSource.dependencies : []
@@ -162,7 +167,7 @@ export function doCompileStyle(
  errors.push(...preProcessedSource.errors)
  }
 
- const recordPlainCssDependencies = (messages: ResultMessage[]) => {
+ const recordPlainCssDependencies = (messages: Message[]) => {
  messages.forEach(msg => {
  if (msg.type === 'dependency') {
  // postcss output path is absolute position path
@@ -226,7 +231,7 @@ function preprocess(
 
  return preprocessor(
  options.source,
- options.map,
+ options.inMap || options.map,
  {
  filename: options.filename,
  ...options.preprocessOptions

diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts
@@ -8,7 +8,7 @@ import {
  BindingMetadata
 } from '@vue/compiler-dom'
 import { SFCDescriptor } from './parse'
-import postcss, { Root } from 'postcss'
+import { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
 
 export const CSS_VARS_HELPER = `useCssVars`
@@ -49,20 +49,21 @@ export interface CssVarsPluginOptions {
  isProd: boolean
 }
 
-export const cssVarsPlugin = postcss.plugin<CssVarsPluginOptions>(
- 'vue-scoped',
- opts => (root: Root) => {
- const { id, isProd } = opts!
- root.walkDecls(decl => {
+export const cssVarsPlugin: PluginCreator<CssVarsPluginOptions> = opts => {
+ const { id, isProd } = opts!
+ return {
+ postcssPlugin: 'vue-sfc-vars',
+ Declaration(decl) {
  // rewrite CSS variables
  if (cssVarRE.test(decl.value)) {
  decl.value = decl.value.replace(cssVarRE, (_, $1, $2, $3) => {
  return `var(--${genVarName(id, $1 || $2 || $3, isProd)})`
  })
  }
- })
+ }
  }
-)
+}
+cssVarsPlugin.postcss = true
 
 export function genCssVarsCode(
  vars: string[],