Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rinart73 opened this issue Mar 16, 2023 · 2 comments

Comments

@rinart73
Copy link

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
Copy link

Hi,

I can confirm this issue, too.

@topfuel75
Copy link

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}

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

No branches or pull requests

3 participants