diff --git a/packages/vite/src/node/__tests__/build.spec.ts b/packages/vite/src/node/__tests__/build.spec.ts index cc26b3a47f2347..64270c84843d29 100644 --- a/packages/vite/src/node/__tests__/build.spec.ts +++ b/packages/vite/src/node/__tests__/build.spec.ts @@ -1087,6 +1087,55 @@ test('chunkImportMap per environment with shared plugins', async () => { expect(entry.code).toContain(JSON.stringify(cssSpecifier.slice(1))) }) +test('cssMinify per environment with shared plugins', async () => { + const root = resolve(dirname, 'fixtures/shared-plugins/css-minify') + const builder = await createBuilder({ + root, + logLevel: 'warn', + environments: { + client: { + build: { + cssMinify: false, + write: false, + rolldownOptions: { + input: '/entry.js', + }, + }, + }, + custom: { + consumer: 'client', + build: { + write: false, + rolldownOptions: { + input: '/entry.js', + }, + }, + }, + }, + builder: { + sharedPlugins: true, + }, + }) + + const findCss = (output: RolldownOutput) => + ( + output.output.find( + (o): o is OutputAsset => + o.type === 'asset' && o.fileName.endsWith('.css'), + )!.source as string + ).trim() + + const client = (await builder.build( + builder.environments.client, + )) as RolldownOutput + const custom = (await builder.build( + builder.environments.custom, + )) as RolldownOutput + + expect(findCss(client)).toContain('\n') + expect(findCss(custom)).not.toContain('\n') +}) + test('chunkImportMap is emitted when emitAssets is false', async () => { const root = resolve(dirname, 'fixtures/shared-plugins/chunk-import-map') const builder = await createBuilder({ diff --git a/packages/vite/src/node/__tests__/fixtures/shared-plugins/css-minify/entry.js b/packages/vite/src/node/__tests__/fixtures/shared-plugins/css-minify/entry.js new file mode 100644 index 00000000000000..e958a54535ae7b --- /dev/null +++ b/packages/vite/src/node/__tests__/fixtures/shared-plugins/css-minify/entry.js @@ -0,0 +1,3 @@ +import './style.css' + +console.log('test') diff --git a/packages/vite/src/node/__tests__/fixtures/shared-plugins/css-minify/style.css b/packages/vite/src/node/__tests__/fixtures/shared-plugins/css-minify/style.css new file mode 100644 index 00000000000000..24184ab718a676 --- /dev/null +++ b/packages/vite/src/node/__tests__/fixtures/shared-plugins/css-minify/style.css @@ -0,0 +1,7 @@ +.foo { + color: red; +} + +.bar { + color: blue; +} diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index a758037d494d8b..69c6923f1c7db4 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -644,8 +644,13 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { code = modulesCode } else if (inlined) { let content = css - if (config.build.cssMinify) { - content = await minifyCSS(content, config, true, id) + if (this.environment.config.build.cssMinify) { + content = await minifyCSS( + content, + this.environment.config, + true, + id, + ) } code = `export default ${JSON.stringify(content)}` } else { @@ -839,7 +844,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { await urlEmitQueue.run(async () => Promise.all( urlEmitTasks.map(async (info) => { - info.content = await finalizeCss(info.content, config) + info.content = await finalizeCss( + info.content, + this.environment.config, + ) }), ), ) @@ -924,7 +932,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // wait for previous tasks as well chunkCSS = await codeSplitEmitQueue.run(async () => { - return finalizeCss(chunkCSS!, config) + return finalizeCss(chunkCSS!, this.environment.config) }) // emit corresponding css file @@ -952,7 +960,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // But because entry chunk can be imported by dynamic import, // we shouldn't remove the inlined CSS. (#10285) - chunkCSS = await finalizeCss(chunkCSS, config) + chunkCSS = await finalizeCss( + chunkCSS, + this.environment.config, + ) let cssString = JSON.stringify(chunkCSS) cssString = renderAssetUrlInJS( @@ -1060,7 +1071,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // Finally, if there's any extracted CSS, we emit the asset if (extractedCss) { hasEmitted = true - extractedCss = await finalizeCss(extractedCss, config) + extractedCss = await finalizeCss( + extractedCss, + this.environment.config, + ) this.emitFile({ name: getCssBundleName(), type: 'asset',