This project contains tools for optimizing and compressing CSS files.
It contains two tools (ported to Ruby from the originals):
-
YUI CSS compressor
-
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)
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.
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.
-
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;
becomes:
padding:10px 20px 50px;
padding:10px 20px 10px 20px;
becomes:
padding:10px 20px;
merges the following where ALL individual declaration are made in a rule
margin padding border-color border-style border-width
e.g
padding-top:10px;
padding-right:20px;
padding-bottom:50px;
padding-left:45px;
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:
.class1{padding:5px}
and later:
.class2{padding:5px}
this can be shortened to:
.class1,.class2{padding:5px}
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.
-
add a timestamp
For documentation purposes.
-
more shorthand optimisations
Also font and background optimisation.
-
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.
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.
-
Fork the project on github.
-
Make your change or bug fix.
-
Add tests for the change. Better still write the tests first!
NB: I WILL NOT ACCEPT PATCHES WITHOUT GOOD TESTS! :-)
-
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.
This project has ported code from, or has used as inspiration the following:
-
YUI Compressor (developer.yahoo.com/yui/compressor/)
-
CSS Min (Ryan Grove) (github.com/rgrove/cssmin)
-
Rainpress (Uwe L. Korn) (github.com/sprsquish/rainpress)
-
CSS Tidy (Florian Schmitz) (csstidy.sourceforge.net/)
-
Ruby CSS Parser (Alex Dunae) (github.com/alexdunae/css_parser)
Copyright © 2010 Richard Hulse. See LICENSE for details.
YUI CSS files in the test suite are Copyright © 2009, Yahoo! Inc. All rights reserved.