[closure-compiler-discuss] CSS minimization and combining

[Tyson Cadenhedad]

First of all, let me say that I am definitely impressed by the Closure
Compressor. I've been experimenting with several different ways to
automate compressing and combining files, and Closure is by far my
favorite solution that doesn't require any server-side interaction. I
was wondering if there are any plans to extend the compression and
combining to CSS files in addition to the great work that has been
done for JavaScript files. Thanks again for your great work!


--
Subscription settings: http://groups.google.com/group/closure-compiler-discuss/subscribe?hl=en

[John Lenz]

This comes up every now and then.  There are no current plans.  Someone could write a common frondend if there were is existing java based CSS compiler, but as far as I know no one has done this.    It would also be cool to minimize CSS class names across the JS/CSS in Advanced mode.

[Andy Hochhaus]

Tyson,

This isn't really what you asked for, as it is not part of the
compiler itself. However, it provides some of the same functionality
when run as a step before the compiler in your build system.

I wrote a small utility (css_util.py) used in our build system to
generate a "CSS renaming map" for use with the closure-compiler. This
utility combines multiple CSS files together as well as "minifying"
CSS class names down to shorter variants. This can be combined with
goog.setCssNameMapping() and the closure-compiler to share your
"minified" class names across files (*.css, *.js, *.soy).

This utility is released under the APL v2 license and is located at:
https://samegoal.com/s/css_util.py.

The utility can be run as follows:

$ ./css_utils.py --css_file=input1.css --css_file=input2.css
--css_map_file=css_map.js --output_file=generated.css

The utility works as follows:

1) One or more input *.css files are supplied on the command line via
the --css_file flag. These files are concatenated together (in order).
2) A "renaming map" file is generated mapping long CSS class names to
their minified variants. This output file is specified using the
--css_map_file flag.
3) The CSS class names are rewritten and output into a new file using
the --output_file flag. This is the new CSS file that should be served
for your project.

In order to rename class names in your compiled javascript, it is
necessary to pass the css_map.js file to closurebuilder.py. One way to
do this is:

$ ./closurebuilder.py [other flags] -f --js=css_map.js

If you use soy templates, make sure the {{css [name]}} references are
substituted by running:

$ java -jar SoyToJsSrcCompiler.jar [other flags] --cssHandlingScheme goog

A quick warning that this utility was thrown together very quickly
before I had a good understanding of how the CSS renaming was done in
the compiler. Any improvements or suggestions are welcome. If I find
the time I will rewrite it to be faster and do more intelligent
renaming of the classes.

Thanks,
Andy

[Andy Hochhaus]

[Alex Objelean]

There is already a tool for this, wro4j: http://code.google.com/p/wro4j/
It merge, compress, minimize both: js & css. The processors used to
transform the resources are configurable. The wro4j-extensions provide
a support for google closure. Besides that, it have few more features:
css variables support and very soon will have cssless support (http://
code.google.com/p/wro4j/wiki/LessCssSupport). It can be used as a
runtime solution (using filter) or build time solution (using maven
plugin).

Alex