search

postcss / postcss-calc

PostCSS plugin to reduce calc()
MIT License
212 stars 34 forks source link

Problem with removed parenthesis from calc before var #113

Closed shrpne closed 2 years ago

shrpne commented 3 years ago

Original issue https://github.com/cssnano/cssnano/issues/645

This valid css

--aspect-ratio: 16/9;
padding-top: calc(100% / (var(--aspect-ratio)));

becomes invalid after cssnano compilation, because cssnano removes parenthesis around of var()

Chrome and Firefox don't respect the var() without parenthesis around it and so the code is not working as expected.

Test case: https://jsfiddle.net/z7bsn1r8/4/

Semigradsky commented 3 years ago

Is it the browser bug? Why parenthesis needed around of var()?

shrpne commented 3 years ago

I believe it's not a browser bug. Parenthesis are needed because of math: 100 / (16/9) = 56.25 100 / 16/9 = 0.69

coreyworrell commented 3 years ago

Probably related #115

dangelion commented 3 years ago

Any news on this huge bug, it's very blocking...

ludofischer commented 2 years ago

It's harder to fix than it seems, because the current parser does not distinguish:

100% / (var(--aspect-ratio))

from 

100% / var(--aspect-ratio)