1317354 - CSS variables are not resolved in functions nested in calc(), such as transform() or rgba()

Status: RESOLVED DUPLICATE of bug 1308785

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Thomas Wisniewski]

As the developer of this demo says (see URL):

>Firefox does not seem to support var() inside calc().
>When I use var() directly inside the 3D transform functions,
>it works in Firefox, but when there is a calc() in between,
>Firefox doesn’t recognize it.

The CSS in question is (whitespace-formatted a bit for Bugzilla):

>transform:translateZ(calc(var(--translateZ) * 1px))
>          rotateX(calc(var(--rotateX) * 1deg))
>          rotateY(calc(var(--rotateY) * 1deg));

Comment 1

[Šime Vidas]

Note that this bug is about var() inside calc() inside a CSS transform function (*multiple levels* of nested CSS functions), and that that var() inside calc() *does* work (https://jsbin.com/ropuqoh/edit?html,css,output). The title of this bug should be updated accordingly.

Comment 2

[Thomas Wisniewski]

Thanks, Šime! I've updated the title.

Comment 3

[Astley Chen (inactive)]

probably depend on bug 1308785.

Comment 4

[Šime Vidas]

I’ve found a case with the rgba() function:

  rgba( calc(255 - var(--r)), calc(255 - var(--g)), calc(255 - var(--b)), 1 );

Live demo: https://blog.hospodarets.com/you-might-not-need-a-css-preprocessor/demos/no-preprocessor-css-colors-from-custom-props/

It looks like this issue is *not* restricted to transform functions; it may be that var inside calc does not work inside *any* CSS function. The title may need to be updated, again :)

Comment 5

[Thomas Wisniewski]

Sure, I've updated the title. Thanks again, Šime.

Comment 6

[Karl Dubost💡 :karlcow]

Another one https://webcompat.com/issues/4805

   hsla( calc( var(--hue) + 90 ) 50%, 50%, 1 )

Comment 7

[Xidorn Quan [:xidorn] UTC+11]

This is not related to variables at all... It seems to me calc() itself doesn't work inside any function at all, which is the fundamental issue here... Once calc() works, variables should work directly.

Comment 8

[Karl Dubost💡 :karlcow]

Xidorn, Probably there is a need for a bit of grouping or dependencies.

* Bug 1296209 - Support calc() in CSS properties that take <integer> values
* Bug 984021 - CSS rgb/rgba/hsl/hsla colour syntax does not accept calc() values

Comment 9

[Karl Dubost💡 :karlcow]

Yeah Bug 984021 and this one seems very similar. :)

Comment 10

[Greg Whitworth]

As with most bugs I'm sure you love +1 on here. But I hit this while creating demo for our custom property work. I've added a label for feature detection. I think it's worth noting that we found a bug in Chrome where they don't support floats inside of calc() so I'd add this testcase for when you do implement this: https://jsfiddle.net/0v82oe3r/

Thanks :)

Comment 11

[Simeon Vincent [:dotproto]]

I filed bug 1360768, but it may be duplicate of this issue.

Also of note, several issues with Firefox's handling of var() in calc() were mentioned in this article: https://css-tricks.com/solving-last-item-problem-circular-distribution-partially-overlapping-items/

Comment 12

[Kuba Niewiarowski]

Not resolved with Stylo?

Comment 13

[Brian Birtles (:birtles, Feb 26~ parental leave)]

The test case in the bug URL works for me with Stylo enabled. Furthermore, the content in comment 0 (combined with Xidorn's comment 7) appears to be just bug 1308785. I haven't tested rgba(), hsl() etc. but we have bug 984021 for those.