tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.27k stars 4.22k forks source link

Improve root file detection #15048

Closed RobinMalfait closed 2 days ago

RobinMalfait commented 2 days ago

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:

/* 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
image image

(Yes, I know the migration still fails, but that's a different issue.)