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

Expressions are not being parsed #388

Open
raxbg opened this issue Sep 19, 2022 · 5 comments · May be fixed by #389
Open

Expressions are not being parsed #388

raxbg opened this issue Sep 19, 2022 · 5 comments · May be fixed by #389

Comments

@raxbg
Copy link
Contributor

raxbg commented Sep 19, 2022

Simple expressions do not seem to be parsed. Example:

div {
    height: (vh - 10);
}

This ends up being treated as:

div {}
@raxbg raxbg linked a pull request Sep 19, 2022 that will close this issue
@sabberworm
Copy link
Contributor

I’m sorry, is this a new CSS feature that I don’t know about yet?

@raxbg
Copy link
Contributor Author

raxbg commented Sep 20, 2022

Not really. I believe I oversimplified the example 😃 Consider this:

div {
  background: green;
  width: calc((100vw - 100px) / 2);
  height: 100px;
}

Without this fix the value in calc will not be parsed correctly.

@rafaucau
Copy link

I encountered a similar issue in the AMP plugin, which uses this library. ampproject/amp-wp#7291

Example:

:where(.container) {
   width: min(var(--container-max-width), 100% - calc(var(--container-padding) * 2));
   margin-inline: auto;
}

@JakeQZ
Copy link
Contributor

JakeQZ commented Feb 15, 2024

On the basis of the examples here, the issue seems to be with the nested brackets. Either with var(), or nested calc(). Both of these IIRC are CSS4, so relatively new.

The OP example is definitely new to me. I don't know if it's allowed for the calc keyword to be implicit. Or for there to be a default implicit length unit. @raxbg, would you be able to cite the relevant standards track for this?

@richmilns
Copy link

For me, it seems to be that the use of arithmetic causes issues:

.heading {
    font-size: clamp(1.4rem, 3vw + 1rem, 2rem);
}

Whereas this example gets parsed without a problem:

.heading {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

This approach for using clamp() in responsive font sizes was taken from Smashing Magazine, and whilst it's a newish idea and clamp() is actually still working draft at the time of writing, it is well supported in browsers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants