diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 3b96f3f923f21e..05409081a6af3e 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -118,8 +118,7 @@ export const chunkToEmittedCssFileMap = new WeakMap< */ export function cssPlugin(config: ResolvedConfig): Plugin { let server: ViteDevServer - const moduleCache = new Map>() - cssModulesCache.set(config, moduleCache) + let moduleCache: Map> const resolveUrl = config.createResolver({ preferRelative: true, @@ -135,6 +134,12 @@ export function cssPlugin(config: ResolvedConfig): Plugin { server = _server }, + buildStart() { + // Ensure a new cache for every build (i.e. rebuilding in watch mode) + moduleCache = new Map>() + cssModulesCache.set(config, moduleCache) + }, + async transform(raw, id) { if (!cssLangRE.test(id) || commonjsProxyRE.test(id)) { return @@ -218,24 +223,30 @@ export function cssPlugin(config: ResolvedConfig): Plugin { * Plugin applied after user plugins */ export function cssPostPlugin(config: ResolvedConfig): Plugin { - const styles = new Map() - const pureCssChunks = new Set() - const moduleCache = cssModulesCache.get(config)! + let styles: Map + let pureCssChunks: Set // when there are multiple rollup outputs and extracting CSS, only emit once, // since output formats have no effect on the generated CSS. - const outputToExtractedCSSMap = new Map() + let outputToExtractedCSSMap: Map let hasEmitted = false return { name: 'vite:css-post', + buildStart() { + // Ensure new caches for every build (i.e. rebuilding in watch mode) + styles = new Map() + pureCssChunks = new Set() + outputToExtractedCSSMap = new Map() + }, + transform(css, id, ssr) { if (!cssLangRE.test(id) || commonjsProxyRE.test(id)) { return } - const modules = moduleCache.get(id) + const modules = cssModulesCache.get(config)!.get(id) const modulesCode = modules && dataToEsm(modules, { namedExports: true, preferConst: true })