barryvan / cssmin Goto Github PK

Currently, if we have a quoted string inside a url() that contains a closing parenthesis, this will close off the url(), causing issues. It's uncommon, but can happen.

zero value give error
p{ padding:0}

The CSSMin class is not handling properly the "transform-origin" property.
This property can have up three arguments (one per axis)[1]. The default value is "50% 50% 0".

If not all the parameters are defined it does not mean that the remaining ones have the same value, i.e., the 'simplified' version generated after minimize it is not equivalent.

Therefore, the same fix applied for the "background-size"[1] should be applied for the "transform-origin" property.

[1] https://www.w3schools.com/cssref/css3_pr_transform-origin.asp
[2] 24d4ed9

Reported by a colleague:

The simplifyParameters function in CSSMin.java is designed to reduce the number of parameters as it can. So something like 'width: 100% 100%' gets reduced to 'width: 100%', as the second item was unneeded. Although this usually makes sense, this causes problems with the background-size property, with 'background-size: 100% 100%' not being equivalent to 'background-size: 100%'. The latter case is actually considered as 'background-size: 100% auto'; although Chrome seems to show that as we intend, Firefox does not, hence the jagged edge.

I think the solution is just to include "if (this.property.equals("background-size")) return;" as the first line of simplifyParameters

Hacks like this one:

html{
height:100%;
max-height:100%;
/* hide overflow:hidden from IE5/Mac /
/ */
overflow: hidden;
/* */
}

need to be accounted for and worked around.

For details read this comment https://github.com/paulirish/html5-boilerplate/issues/issue/310#issue/310/comment/754227

Selectors whose content is similar should be grouped together if it will save space in the file.

The following css rule is not minimized properly:

.someClass{
    background: url(http://www.image.com/mobile-sprite.png);
}

Expected:

.someClass{background:url(http://www.image.com/mobile-sprite.png);}

Actual:

 .someClass{background:url(http}

This rule...

.someView .subitem{
    border: solid 1px #ccc;
    background: #eee;
    padding: 8px;
    text-align: center;
    margin: 8px 0
}

Gets minified to...

.someView .subitem{background:#eee;border:solid 1px #ccc;margin:8px;padding:8px;text-align:center}

Note trailing zero stripped from margin.

I am pretty sure that both are valid CSS. The first example with a space before the closing bracket raises an out of bounds exception. Its not a critical bug, but a fix is welcome :-)

java.lang.ArrayIndexOutOfBoundsException: 6
at Selector.(CSSMin.java:204)
at CSSMin.formatFile(CSSMin.java:142)
at CSSMin.formatFile(CSSMin.java:76)
at CSSMin.formatFile(CSSMin.java:64)
at CSSMin.main(CSSMin.java:54)

Regards,
Michael

Or within the shorthand.

Given code like this:
@-webkit-keyframes 'fadeUp' {
from { opacity: 0; }
to { opacity: 1; }
}

The compiler throws the following error:
Unterminated selector: @-webkit-keyframes 'fadeUp' { from { opacity: 0; }
Warning: Incomplete selector: }

The resulting output has the declaration removed entirely. This makes the compressor unusable if any webkit keyframes are declared.

When there is an special comment in the CSS (starting by /**), it enters in an infinite loop.

BTW: why these comments are preserved?

See http://lists.w3.org/Archives/Public/www-style/2013Jun/0194.html -- because -- properties are case-sensitive, lowercasing them can cause issues when the property is referenced elsewhere.