fix(css): don't re-run lightningcss visitor during minify (fix #23146)

packages/vite/src/node/plugins/css.ts

@@ -2323,10 +2323,13 @@ async function minifyCSS(
     const { code, warnings } = (await importLightningCSS()).transform({
       ...config.css.lightningcss,
       targets: convertTargets(config.build.cssTarget),
-      cssModules: undefined,
       filename,
       code: Buffer.from(css),
       minify: true,
+      // the transforms should run in `compileLightningCSS` step
+      cssModules: undefined,
+      visitor: undefined,
+      customAtRules: undefined,
     })
 
     for (const warning of warnings) {

playground/css-lightningcss/__tests__/css-lightningcss.spec.ts

@@ -7,6 +7,7 @@ import {
   isBuild,
   isBundledDev,
   page,
+  readFile,
   viteTestUrl,
 } from '~utils'
 
@@ -78,6 +79,10 @@ test.runIf(isBuild)('minify css', async () => {
   expect(cssFile).not.toMatch('#ffff00b3')
 })
 
+test.runIf(isBuild)('does not run the visitor again during minify', () => {
+  expect(readFile('dist/media-query-visits.txt')).toBe('2')
+})
+
 test('css with external url', async () => {
   const css = await page.$('.external')
   expect(await getBg(css)).toMatch('url("https://vite.dev/logo.svg")')

playground/css-lightningcss/minify.css

@@ -1,3 +1,15 @@
 .test-minify {
   color: rgba(255, 255, 0, 0.7);
 }
+
+@media (min-width: 100px) {
+  .test-media-query-1 {
+    color: red;
+  }
+}
+
+@media (min-width: 200px) {
+  .test-media-query-2 {
+    color: blue;
+  }
+}

playground/css-lightningcss/vite.config.js

@@ -14,4 +14,35 @@ export default defineConfig({
     cssTarget: ['chrome61'],
     cssMinify: 'lightningcss',
   },
+  plugins: [testLightningcssVisitorDuringMinify()],
 })
+
+function testLightningcssVisitorDuringMinify() {
+  let mediaQueryVisits = 0
+
+  return {
+    name: 'test-lightningcss-visitor-during-minify',
+    apply: 'build',
+    config() {
+      return {
+        css: {
+          lightningcss: {
+            visitor: {
+              MediaQuery(query) {
+                mediaQueryVisits++
+                return query
+              },
+            },
+          },
+        },
+      }
+    },
+    generateBundle() {
+      this.emitFile({
+        type: 'asset',
+        fileName: 'media-query-visits.txt',
+        source: String(mediaQueryVisits),
+      })
+    },
+  }
+}