No description
8538ad859c
This PR fixes an issue where an `@config` was injected in a strange location if you have multiple CSS files with Tailwind directives. Let's say you have this setup: ```css /* ./src/index.css */ @import "./tailwind-setup.css"; /* ./src/tailwind-setup.css */ @import "./base.css"; @import "./components.css"; @import "./utilities.css"; /* ./src/base.css */ @tailwind base; /* ./src/components.css */ @tailwind components; /* ./src/utilities.css */ @tailwind utilities; ``` In this case, `base.css`, `components.css`, and `utilities.css` are all considered Tailwind roots because they contain Tailwind directives or imports. Since there are multiple roots, the nearest common ancestor should become the tailwind root (where `@config` is injected). In this case, the nearest common ancestor is `tailwind-setup.css` (not `index.css` because that's further away). Before this change, we find the common ancestor between `base.css` and `components.css` which would be `index.css` instead of `tailwind-setup.css`. In a next iteration, we compare `index.css` with `utilities.css` and find that there is no common ancestor (because the `index.css` file has no parents). This resulted in the `@config` being injected in `index.css` and in `utilities.css`. Continuing with the rest of the migrations, we migrate the `index.css`'s `@config` away, but we didn't migrate the `@config` from `utilities.css`. With this PR, we don't even have the `@config` in the `utilities.css` file anymore. Test plan --- 1. Added an integration test with a non-migrateable config file to ensure that the `@config` is injected in the correct file. 2. Added an integration test with a migrateable config file to ensure that the CSS config is injected in the correct file. h/t @philipp-spiess 3. Ran the upgrade on the https://commit.tailwindui.com project and ensured that 1. The `@config` does not exist in the `utilities.css` file (this was the first bug we solved) 2. The `@config` is replaced in the `tailwind.css` file correctly. <img width="592" alt="image" src="https://github.com/user-attachments/assets/02e3f6ea-a85d-46c2-ac93-09f34ac4a4b8"> <img width="573" alt="image" src="https://github.com/user-attachments/assets/e372eb5f-5732-4052-ab39-096ba7970ff6"> |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.workspace.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.