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

.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

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.

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.

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.

Same here! Vote for this!

Me too.

Same problem troubled me

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.

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);

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?

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

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

@djgilcrease

The PR breaks the build, but it's a huge step forward. Thanks, @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.

See the Travis status on #107

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

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

@sunnybear

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

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

@beaktor

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

Work around a YUICompressor 2.4.8 bug in CSS calc

it's yui compressor still mantained?

Using YuiCompressor 2.4.8 and the bug is still on.

@svaponi

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

@frangarcia

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

Change parameters order to avoid YUI Compressor bug

Change parameters order to avoid YUI Compressor bug (#1680)

Avoid using calc(A + Npx) to circumvent bug in a CSS compressor

Fix bug 1692423: Replace broken CSS compressor with a no-op compressor

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 */

Navigation Menu

Repository navigation

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

58 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

tml commented on Mar 31, 2013

filipewl commented on Apr 4, 2013

alfredxing commented on May 12, 2013

yetithefoot commented on Jul 4, 2013

DanFinchUK commented on Jul 4, 2013

kmxz commented on Aug 7, 2013

kris-o3 commented on Sep 3, 2013

eaoliver commented on Sep 28, 2013

kris-o3 commented on Sep 30, 2013

djgilcrease commented on Sep 30, 2013

kris-o3 commented on Sep 30, 2013

tml commented on Sep 30, 2013

djgilcrease commented on Sep 30, 2013

tml commented on Sep 30, 2013

58 remaining items

sunnybear commented on Apr 18, 2018

himanshuwt commented on Apr 18, 2018

sunnybear commented on Apr 18, 2018

MarjanAshofteh commented on Jun 4, 2018

ramarro123 commented on Nov 15, 2018

DrLightman commented on Nov 28, 2019

frangarcia commented on Jun 4, 2020

Aleuck commented on Aug 23, 2020

R-W-C commented on Sep 28, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions