Skip to content

Conversation

@adamwathan
Copy link
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
@adamwathan adamwathan merged commit a1f78a2 into next Nov 27, 2024
1 check passed
@adamwathan adamwathan deleted the fix/dont-use-property-types-unless-necessary branch November 27, 2024 16:47
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

3 participants