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-minifier] Please do not calculate the percentage in calc() #275

Closed
yisibl opened this issue Sep 9, 2022 · 0 comments
Closed

[css-minifier] Please do not calculate the percentage in calc() #275

yisibl opened this issue Sep 9, 2022 · 0 comments

Comments

@yisibl
Copy link
Contributor

yisibl commented Sep 9, 2022

Original issue: evanw/esbuild#1821 (esbuild has been resolved).

.foo {
  width: calc(100% / 3);
}

lightningcss minifier output

.foo{width:33.3333%}

esbuild(old version) minifier output

.foo{width:33.33333%}

Any attempt to calculate and then simplify the percentages in calc() can be dangerous! Please turn off this feature by default.

Demo: https://codepen.io/yisi/pen/OJxVXYo

(Mac Chrome 89.0.4389.82)

Although a new version of Chrome switched to TableNG to fix this issue, there are still many other browsers that use older versions of Blink.

Please make sure that the CSS minifier does not break the page layout, in which case the number of compressed bytes is not that important.

See also: https://stackoverflow.com/questions/31719624/displaytable-div-with-percentage-width-1px-bug

@yisibl yisibl closed this as completed Sep 9, 2022
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

1 participant