CSS variables with default values lose their units which makes calculations that they participate in invalid

[rinart73]

CSS variables default values shouldn't have their units removed because they might be used in calc expressions. CSS calc is very sensitive to units and quite often if the units are not specified, the whole expression becomes invalid.

Input:

html {
  --admin-bar-fixed:var(--wp-admin--admin-bar--height, 0px);
  scroll-padding: calc(var(--admin-bar-fixed) + 60px) 0px 0px 0px;
}

Output (calc becomes invalid because it's now trying to 0 + 60px):

html{--admin-bar-fixed:var(--wp-admin--admin-bar--height,0);scroll-padding:calc(var(--admin-bar-fixed) + 60px) 0 0 0;}

Expected output (calc is valid 0px + 60px):

html{--admin-bar-fixed:var(--wp-admin--admin-bar--height,0px);scroll-padding:calc(var(--admin-bar-fixed) + 60px) 0 0 0;}

[PrestaEdit]

Hi,

I can confirm this issue, too.

[topfuel75]

Seems like this is fixed. I get the following output: html{--admin-bar-fixed:var(--wp-admin--admin-bar--height, 0px);scroll-padding:calc(var(--admin-bar-fixed) + 60px) 0 0 0}