Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Use a separate cached PostCSS config for each CSS plugin instantiation #3985

Closed
wants to merge 4 commits into from
Closed

fix: Use a separate cached PostCSS config for each CSS plugin instantiation #3985

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1442412
fix: Clear the cached PostCSS config when CSS plugin is instantiated
fwouts Jun 27, 2021
6b69d9c
fix: enable multiple parallel Vite servers with different PostCSS con…
fwouts Jun 27, 2021
545da9d
fix: don't reset the cache in buildStart (too frequent?)
fwouts Jun 27, 2021
a279e73
fix: remove missed assignment because of @ts-ignore
fwouts Jun 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 9 additions & 10 deletions packages/vite/src/node/plugins/css.ts
View file
Open in desktop
Expand Up @@ -120,6 +120,7 @@ export const chunkToEmittedCssFileMap = new WeakMap<
export function cssPlugin(config: ResolvedConfig): Plugin {
let server: ViteDevServer
let moduleCache: Map<string, Record<string, string>>
let cachedPostcssConfig: PostCSSConfigResult | null | undefined

const resolveUrl = config.createResolver({
preferRelative: true,
Expand Down Expand Up @@ -157,6 +158,9 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
return url
}

if (cachedPostcssConfig === undefined) {
cachedPostcssConfig = await resolvePostcssConfig(config)
}
const {
code: css,
modules,
Expand All @@ -165,6 +169,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
id,
raw,
config,
cachedPostcssConfig,
urlReplacer,
atImportResolvers,
server
Expand Down Expand Up @@ -520,6 +525,7 @@ async function compileCSS(
id: string,
code: string,
config: ResolvedConfig,
postcssConfig: PostCSSConfigResult | null,
urlReplacer: CssUrlReplacer,
atImportResolvers: CSSAtImportResolvers,
server?: ViteDevServer
Expand All @@ -536,7 +542,6 @@ async function compileCSS(
// crawl them in order to register watch dependencies.
const needInlineImport = code.includes('@import')
const hasUrl = cssUrlRE.test(code) || cssImageSetRE.test(code)
const postcssConfig = await resolvePostcssConfig(config)
const lang = id.match(cssLangRE)?.[1] as CssLang | undefined

// 1. plain css that needs no processing
Expand Down Expand Up @@ -721,15 +726,9 @@ interface PostCSSConfigResult {
plugins: Postcss.Plugin[]
}

let cachedPostcssConfig: PostCSSConfigResult | null | undefined

async function resolvePostcssConfig(
config: ResolvedConfig
): Promise<PostCSSConfigResult | null> {
if (cachedPostcssConfig !== undefined) {
return cachedPostcssConfig
}

// inline postcss config via vite config
const inlineOptions = config.css?.postcss
if (isObject(inlineOptions)) {
Expand All @@ -738,19 +737,19 @@ async function resolvePostcssConfig(
plugins: inlineOptions.plugins || []
}
delete result.options.plugins
return (cachedPostcssConfig = result)
return result
}

try {
const searchPath =
typeof inlineOptions === 'string' ? inlineOptions : config.root
// @ts-ignore
return (cachedPostcssConfig = await postcssrc({}, searchPath))
return await postcssrc({}, searchPath)
} catch (e) {
if (!/No PostCSS Config found/.test(e.message)) {
throw e
}
return (cachedPostcssConfig = null)
return null
}
}

Expand Down