Expressions are not being parsed

[raxbg]

Simple expressions do not seem to be parsed. Example:

div {
    height: (vh - 10);
}

This ends up being treated as:

div {}

[sabberworm]

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

[raxbg]

Not really. I believe I oversimplified the example :smiley: 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]

I encountered a similar issue in the AMP plugin, which uses this library. https://github.com/ampproject/amp-wp/issues/7291

Example:

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

[JakeQZ]

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]

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.