Apply non-Tailwind CSS transforms in Vite plugin (#14871)

philipp-spiess · thecrypticace · adamwathan · web-flow · commit 15fc7f455843 · 2024-11-07T16:26:18.000+01:00
Fixes: #14839 Fixes: #14796 This PR fixes an issue in the Vite extension where we previously only ran a small list of allow-listed plugins for the second stage transform in the build step. This caused some CSS features to unexpectedly not work in production builds (one such example is Vue's `:deep(...)` selector). To fix this, I changed the allow listed plugins that we do want to run to a block list to filter out some plugins we know we don't want to run (e.g. the Tailwind Vite plugin for example or some built-in Vite plugins that are not necessary). ## Test plan This PR adds a new integration test suite to test interop with a custom Vite transformer that looks like this: ```js { name: 'recolor', transform(code, id) { if (id.includes('.css')) { return code.replace(/red/g, 'blue') } }, } ``` I also validated that this does indeed fix the Vue `:deep(...)` selector related issue that we were seeing by copying the repro of #14839 into our playground: ![Screenshot 2024-11-05 at 13.35.26.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/0Y77ilPI2WoJfMLFiAEw/4e46ab61-4acf-461a-9e40-f7c9ec3c69b2.png) You can see in the screenshot above that the `:deep()` selector overwrites the scoped styles as expected in both the dev mode and the prod build (screenshotted). Furthermore I reproduced the issue reported in #14796 and was able to confirm that in a production build, the styling works as expected: <img width="517" alt="Screenshot 2024-11-06 at 14 26 50" src="https://github.com/user-attachments/assets/ade6fe38-be0d-4bd0-9a9a-67b6fec05ae0"> Lastly, I created a repository out of the biggest known-to-me Vite projects: [Astro, Nuxt, Remix, SolidStart, and SvelteKit](https://github.com/philipp-spiess/tailwind-playgrounds) and verified that both dev and prod builds show no issue and the candidate list is properly appended in each case. --------- Co-authored-by: Jordan Pittman <jordan@cryptica.me> Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `url(…)` containing special characters such as `;` or `{}` end up in one declaration ([#14879](https://github.com/tailwindlabs/tailwindcss/pull/14879))
 - Ensure adjacent rules are merged together after handling nesting when generating optimized CSS ([#14873](https://github.com/tailwindlabs/tailwindcss/pull/14873))
 - Rebase `url()` inside imported CSS files when using Vite ([#14877](https://github.com/tailwindlabs/tailwindcss/pull/14877))
+- Ensure that CSS transforms from other Vite plugins correctly work in full builds (e.g. `:deep()` in Vue) ([#14871](https://github.com/tailwindlabs/tailwindcss/pull/14871))
 - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830))
 - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838))
 - _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896))
diff --git a/integrations/vite/nuxt.test.ts b/integrations/vite/nuxt.test.ts
@@ -1,65 +1,74 @@
 import { expect } from 'vitest'
 import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
 
-test(
-  'dev mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "nuxt": "^3.13.1",
-            "tailwindcss": "workspace:^",
-            "vue": "latest"
-          }
+const SETUP = {
+  fs: {
+    'package.json': json`
+      {
+        "type": "module",
+        "dependencies": {
+          "@tailwindcss/vite": "workspace:^",
+          "nuxt": "^3.13.1",
+          "tailwindcss": "workspace:^",
+          "vue": "latest"
         }
-      `,
-      'nuxt.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
+      }
+    `,
+    'nuxt.config.ts': ts`
+      import tailwindcss from '@tailwindcss/vite'
 
-        // https://nuxt.com/docs/api/configuration/nuxt-config
-        export default defineNuxtConfig({
-          vite: {
-            plugins: [tailwindcss()],
-          },
+      // https://nuxt.com/docs/api/configuration/nuxt-config
+      export default defineNuxtConfig({
+        vite: {
+          plugins: [tailwindcss()],
+        },
 
-          css: ['~/assets/css/main.css'],
-          devtools: { enabled: true },
-          compatibilityDate: '2024-08-30',
-        })
-      `,
-      'app.vue': html`
+        css: ['~/assets/css/main.css'],
+        devtools: { enabled: true },
+        compatibilityDate: '2024-08-30',
+      })
+    `,
+    'app.vue': html`
         <template>
-          <div class="underline">Hello world!</div>
-        </template>
+        <div class="underline">Hello world!</div>
+      </template>
       `,
-      'assets/css/main.css': css`@import 'tailwindcss';`,
-    },
+    'assets/css/main.css': css`@import 'tailwindcss';`,
   },
-  async ({ fs, spawn, getFreePort }) => {
-    let port = await getFreePort()
-    await spawn(`pnpm nuxt dev --port ${port}`)
+}
+
+test('dev mode', SETUP, async ({ fs, spawn, getFreePort }) => {
+  let port = await getFreePort()
+  await spawn(`pnpm nuxt dev --port ${port}`)
 
-    await retryAssertion(async () => {
-      let css = await fetchStyles(port)
-      expect(css).toContain(candidate`underline`)
-    })
+  await retryAssertion(async () => {
+    let css = await fetchStyles(port)
+    expect(css).toContain(candidate`underline`)
+  })
 
-    await retryAssertion(async () => {
-      await fs.write(
-        'app.vue',
-        html`
+  await retryAssertion(async () => {
+    await fs.write(
+      'app.vue',
+      html`
           <template>
-            <div class="underline font-bold">Hello world!</div>
-          </template>
+          <div class="underline font-bold">Hello world!</div>
+        </template>
         `,
-      )
+    )
 
-      let css = await fetchStyles(port)
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(candidate`font-bold`)
-    })
-  },
-)
+    let css = await fetchStyles(port)
+    expect(css).toContain(candidate`underline`)
+    expect(css).toContain(candidate`font-bold`)
+  })
+})
+
+test('build', SETUP, async ({ spawn, getFreePort, exec }) => {
+  let port = await getFreePort()
+  await exec(`pnpm nuxt build`)
+  await spawn(`PORT=${port} pnpm nuxt preview`)
+
+  await retryAssertion(async () => {
+    let css = await fetchStyles(port)
+    expect(css).toContain(candidate`underline`)
+  })
+})
diff --git a/integrations/vite/other-transforms.test.ts b/integrations/vite/other-transforms.test.ts
@@ -0,0 +1,172 @@
+import dedent from 'dedent'
+import { describe, expect } from 'vitest'
+import { css, fetchStyles, html, retryAssertion, test, ts, txt } from '../utils'
+
+function createSetup(transformer: 'postcss' | 'lightningcss') {
+  return {
+    fs: {
+      'package.json': txt`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
+            "vite": "^5.3.5"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
+          build: { cssMinify: false },
+          plugins: [
+            tailwindcss(),
+            {
+              name: 'recolor',
+              transform(code, id) {
+                if (id.includes('.css')) {
+                  return code.replace(/red;/g, 'blue;')
+                }
+              },
+            },
+          ],
+        })
+      `,
+      'index.html': html`
+        <head>
+          <link rel="stylesheet" href="./src/index.css" />
+        </head>
+        <body>
+          <div class="foo [background-color:red]">Hello, world!</div>
+        </body>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/theme' theme(reference);
+        @import 'tailwindcss/utilities';
+
+        .foo {
+          color: red;
+        }
+      `,
+    },
+  }
+}
+
+for (let transformer of ['postcss', 'lightningcss'] as const) {
+  describe(transformer, () => {
+    test(`production build`, createSetup(transformer), async ({ fs, exec }) => {
+      await exec('pnpm vite build')
+
+      let files = await fs.glob('dist/**/*.css')
+      expect(files).toHaveLength(1)
+      let [filename] = files[0]
+
+      await fs.expectFileToContain(filename, [
+        css`
+          .foo {
+            color: blue;
+          }
+        `,
+        // Running the transforms on utilities generated by Tailwind might change in the future
+        dedent`
+          .\[background-color\:red\] {
+            background-color: blue;
+          }
+        `,
+      ])
+    })
+
+    test(`dev mode`, createSetup(transformer), async ({ spawn, getFreePort, fs }) => {
+      let port = await getFreePort()
+      await spawn(`pnpm vite dev --port ${port}`)
+
+      await retryAssertion(async () => {
+        let styles = await fetchStyles(port, '/index.html')
+        expect(styles).toContain(css`
+          .foo {
+            color: blue;
+          }
+        `)
+        // Running the transforms on utilities generated by Tailwind might change in the future
+        expect(styles).toContain(dedent`
+          .\[background-color\:red\] {
+            background-color: blue;
+          }
+        `)
+      })
+
+      await retryAssertion(async () => {
+        await fs.write(
+          'src/index.css',
+          css`
+            @import 'tailwindcss/theme' theme(reference);
+            @import 'tailwindcss/utilities';
+
+            .foo {
+              background-color: red;
+            }
+          `,
+        )
+
+        let styles = await fetchStyles(port)
+        expect(styles).toContain(css`
+          .foo {
+            background-color: blue;
+          }
+        `)
+      })
+    })
+
+    test('watch mode', createSetup(transformer), async ({ spawn, fs }) => {
+      await spawn(`pnpm vite build --watch`)
+
+      await retryAssertion(async () => {
+        let files = await fs.glob('dist/**/*.css')
+        expect(files).toHaveLength(1)
+        let [, styles] = files[0]
+
+        expect(styles).toContain(css`
+          .foo {
+            color: blue;
+          }
+        `)
+        // Running the transforms on utilities generated by Tailwind might change in the future
+        expect(styles).toContain(dedent`
+          .\[background-color\:red\] {
+            background-color: blue;
+          }
+        `)
+      })
+
+      await retryAssertion(async () => {
+        await fs.write(
+          'src/index.css',
+          css`
+            @import 'tailwindcss/theme' theme(reference);
+            @import 'tailwindcss/utilities';
+
+            .foo {
+              background-color: red;
+            }
+          `,
+        )
+
+        let files = await fs.glob('dist/**/*.css')
+        expect(files).toHaveLength(1)
+        let [, styles] = files[0]
+
+        expect(styles).toContain(css`
+          .foo {
+            background-color: blue;
+          }
+        `)
+      })
+    })
+  })
+}
diff --git a/integrations/vite/vue.test.ts b/integrations/vite/vue.test.ts
@@ -51,9 +51,15 @@ test(
             @apply text-red-500;
           }
         </style>
