jianlinwei / cssmin

Automatically exported from code.google.com/p/cssmin
0 stars 0 forks source link

@-webkit-keyframes Not Supported #26

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago
What version of CssMin are you using (source and/or build)?
2.0.2 and 3.0.0

What was the input stylesheet and/or configuration options?
default and ("remove-empty-blocks" => false, "remove-empty-rulesets" => 
false,"remove-last-semicolons"=>false)

What is the expected result?
@-webkit-keyframes css code remains function

And what is the actual result and/or error message?
breaks syntax

Please provide any additional information below.
Example CSS that is breaking by CSSMIN:

@-webkit-keyframes 'fade-in' {
        from { opacity: 0; }
        99% { opacity: 1; }
        to { }
    }
    @-webkit-keyframes 'slide-in' {
        from { -webkit-transform: translateX(100%); }
        99% { -webkit-transform: translateX(0); }
        to { }
    }
    @-webkit-keyframes 'slide-in-reverse' {
        from { -webkit-transform: translateX(-100%); }
        99% { -webkit-transform: translateX(0); }
        to { }
    }
    @-webkit-keyframes 'slide-out' {
        from { -webkit-transform: translateX(0); }
        99% { -webkit-transform: translateX(-100%); }
        to { }
    }
    @-webkit-keyframes 'slide-out-reverse' {
        from { -webkit-transform: translateX(0); }
        99% { -webkit-transform: translateX(100%); }
        to { }
    }

Original issue reported on code.google.com by allen.ha...@gmail.com on 27 Feb 2011 at 10:15

GoogleCodeExporter commented 9 years ago

Original comment by joe.scylla on 28 Feb 2011 at 8:29

GoogleCodeExporter commented 9 years ago
Fixed in version 3.0.0.b6 but there are some restictions.

1. You have to use the syntax without prefix (@keyframes and not 
@-webkit-keyframes)
2. You have to activate the minifier filter "ConvertLevel3AtKeyframes". This 
filter takes the @keyframes at-rule block and creates a @-webkit-keyframes 
at-rule block. There's a configuration option to remove the source @keyframes 
at-rule block. See also: 
http://code.google.com/p/cssmin/wiki/MinifierConfiguration

It's implemented that way because Mozilla (and other browser) will include that 
feature in one of the next version. 

Original comment by joe.scylla on 28 Feb 2011 at 1:50

GoogleCodeExporter commented 9 years ago
PS. thanks for reporting this issue ;)

Original comment by joe.scylla on 28 Feb 2011 at 1:51

GoogleCodeExporter commented 9 years ago
Great, this fixed it. 

The only notes I'd like to make is that this also requires the 
["RemoveEmptyAtBlocks"=>false] filter to function correctly with my code.  The 
"to { }" is required for my transition to work correctly, however, CSSMin 
removes that without the RemoveEmptyAtBlocks filter turned off. I'm not sure if 
you see this as CSSMin working properly and a shortcoming of Webkit's 
implementation of Transitions or if it is RemoveEmptyAtBlocks not playing with 
with Transition syntax.

The other issue is that I must change @-webkit-keyframes to @keyframes for this 
to work (that's fine) yet I have to leave my Transforms as "-webkit-transform:" 
-- It seems that CSSmin should also do this for me when converting the CSS3 
standard to browser-specific variants.

Original comment by ad...@rvinthevalley.com on 28 Feb 2011 at 10:36

GoogleCodeExporter commented 9 years ago
[deleted comment]
GoogleCodeExporter commented 9 years ago
Actually, even with ["RemoveEmptyAtBlocks"=>false], my "to { }" is still 
getting stripped. I need a way to address this.

Original comment by allen.ha...@gmail.com on 28 Feb 2011 at 11:57

GoogleCodeExporter commented 9 years ago
The configuration setting "RemoveEmptyRulesets" is responsible for removing 
empty rulesets.

CssMin is btw. not working properly. The RFC 
(http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-) defines 
that:

"Every keyframe declaration must have a keyframe rule for 0% or 100%, possibly 
defined using "from" or "to". A keyframe declaration without these keyframe 
selectors is invalid and will not be available for animation."

Issue reopened and i will fix this.

If you want to convert "transform" to "-webkit-transform" you gave to activate 
the minifier filter "ConvertLevel3Properties".

Original comment by joe.scylla on 1 Mar 2011 at 7:50

GoogleCodeExporter commented 9 years ago

Original comment by joe.scylla on 1 Mar 2011 at 9:47

GoogleCodeExporter commented 9 years ago
Fixed with version 3.0.0.b7.

Original comment by joe.scylla on 1 Mar 2011 at 11:30