tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

History

Ensure @config is injected in common ancestor sheet (#14989 )

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">

2024-11-14 11:48:31 +01:00

src

Ensure @config is injected in common ancestor sheet (#14989 )

2024-11-14 11:48:31 +01:00

package.json

Prepare v4.0.0-alpha.33 release (#14967 )

2024-11-11 20:28:41 -05:00

README.md

Add initial codemod tooling (#14434 )

2024-09-18 16:45:43 +02:00

tsconfig.json

Internal refactor, introduce AtRule (#14802 )