calc() broken in v4: Invalid property value, expected type "<length> | <percentage>" #14277
Comments
|
@probablykasper Thank you for the report! We confirmed that this fix works for the latest version of Chrome/Safari/Firefox. We changed this specifically to `" | " in the past though: #13660. This was likely an issue with Firefox nightly at the time. cc @thecrypticace Update: The issue why we changed this in the first place does still exist in Firefox though so this needs a bit more work: https://codepen.io/thecrypticace/pen/dyEbBdo |
|
Haven't tried it, but maybe |
|
Interesting idea! Sadly that does not work 😭 — I updated the code pen with that change here: https://codepen.io/thecrypticace/pen/dyEbBdo Still broken in FF |
|
Maybe we can submit a patch Lightning to preserve the space between variables as a workaround? |
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. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
What version of Tailwind CSS are you using?
For example: 4.0.0-alpha.20
What build tool (or framework if it abstracts the build tool) are you using?
For example: Vite 5.4.2
What version of Node.js are you using?
For example: v20.15.0
What browser are you using?
For example: Brave
What operating system are you using?
For example: macOS
Reproduction URL
https://play.tailwindcss.com/CLyjwhj0qQ
Describe your issue
The same code does work in v3. Setting the CSS variable's
syntaxproperty from"<length> | <percentage>"to"<length-percentage>"fixes it.The text was updated successfully, but these errors were encountered: