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

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

Open
dang0705 opened this issue Sep 9, 2019 · 5 comments
Open

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

dang0705 opened this issue Sep 9, 2019 · 5 comments

Comments

@dang0705
Copy link

dang0705 commented Sep 9, 2019

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

@dang0705 dang0705 changed the title compress css like :calc(50% - (100px / 2)) has a bug compress css like left:calc(50% - (100px / 2)) has a bug Sep 9, 2019
@silkypress
Copy link

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
Copy link

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
Copy link

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

@dimitarhristovfluke
Copy link

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

@melloware
Copy link

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

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

6 participants