Skip to content

Conversation

@RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Nov 14, 2024

This PR improves the discoverability of Tailwind config files when we are trying to link them to your CSS files.

When you have multiple "root" CSS files in your project, and if they don't include an @config directive, then we tried to find the Tailwind config file in your current working directory.

This means that if you run the upgrade command from the root of your project, and you have a nested folder with a separate Tailwind setup, then the nested CSS file would link to the root Tailwind config file.

Visually, you can think of it like this:

.
├── admin
│   ├── src
│   │   └── styles
│   │       └── index.css       <-- This will be linked to (1)
│   └── tailwind.config.js      (2)
├── src
│   └── styles
│       └── index.css           <-- This will be linked to (1)
└── tailwind.config.js          (1)

If you run the upgrade command from the root of your project, then the /src/styles/index.css will be linked to /tailwind.config.js which is what we expect.

But /admin/src/styles/index.css will also be linked to /tailwind.config.js

With this PR we improve this behavior by looking at the CSS file, and crawling up the parent tree. This mens that the new behavior looks like this:

.
├── admin
│   ├── src
│   │   └── styles
│   │       └── index.css       <-- This will be linked to (2)
│   └── tailwind.config.js      (2)
├── src
│   └── styles
│       └── index.css           <-- This will be linked to (1)
└── tailwind.config.js          (1)

Now /src/styles/index.css will be linked to /tailwind.config.js, and /admin/src/styles/index.css will be linked to /admin/tailwind.config.js.

When we discover the Tailwind config file, we will also print a message to the user to let them know which CSS file is linked to which Tailwind config file.

This should be a safe improvement because if your Tailwind config file had a different name, or if it lived in a sibling folder then Tailwind wouldn't find it either and you already required a @config "…"; directive in your CSS file to point to the correct file.

In the unlikely event that it turns out that 2 (or more) CSS files resolve to the same to the same Tailwind config file, then an upgrade might not be safe and some manual intervention might be needed. In this case, we will show a warning about this.

image

Test plan:

  • Added an integration test that properly links the nearest Tailwind config file by looking up the tree
  • Added an integration test that resolves 2 or more CSS files to the same config file, resulting in an error where manual intervention is needed
  • Ran it on the Tailwind UI codebase

Running this on Tailwind UI's codebase it looks like this:

image

@RobinMalfait RobinMalfait force-pushed the fix/improve-multi-root-without-at-config branch 5 times, most recently from 295d2fc to c005e24 Compare November 15, 2024 10:50
@RobinMalfait
Copy link
Member Author

This involves printing relative paths, so to make sure they work as expected I temporarily enabled the Windows tests to ensure everything works.

You can see it passing here: https://github.com/tailwindlabs/tailwindcss/actions/runs/11854912553
As seen in this PR: c005e24

@RobinMalfait RobinMalfait marked this pull request as ready for review November 15, 2024 11:10
@RobinMalfait RobinMalfait requested a review from a team as a code owner November 15, 2024 11:10
@RobinMalfait RobinMalfait force-pushed the fix/improve-multi-root-without-at-config branch 6 times, most recently from ef7e066 to 9547c9f Compare November 15, 2024 21:56
@RobinMalfait RobinMalfait force-pushed the fix/improve-multi-root-without-at-config branch 2 times, most recently from f1a2a52 to 3324c9e Compare November 18, 2024 12:58
@RobinMalfait RobinMalfait force-pushed the fix/improve-multi-root-without-at-config branch from 5d5112f to 9690804 Compare November 18, 2024 15:02
1. Sort by depth first
2. Sort by alphabetical folders
3. Prefer files starting with `index`
4. Sort alphabetically

Before this change, when comparing two files, if they both started with
`index`, then the sort was non-deterministic.
This ensures that the closest config file for a stylesheet is linked. We
also write some information to the user so they can verify that the
paths are correct (and adjust if necessary).
This ensures that once we figure out the absolute path, that we don't
accidentally resolve it against the wrong `base`.
@RobinMalfait RobinMalfait force-pushed the fix/improve-multi-root-without-at-config branch from 20aa290 to a00e9b4 Compare November 18, 2024 16:36
@RobinMalfait RobinMalfait enabled auto-merge (squash) November 18, 2024 16:43
@RobinMalfait RobinMalfait merged commit 08c6c96 into next Nov 18, 2024
1 check passed
@RobinMalfait RobinMalfait deleted the fix/improve-multi-root-without-at-config branch November 18, 2024 16:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants