Only generate Preflight compatibility styles when Preflight is used #14773
Conversation
bea6b13 to
f90aa82
Compare
| @import './a.1.utilities.1.css'; | ||
| @import './b.1.css' layer(components); | ||
| @import './b.1.utilities.css'; | ||
| @import './b.1.css'; |
There was a problem hiding this comment.
File doesn't contain @import "tailwindcss" or @import "tailwindcss/preflight" therefore we don't inject the border compatibility CSS. Therefore no utilities and "other" CSS exists which means that we don't have to split the file anymore.
| @import 'tailwindcss/utilities' layer(utilities); | ||
| @import './utilities.css'; | ||
| /* |
There was a problem hiding this comment.
Removed because @import "tailwincdss" or @import "tailwindcss/preflight" does not exist in this file.
| --- ./src/a.1.css --- | ||
| @import './a.1.utilities.css'; | ||
| /* |
There was a problem hiding this comment.
Removed because @import "tailwincdss" or @import "tailwindcss/preflight" does not exist in this file.
| } | ||
| --- ./src/b.1.css --- | ||
| /* |
There was a problem hiding this comment.
Removed because @import "tailwincdss" or @import "tailwindcss/preflight" does not exist in this file.
| --- ./src/c.1.css --- | ||
| @import './c.2.css' layer(utilities); | ||
There was a problem hiding this comment.
Removed because @import "tailwincdss" or @import "tailwindcss/preflight" does not exist in this file.
| --- ./src/root.4/utilities.css --- | ||
| @import 'tailwindcss/utilities' layer(utilities); | ||
| /* |
There was a problem hiding this comment.
Removed because @import "tailwincdss" or @import "tailwindcss/preflight" does not exist in this file.
| --- src/tailwind.css --- | ||
| @import 'tailwindcss'; | ||
| /* |
There was a problem hiding this comment.
Injected the border compatibility CSS because @import "tailwindcss" exists
| @import 'tailwindcss/theme' layer(theme); | ||
| @import 'tailwindcss/preflight' layer(base); | ||
| /* |
There was a problem hiding this comment.
Injected the border compatibility CSS because @import "tailwindcss/preflight" exists
| } | ||
| --- src/utilities.css --- | ||
| @import 'tailwindcss/utilities' layer(utilities); |
There was a problem hiding this comment.
No border compatibility CSS was injected because we only have tailwindcss/utilities but not the tailwindcss or tailwindcss/preflight imports
| border-color: var(--color-gray-200, currentColor); | ||
| } | ||
| } | ||
There was a problem hiding this comment.
The whitespace handling in this file a little bit annoying but this is a test for the codemod itself not the full integration test. In integration tests the whitespace is more correct.
This issue existed before, but wanted to point it out explicitly that it's not directly related to this change.
dd2186a to
4fb6cfc
Compare
We were always injecting the border compatibility CSS above the first `@layer base`. But in projects where you have multiple files using this `@layer base` it means that the reset is injected in each file. Instead, only try to inject it in files where `@import 'tailwindcss'` or `@import 'tailwindcss/preflight'` is being used. When we see a file with `@import 'tailwindcss'`, we consider it a root file because that's where Tailwind CSS will be injected. If you split up your code, it could be that you have a different file that contains `@import "tailwindcss/preflight";`. This is the import responsible for adding the `@layer base` resets, so this is a good file to put the border compatibility CSS as well.
…ected in the correct spot
4fb6cfc to
8754b6c
Compare
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This PR improves where we inject the border compatibility CSS. Before this change we injected it if it was necessary in one of these spots:
@layer baseto group it together with existing@layer baseat-rules.@import, to make sure that we emit valid CSS because@importshould be at the top (with a few exceptions).However, if you are working with multiple CSS files, then it could be that we injected the border compatibility CSS multiple times if those files met one of the above conditions.
To solve this, we now inject the border compatibility CSS with the same rules as above, but we also have another condition:
The border compatibility CSS is only injected if the file also has a
@import "tailwindcss";or@import "tailwindcss/preflight";in the current file.Added integration tests to make sure that we are generating what we expect in a real environment. Some of the integration tests also use the old
@tailwinddirectives to make sure that the order of migrations is correct (first migrate to@importsyntax, then inject the border compatibility CSS).