question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem with removed parenthesis from calc before var

See original GitHub issue

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/

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

9reactions
shrpnecommented, Aug 31, 2020

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

0reactions
ludofischercommented, Jan 10, 2022

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

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

from

100% / var(--aspect-ratio)
Read more comments on GitHub >

github_iconTop Results From Across the Web

Polynomial-Why is the answer for removing parentheses and ...
I assume that when you say "remove parentheses", you are multiplying (x+2) by (x-2), thus simplifying the expression.
Read more >
How to remove this parenthesis () from this text value (123)
You've successfully removed the ( and ) , but there are several problems: It will return undefined if either number is 0 ,...
Read more >
Removes parentheses in expressions with mixed operators
Can we reopen the issue? I believe it's still a good thing to keep the parenthesis when 2 operators have the same precedence....
Read more >
Remove Invalid Parentheses - GeeksforGeeks
We need to remove minimum number of parentheses to make the input string valid. If more than one valid output are possible removing...
Read more >
Using Parenthesis in Math - Order of Operations - [5-7-3]
All calculations inside of parenthesis must be done first in a calculation. If we have multiple sets of parenthesis one inside of another, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found