Skip to content

Don't register properties with types unless necessary#15215

Merged
adamwathan merged 3 commits into
nextfrom
fix/dont-use-property-types-unless-necessary
Nov 27, 2024
Merged

Don't register properties with types unless necessary#15215
adamwathan merged 3 commits into
nextfrom
fix/dont-use-property-types-unless-necessary

Conversation

@adamwathan

Copy link
Copy Markdown
Member

This PR updates many of our @property rules to use syntax: "*" instead of a specific type.

Registering custom properties with types triggers all sorts of obscure edge-case bugs in different browsers (mostly Safari, sometimes Firefox), but using "*" always seems to work. So unless we know we actually need to animate a custom property, it's safer to register is as "*".

Many of the places our custom properties are used are already inherently animatable (like the translate, scale, and transform) even when the underlying properties are not typed, so removing types for things like --tw-scale-x doesn't actually stop the scale-* utilities from being animateable.

I've also updated the --tw-gradient-from/via/to-position properties to use <length-percentage> instead of <length> | <percentage> because for some reason I don't understand, only <length-percentage> works correctly when using calc(…) in arbitrary values.

Fixes #15188, #14277.

@adamwathan adamwathan requested a review from a team as a code owner November 27, 2024 16:19
@adamwathan adamwathan force-pushed the fix/dont-use-property-types-unless-necessary branch from 3c3e7f0 to ae9ced5 Compare November 27, 2024 16:20
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.

Arbitrary calc values with mixed units not working for translate-* and -translate-* in 4.0.0-beta.2

2 participants