lastzero/css-optimizer

CSS Optimizer - Minifies stylesheets by removing duplicates and combining selectors

v1.0.0 2015-11-25 05:56 UTC

This package is auto-updated.

Last update: 2021-07-29 01:17:12 UTC


README

Build Status Latest Stable Version License

Minifies stylesheets by removing duplicates and combining selectors - mostly safe and very efficient. This package was developed as a "quick win" to optimize the CSS of an existing commercial Web site, as the CSS contained many duplicates and similar selectors created by a CSS precompiler. It was published in the hope to help others in the same situation.

Note: The optimization is performed using simple (and fast) string functions - it's not a real CSS parser. It requires well formed CSS without inline comments (don't worry, you can use the minifyCss() method for that, see usage).

Warning: The order of selectors in your CSS does play a role and the "further down" one does in fact win when the specificity values are exactly the same. If your CSS relies on order to work, this optimization will obviously break it. See also https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Specificity

Input:

body { foo:bar; too: me; } 
body { baz:foo; }
body { foo: new }
div.test { border: 1px solid black; }
div.other { border: 1px solid black}

Output:

body{baz:foo;foo:new;too:me}div.other,div.test{border:1px solid black}

Usage:

$optimizer = new \CssOptimizer\Css\Optimizer;

$inputCss = 'body { foo:bar; too: me;} body { baz:foo; } body { foo: new }
div.test { border: 1px solid black; }
div.other { border: 1px solid black} ';

$minifiedCss = $optimizer->minifyCss($inputCss);
$optimizedCss = $optimizer->optimizeCss($minifiedCss);

print_r($optimizer->getCounts());

Assetic filter

This library comes with a ready-to-use Assetic filter (for Symfony2). Please use a pre-filter like CssMinFilter.

Usage:

$filter = new \CssOptimizer\Assetic\Filter\CssOptimizeFilter;
$asset = new StringAsset($inputCss);
$asset->ensureFilter($filter);
$outputCss = $asset->dump();

Composer

If you are using composer, simply add "lastzero/css-optimizer" to your composer.json file and run composer update:

"require": {
    "lastzero/css-optimizer": "*"
}