Support for CSS3 gradients

[GoogleCodeExporter]

What version of CssMin are you using (source and/or build)?

3.0.1

What was the input stylesheet and/or configuration options?

div.test1 { background-image: linear-gradient(bottom, rgb(73,74,81) 9%, 
rgb(148,150,161) 55%); }
div.test2 { background: linear-gradient(bottom, rgb(73,74,81) 9%, 
rgb(148,150,161) 55%); }

What is the expected result?

The gradient declarations are converted to -moz, -ms, -o and -webkit prefixes.

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

The declarations are not converted.

Please provide any additional information below.

The test also fails for radial and repeating gradients.

Original issue reported on code.google.com by Matthew....@ft.com on 28 Mar 2012 at 12:58

[GoogleCodeExporter]

I had the same problem and I've implemented a "hacky" solution (that in 
principle shouldn't have any problems as far as I can think of). The problem is 
that for all the regular properties such as box-shadow, etc, the property 
itself is box-shadow: ....
In linear-gradient, the property itself is 'background ' or 'background-image'. 
If you look at the file cssmin-v3.0.1.php, line 2978, you see the class  
CssConvertLevel3PropertiesMinifierFilter extends aCssMinifierFilter.

This class defines all the transformed properties ("tokens"), and it's very 
easy to add one new one here. However, since as I said the actual token is 
background, you can't just add a line for linear-gradient. There comes the 
hack. 
I'm assuming you do all your classes with the -moz prefix (say 
-moz-linear-gradient). Then, in the css you replace background: 
-moz-linear-gradient by background-moz-linear-gradient:. This will make it so 
that the property background-moz-linear-gradient is picked up by the CSS3 
prefixer loop and we can add a new rule. I don't know if you get the idea but 
the code I'm using is this:

<?php

///////////////////////////////////////////////
    //CSS3 Prefixing adding linear gradient support
        //Works if we do all our linear gradient definitions using the -moz prefix (if we use others they won't be propagated)  
        //In the future if linear background support is added to cssmin we need to remove this loop and simply do the $css_compressed = CssMin::minify($css,$filters,$plugins);
        //$css_compressed = CssMin::minify($css,$filters,$plugins); //old way without linear-gradient support

        //Minify the first time without adding CSS3 Prefixes (we'll add them all the second round) - We minimize the first time because that removes any spacing between background: and what comes next
        $filters['ConvertLevel3AtKeyframes'] = false; $filters['ConvertLevel3Properties'] = false;
        $css_compressed = CssMin::minify($css,$filters,$plugins);

        //Reactivate CSS3 Prefixer
        $filters['ConvertLevel3AtKeyframes'] = true; $filters['ConvertLevel3Properties'] = true;

        //Assume that we have all our linear gradients inside background and background-image prefixed with -moz-linear-gradient
        //We "tokenize" the background:-moz-linear-gradient into background-moz-linear-gradient: so it's picked up by the css3 prefixer loop (otherwise the token key would be background)
        $css_compressed = str_replace(array('background:-moz-linear-gradient','background-image:-moz-linear-gradient'),array('background-moz-linear-gradient:','background-image-moz-linear-gradient:'),$css_compressed);

        //Run Css min one more time, this will spawn 4 more entries for each background-moz-linear (the 3 other browser specific plus linear gradient)      
        $css_compressed = CssMin::minify($css_compressed,$filters,$plugins); //The tokenized new values are defined as a custom entry inside css-v.3.0.1.php function in line 3191 & 3192

        //Untokenize the linear-backgrounds
        $tokenized = array('background-moz-linear-gradient:','background-image-moz-linear-gradient:','background-linear-gradient:','background-image-linear-gradient:','background-webkit-linear-gradient:','background-image-webkit-linear-gradient:', 'background-o-linear-gradient:','background-image-o-linear-gradient:', 'background-ms-linear-gradient:','background-image-ms-linear-gradient:');
        $restored  = array('background:-moz-linear-gradient','background-image:-moz-linear-gradient','background:linear-gradient', 'background-image:linear-gradient', 'background:-webkit-linear-gradient','background-image:-webkit-linear-gradient', 'background:-o-linear-gradient','background-image:-o-linear-gradient', 'background:-ms-linear-gradient','background-image:-ms-linear-gradient');
        $css_compressed = str_replace($tokenized,$restored,$css_compressed);
    //End of CSS3 prefixing loop
    ////////////////////////////

?>

AND in cssmin-v3.0.1.php replace (line 3189):

"zoom"                          => array(null, null, null, "-ms-zoom"),

by 

"zoom"                          => array(null, null, null, "-ms-zoom"),
        //LINEAR GRADIENT Hack 
        "background-moz-linear-gradient"    => array("background-linear-gradient", "background-webkit-linear-gradient", "background-o-linear-gradient", "background-ms-linear-gradient"),
        "background-image-moz-linear-gradient"  => array("background-image-linear-gradient", "background-image-webkit-linear-gradient", "background-image-o-linear-gradient", "background-image-ms-linear-gradient")

Hope that helps,

Inaki

Original comment by Lesko...@gmail.com on 28 Apr 2012 at 9:42