Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use @layer properties for @property polyfills #17506

Merged
merged 1 commit into from
Apr 2, 2025

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Apr 2, 2025

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 as lightningcss incorrectly hoists all content into the first occurrence of a layer name meaning these rules might be inserted before eventual external imports:

image

To work around this, we have to insert that layer name after any eventual remaining external @imports for now.

Test plan

@philipp-spiess philipp-spiess merged commit 4484192 into main Apr 2, 2025
7 checks passed
@philipp-spiess philipp-spiess deleted the fix/layer-properties branch April 2, 2025 16:16
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.

None yet

2 participants