Use @layer properties
for @property
polyfills
#17506
Merged
+320
−301
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR changes how polyfills for
@property
are inserted. The main motivation is to remove the need to rely on the correct placement of@layer base;
—Something that's not really required right not in Tailwind CSS v4 and we'd like to keep it this way.The idea is that the polyfills are inserted for you automatically. To ensure they always take precedence, we insert an empty
@layer properties;
at the top of the CSS file so that later, when we emit all@property
rules and their fallback, we can use this new named layer to ensure the rules have a higher order.Unfortunately, just putting
@layer properties;
at the beginning of a file would not work aslightningcss
incorrectly hoists all content into the first occurrence of a layer name meaning these rules might be inserted before eventual external imports:To work around this, we have to insert that layer name after any eventual remaining external
@imports
for now.Test plan