calc() broken in v4: Invalid property value, expected type "<length> | <percentage>"

[probablykasper]

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 syntax property from "<length> | <percentage>" to "<length-percentage>" fixes it.

[philipp-spiess]

@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: https://github.com/tailwindlabs/tailwindcss/pull/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

[probablykasper]

Haven't tried it, but maybe "<length-percentage> | <length> | <percentage>" works

[thecrypticace]

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

[adamwathan]

Maybe we can submit a patch Lightning to preserve the space between variables as a workaround?

[philipp-spiess]

Looks like we forgot to close this issue but it seems to have been resolved in #15215 where all properties using <length> | <percentage> were replaced with either * or <length-percentage>. 👍