Some tools for compressing CSS
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Ruby CSS Toolkit

This project contains tools for optimizing and compressing CSS files.

It contains two tools (ported to Ruby from the originals):

  1. YUI CSS compressor

  2. CSS Tidy

NB: Currently Tidy is still being worked on.


1.4 27 April 2011 - Update Port of YUI CSS compressor.

This now works the same as YUI compressor v2.4.6

At this stage the Tidy port fails some of the YUI tests.

I might not fix these for a while.

1.2.1 3 July 2010 - Second release of Ruby Port of CSS Tidy.

This should be production ready, although not all Tidy optimisations have been ported, the most effective ones have been. Please test thoroughly before deploying the code and file an issue if you find a bug.

1.1.0 27 June 2010 - First release of Ruby Port of CSS Tidy. This does not yet have all the optimisations of the original, and will produce larger files than YUI if there are comments inside selectors or at blocks (this will be fixed later)

1.0.0 20 June 2010 Release of full implementation of yui compressor

0.9.0 20 June 2010 Initial Release (Still needs line break option added)


  • Make into a gem


  • add back in missing optimisations from CSS Tidy (and some additional ones)

Available Tools

YUI CSS Compressor

This is a complete port of the YUI CSS compressor.

This includes the full test suite, so you (and I), can be sure that it behaves as expected.

CSS Tidy

This is port/rewrite of CSS Tidy.

Only the PHP version of the current CSS Tidy project is being maintained, and so probably won't be used by rubyists or those who need a simple command line interface.

This port/rewrite fills this gap, and also provides a platform for future enhancements and CSS3 support.

It stores the parsed CSS using a number of Ruby objects. This is then optimised.

This approach allows the use of CSS hacks of various kinds - the optimisation code is hack aware, so (for example) won't merge or override rules in a declaration that uses the box model hack.

It will also group selectors with identical rulesets, so you cannot turn this feature on and expect the IE5 or IE7 comment hacks to work.

The use of an object to hold the CSS in a tree structure allows extra optimisations to be done beyond what is possible with a pure regex based compressor.

Features done so far:

  • Compress colors

    #eeffaa -> #efa

    rgb(35,48,98) -> #233062

    #colors -> color names

    color names -> #colors

also replaces invalid color names with valid #color values

  • Lowercase selectors

    BODY -> body

  • Compress font-weight

    bold -> 700

    normal -> 400

  • Remove last ;

    The ; character is a delimiter between CSS declarations, and is not required for the last one in a block.

  • Optimise shorthands

padding:10px 20px 50px 20px;


padding:10px 20px 50px;

padding:10px 20px 10px 20px;


padding:10px 20px;

merges the following where ALL individual declaration are made in a rule











gets converted to:

padding:10px 20px 50px 45px;

NB: If one of the longhand rules is !important, then the whole new shorthand rule is marked important.

This is the same behaviour as the original CSSTidy

  • Merge selectors

If you have this rule:


and later:


this can be shortened to:


In doing this there is no risk of breaking the cascade of selectors.

BUT, you cannot use hacks like the IE5 comment hack (/**/rule/**/) or the IE7 selector comment hack (selector/**/{rules}) because rules will be move around or be grouped.

  • remove quotes around URLs

These are optional in the CSS spec.

Features to be added:

  • add a timestamp

For documentation purposes.

  • more shorthand optimisations

Also font and background optimisation.

NOT implemented (which the original did):

  • sort properties

There is not much point; it can break hacks like the box model hack. We try to not break hacks(TM).

  • sort selectors

Sorting by selector can causes breakages in the cascade.

  • preserve CSS

The point of this seems to be to stop hacks being removed from the file.

  • remove backslash



Note that Tidy expects your CSS to be valid. This means:

  • strings make sense (they open and close correctly, and have escapes internally as needed)

  • media blocks and declarations open and close with braces and have at least on valid CSS ruleset

It is a good idea to use the W3C validator first.

Command Line

yui-css-compressor params

css-tidy params

where params are:

–input, -i <file> The CSS-file to be compressed, if not set stdin is used

–output, -o <file> The output file, if not set, stdout is used


If you find a bug, but don't know how to fix it, I will need the source and generated CSS, plus a description of what is wrong.

Log an issue on the the issue tracker here on Github.

Note on Patches/Pull Requests

  • Fork the project on github.

  • Make your change or bug fix.

  • Add tests for the change. Better still write the tests first!


  • Commit, do not mess with rakefile, version, or history. (if you want to have your own version go ahead.)

  • Send me a pull request. Bonus points for topic branches.


See above. No tests, no play.

YUI tests use CSS in files. These are in the form 'name.css' and 'name.css.min' for 'css to process' and 'expected result'. The test suite will use any new files automatically. This is to make is simpler to pull any changes and test cases over from YUI.

The CSS Tidy module also uses the YUI tests to ensure complete compatibility when a compatible set of parameters are chosen.

Acknowledgements / Inspiration

This project has ported code from, or has used as inspiration the following:


Copyright © 2010 Richard Hulse. See LICENSE for details.

YUI CSS files in the test suite are Copyright © 2009, Yahoo! Inc. All rights reserved.