YUI Compressor is breaking some CSS, specifically calc(100% + ##px)

[djgilcrease]

.issue-59 {
    width:100%;
    width: -webkit-calc(100% + 30px);
    width: -moz-calc(100% + 30px);
    width: calc(100% + 30px);
}

turns into
.issue-59{width:100%;width:-webkit-calc(100%+30px);width:-moz-calc(100%+30px);width:calc(100%+30px)}

instead of

.issue-59{width:100%;width:-webkit-calc(100% + 30px);width:-moz-calc(100% + 30px);width:calc(100% + 30px)}

Notice the missing spaces

[tml]

calc() is specifically called out as "at risk of being dropped during the CR period", but we should probably still address this one, as the blasted spec does - in fact - require at least one whitespace character around + and - operators.

[filipewl]

I'm having exactly the same problem. I'm using Jammit to compress the CSS for production and my calc() expressions are breaking because the compressor is removing, sometimes, spaces before and after operators and parenthesis.

Examples:
Original: calc(100% * 2 + 20px * (2 - 1))
Compressed: calc(100% * 2+20px *(2 - 1))

Does anybody know a workaround for this? I see no other option but to exclude this part of the CSS from Jammit's pipeline.

[alfredxing]

I'm having the same issue. Although calc is considered "experimental", it's a great tool to use (and it does work with major browsers).
It would be great to have this fixed; I can't seem to find a workaround.

[yetithefoot]

Same here! Vote for this!

[danielsamuels]

Me too.

[kmxz]

Same problem troubled me

[kris-o3]

background-position: calc(65% - (100px - 350px * 0.65)) 0;

gets compressed as:

background-position:calc(65% -(100px - 350px * .65)) 0;

i currently have to add a space after the - before the inner expression.
like so:

background-position:calc(65% - (100px - 350px * .65)) 0;

i have to do this every time i commit css-related changes.
it is making me very sad indeed.

[eaoliver]

Has there been any progress on this bug? It's maddening. Nested expressions are still being compressed, which breaks the calc function under Safari and Firefox. It works under Chrome.

Example: (source calcs had spaces been operations)

left: -moz-calc((100% - 106px)/2+64px);
left: -webkit-calc((100% - 106px)/2+64px);
left: calc((100% - 106px)/2+64px);

[kris-o3]

i attempted to locate which of the many regex's might need tweaking for this but was caught up in the muck and mire of a very long if( ) statement indeed... surely someone who worked on it or familiar with it can have a look?

[djgilcrease]

We had fixed this in our local version, I just forgot to commit it back for upstream pull request #107

[kris-o3]

great! let us know when the merge has been approved / is complete?

[tml]

The PR breaks the build, but it's a huge step forward. Thanks, @djgilcrease!

[djgilcrease]

How does it break the build? I was able to run the ant build and all the tests that were passing before changes were still passing.

[tml]

See the Travis status on #107

Or just check the build: https://travis-ci.org/yui/yuicompressor/builds/11968385

[kris-o3]

not familiar with 'checking the build' but i see that it "failed" ?
will it be tagged w/ a new version # when this fix is ready for prime-time?

[tml]

This will likely be part of 2.4.9, unless there's a strong objection from the user community.

[eaoliver]

What's the ETA on 2.4.9?

[djgilcrease]

Ok, will get the build passing again

[djgilcrease]

Build is passing for pull request #107 again https://travis-ci.org/yui/yuicompressor/builds/11977764

[kris-o3]

fixed upon fixing issue #59?

#107

[jlong]

Can we get this merged please? Looks like it's ready to go.

[djgilcrease]

Just checking on the status of this since the build tests have been passing for 4 months now

[patrick91]

Any update on this?

[beaktor]

One nice option: use simple math and do a double negative. The bug doesn't seem to affect the - operator, just +.

Replace this:

width: calc(100% + 20px)

With this:

width: calc(100% - -20px);

[kris-o3]

interesting (?) workaround -- supported by all browsers?

[djgilcrease]

it is, but it does not fix multiplication or division issues

[manishmp7]

facing same issue
I'm using "2.4.8" version.

Team, Please fix it or tell me how can i fix it without (- -) solution

[svaponi]

Compression examples:

calc(50% - 3px)      => calc(50% - 3px)   // VALID
calc(50% + 3px)      => calc(50%+3px)     // INVALID
calc(50% + +3px)     => calc(50%++3px)    // INVALID
calc((50%) + (3px))  => calc((50%)+(3px)) // INVALID
calc(50% + (+3px))   => calc(50%+(+3px))  // INVALID
calc(50% + (3px))    => calc(50%+(3px))   // INVALID
calc(50% - (-3px))   => calc(50% -(-3px)) // INVALID
calc(50% - -3px)     => calc(50% - -3px)  // VALID

[PeterLenahan]

Before compression spaces are there
.file-item {
width: calc(100vw - 40px);
height: calc(((100vw - 40px) * .73) + 40px);
}
After compression, the spaces are missing.

.file-item{width:calc(100vw - 40px);height:calc(((100vw - 40px) * .73)+40px)}

[sunnybear]

Any news on this? YUI Compressor breaks CSS calc for 5 years!

[himanshuwt]

@sunnybear agree with you. 5 years done. And, still I faced the issue "+" then again i replace it with calc(x - - y). :D

[sunnybear]

Does anybody have a list of issues with calc? We've faced with
100% + 6px -> 100%+px
100% - (10% * 6) -> 100% -(10% * 6)
It seems also
(100vw - 40px) * .73) + 40px -> (100vw - 40px) * .73)+ 40px

[MarjanAshofteh]

@beaktor
using two - beside + works for me too.
thanks

[ramarro123]

it's yui compressor still mantained?

[DrLightman]

Using YuiCompressor 2.4.8 and the bug is still on.

[frangarcia]

This version, https://mvnrepository.com/artifact/com.yahoo.platform.yui/yuicompressor/2.4.9-BSI-2, seems to have fixed the problem. I followed the examples @svaponi added using this file

body{
	font-size: calc(50% - 3px);
	font-size: calc(50% + 3px);
	font-size: calc(50% + +3px);
	font-size: calc((50%) + (3px));
	font-size: calc(50% + (+3px));
	font-size: calc(50% + (3px));
	font-size: calc(50% - (-3px));
	font-size: calc(50% - -3px);
}

and when running this command:

java -jar yuicompressor-2.4.9-BSI-2.jar --line-break 0 -o process.css.min file.css

this output was generated:

body{font-size:calc(50% - 3px);font-size:calc(50% + 3px);font-size:calc(50% + +3px);font-size:calc((50%)+(3px));font-size:calc(50% + (+3px));font-size:calc(50% + (3px));font-size:calc(50% - (-3px));font-size:calc(50% - -3px)}

which looks correct.

It seems the repo in charge of this is this fork https://github.com/BSI-Business-Systems-Integration-AG/yuicompressor

[Aleuck]

This is not correct, @frangarcia
calc((50%)+(3px))

[R-W-C]

September 2022 and still broken.
Version 2.4.8 has got several bugs. One of them is described here: https://stackoverflow.com/a/19339287/760777
Version 2.4.9 has never been released.

So back to version 2.4.7
There is the calc bug. Just use the double minus solution.

So

left: calc(100% + 14px);

becomes

left: calc(100 - -14px); /* + replaced with - - because of yuicompressor bug */