Rework Vite plugin to support lightningcss pre processor and fast rebuilds #14269

philipp-spiess · 2024-08-27T10:21:12Z

This PR reworks the Vite extension in order to supprt lightningcss as the pre-processor, enable faster rebuilds, and adds support for vite build --watch mode. To make this change possible, we've done two major changes to the extension that have caused the other changes.

1. Tailwind CSS is a preprocessor

We now run all of our modifications in enforce: 'pre'. This means that Tailwind CSS now gets the untransformed CSS files rather than the one already going through postcss or lightningcss. We do this because Tailwind CSS is a preprocessor at the same level as those tools and we do sometimes use the language in ways that creates problems when it's the input for other bundlers.

The correct solution here is to make Tailwind not depend on any other transformations. The main reason we were not using the enforce: 'pre' phase in Vite before was becuase we relied on the @import flattening of postcss so we now have to do this manually. @import flattening is now a concern that every Tailwind V4 client has to deal with so this might actually be something we want to inline into tailwindcss in the future.

2. A Vite config can have multiple Tailwind roots

This is something that we have not made very explicit in the previous iteration of the Vite plugin but we have to support multiple Tailwind roots in a single Vite workspace. A Tailwind root is a CSS file that is used to configure Tailwind. Technically, any CSS file can be the input for tailwindcss but you have to add certain rules (e.g. @import "tailwindcss";) to make the compiler do something.

A workspace can have multiple of these rules (e.g. by having different Tailwind configures for different sub-pages). With the addition of support for @source rules and JS config files, Tailwind roots become more complex and can have a custom list of dependencies (that is other JavaScript modules the compiler includes as part of these new rules). In order to only rebuild the roots we need to, we have to make this separation very clear.

integrations/utils.ts

philipp-spiess · 2024-08-27T14:58:30Z

packages/@tailwindcss-vite/package.json

@@ -31,13 +31,15 @@
    "@tailwindcss/node": "workspace:^",
    "@tailwindcss/oxide": "workspace:^",
    "lightningcss": "catalog:",
-    "postcss-load-config": "^6.0.1",
+    "postcss": "^8.4.41",


This is temporary until we start to resolve @import ourselves (at this point every client need this so we might as well)

packages/@tailwindcss-vite/src/index.ts

philipp-spiess · 2024-08-27T15:01:06Z

packages/@tailwindcss-vite/src/index.ts

        cssPlugins = config.plugins.filter((plugin) => {
          return allowedPlugins.includes(plugin.name)
        })
      },

-      // Append the postcss-fix-relative-paths plugin
-      async config(config) {


We no longer need this since we can just run our own at-import plugins

packages/@tailwindcss-vite/src/index.ts

philipp-spiess force-pushed the fix/vite-with-lightningcss-transform branch from fba8ae3 to 4551225 Compare August 27, 2024 14:41

philipp-spiess changed the title ~~Vite: Support lightningcss pre processor~~ Vite: Support lightningcss pre processor and simplify plugin Aug 27, 2024

philipp-spiess changed the base branch from next to feat/v4-config-files August 27, 2024 14:56

philipp-spiess force-pushed the fix/vite-with-lightningcss-transform branch from 4551225 to 43e5170 Compare August 27, 2024 14:56