tailwindcss/packages/@tailwindcss-upgrade
Robin Malfait f19afd91e5
Improve root file detection (#15048)
This PR fixes an issue where the Tailwind root file detection was wrong.

Whenever a CSS file contains any of the `@tailwind` directives or an
`@import` to any of the Tailwind files, the file is considered a
Tailwind root file.

If multiple CSS files are part of the same tree, then we make the
nearest common parent the root file.

This root file will be the file where we add `@config` and/or inject
other changes during the migration process.

However, if your folder structure looked like this:

```css
/* index.css */
@import "./base.css";
@import "./typography.css";
@import "tailwindcss/components"; /* This makes index.css a root file */
@import "./utilities.css";

/* base.css */
@tailwind base; /* This makes base.css a root file */

/* utilities.css */
@tailwind utilities; /* This makes utilities.css a root file */
```

Then we computed that `index.css` nad `base.css` were considered root
files even though they belong to the same tree (because `base.css` is
imported by `index.css`).

This PR fixes that behaviour by essentially being less smart, and just
checking again if any sheets are part of the same tree.

# Test plan:

Added an integration test that covers this scenario and fails before the
fix.

Also ran it on our tailwindcss.com codebase.

| Before | After |
| --- | --- |
| <img width="1072" alt="image"
src="https://github.com/user-attachments/assets/8ee99a59-335e-4221-b368-a8cd81e85191">
| <img width="1072" alt="image"
src="https://github.com/user-attachments/assets/fe5acae4-d3fc-43a4-bd31-eee768a3a6a5">
|

(Yes, I know the migration still fails, but that's a different issue.)
2024-11-20 00:20:40 +01:00
..
2024-11-20 00:20:40 +01:00
2024-09-18 16:45:43 +02:00

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


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.