-
+        <style scoped>
+          @import 'tailwindcss/utilities';
+          @import 'tailwindcss/theme' theme(reference);
+          :deep(.bar) {
+            color: red;
+          }
+        </style>
         <template>
-          <div class="underline foo">Hello Vue!</div>
+          <div class="underline foo bar">Hello Vue!</div>
         </template>
       `,
     },
@@ -65,5 +71,6 @@ test(
     expect(files).toHaveLength(1)
 
     await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`foo`])
+    await fs.expectFileToContain(files[0][0], ['.bar{'])
   },
 )
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -15,11 +15,6 @@ export default function tailwindcss(): Plugin[] {
   let isSSR = false
   let minify = false
 
-  // A list of css plugins defined in the Vite config. We need to retain these
-  // so that we can rerun the right transformations in build mode where we have
-  // to manually rebuild the css file after the compilation is done.
-  let cssPlugins: readonly Plugin[] = []
-
   // The Vite extension has two types of sources for candidates:
   //
   // 1. The module graph: These are all modules that vite transforms and we want
@@ -109,8 +104,31 @@ export default function tailwindcss(): Plugin[] {
       },
     }
 
-    for (let plugin of cssPlugins) {
+    for (let plugin of config!.plugins) {
       if (!plugin.transform) continue
+
+      if (plugin.name.startsWith('@tailwindcss/')) {
+        // We do not run any Tailwind transforms anymore
+        continue
+      } else if (
+        plugin.name.startsWith('vite:') &&
+        // Apply the vite:css plugin to generated CSS for transformations like
+        // URL path rewriting and image inlining.
+        plugin.name !== 'vite:css' &&
+        // In build mode, since `renderStart` runs after all transformations, we
+        // need to also apply vite:css-post.
+        plugin.name !== 'vite:css-post' &&
+        // The vite:vue plugin handles CSS specific post-processing for Vue
+        plugin.name !== 'vite:vue'
+      ) {
+        continue
+      } else if (plugin.name === 'ssr-styles') {
+        // The Nuxt ssr-styles plugin emits styles from server-side rendered
+        // components, we can't run it in the `renderStart` phase so we're
+        // skipping it.
+        continue
+      }
+
       let transformHandler =
         'handler' in plugin.transform! ? plugin.transform.handler : plugin.transform!
 
@@ -147,20 +165,6 @@ export default function tailwindcss(): Plugin[] {
         config = _config
         minify = config.build.cssMinify !== false
         isSSR = config.build.ssr !== false && config.build.ssr !== undefined
-
-        let allowedPlugins = [
-          // Apply the vite:css plugin to generated CSS for transformations like
-          // URL path rewriting and image inlining.
-          'vite:css',
-
-          // In build mode, since renderChunk runs after all transformations, we
-          // need to also apply vite:css-post.
-          ...(config.command === 'build' ? ['vite:css-post'] : []),
-        ]
-
-        cssPlugins = config.plugins.filter((plugin) => {
-          return allowedPlugins.includes(plugin.name)
-        })
       },
 
       // Scan all non-CSS files for candidates
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
