yui / yuicompressor

YUI Compressor
http://yui.github.com/yuicompressor/
Other
3.01k stars 661 forks source link

compress css like left:calc(50% - (100px / 2)) has a bug #330

Open dang0705 opened 4 years ago

dang0705 commented 4 years ago

it will be left:calc(50% -(100px / 2)),one space character is missing on the right side of the minus sign

so the browser cant analysis this css attribute

silkypress commented 4 years ago

I also have the same issue, but with the plus operator.

The minus operator seems to be correctly compressed, unless there is an additional parenthesis, as reported by @dang0705. Example: width: calc(25% - 10px) will correctly compressed to width:calc(25% - 10px).

But for the plus operator the spaces are removed. Example: width: calc( 25% + 10px) will be compressed to width:calc(25%+10px).

According to Mozilla web docs, the + and - operators in the calc function must be surrounded by whitespace.

MHCreations commented 4 years ago

I also have this issue.

Complex calc such as right: calc(((100% - 1200px) / 2) + 16px); are being reduced to right: calc(((100% - 1200px) / 2)+16px); and causing a browser parse error due to no spaces around the + character.

It appears YUI Compressor is manaully counting the number of brackets and not expecting numerous levels of brackets within calculations.

ying001ch commented 4 years ago

I have the same problem width: calc( 40% + 10px) will be compressed to width:calc(25%+10px) which can not be parsed correctly

dimitarhristovfluke commented 3 years ago

Have the same issue height:calc(50% + 4px) is compressed to height:calc(50%+4px) making it invalid

melloware commented 2 years ago

Can you try my plugin? I forked this CSS Compressor and have applied a bunch of patches and I can't reproduce your issues above.

https://github.com/primefaces-extensions/resources-optimizer-maven-plugin