CSS Compressor to minify CSS files
Plugin based CSS Compressor.
$ npm install csscompressor
CSSCompressor may also be run in a browser environment.
var CSSCompressor = require 'csscompressor' ;// Compression with default optionsCSSCompressorcompress css ;
Modes are a way to use a predefined set of rule compressions. Each compressor starts off in the 'default' mode, and compressions can be turned off/on through the options object of the compress function, or updating the settings object.
var compressor = CSSCompressorMODE_DEFAULT ;compressorcompress css ;// Pass an object of compression options to update the default setcompressorcompress css'RGB to Hex': true'Hex to Color': false;// Or update the settings object directly.compressorsettingsupdate'RGB to Hex': true'Hex to Color': false;
To install the build script, add the global flag when installing through npm
$ npm install -g csscompressor$ cssc styles.css > styles.min.css// Or you can pipe your sheet$ cat styles.css | cssc > styles.min.css
By default, the script reads the files in order they are passed, concatenates them, compresses them, then sends it to stdout. For the most part, CSSCompressor is meant to belong in build scripts, but there are a few options that can be applied to the cli script
Adding new compression rules is fairly straightforward, to get started clone the repo and run initialization.
git clonecd CSSCompressor/make init
This will setup all third party modules and generated files. Once setup, just follow the checklist below before completion.
make test. All tests must pass.
CSSCompressor is built on modular based compressions. Each compression option has it's own function that finds the exact parts it wants to alter, and makes changes. With that, there are 4 types of custom rules that may be applied: addRule, addRuleBlock, addRuleSheet, and addValue. If you haven't yet, please go look at the CSSTree document before reading further to get an idea of what a branch looks like.
addRule is used for individual property/value compressions. For example, converting the color value 'black' to it's shorter hex code alternative '#000':
CSSCompressoraddRule 'Special Black to Hex Converter'if ruleproperty == 'color' && ruleparts 0 == 'black'ruleparts 0 = '#000';;
addRuleBlock is used for rule set compressions. A full branch is passed to the callback to be rendered for combination style compressions. For example, removing all color properties in a div block
CSSCompressoraddRuleBlock 'Remove All Color Properties in Divs'if ! branchselector || ! branchselectorexec /div$/i || ! branchrulesreturn;for var i = 0 rule; i < branchruleslength; i++rule = branchrules i ;if ruleproperty == 'color'branchrulessplice i 1 ;i--;;
addRuleSheet is used for full stylesheet compressions. The callback is passed the entire stylesheet AST in the branches array for inspection and compression. For example, to remove all comments:
CSSCompressoraddRuleSheet 'Remove Comments'for var i = 0 branch; ++i < brancheslength; i++branch = branches i ;if branchcommentbranchessplice i 1 ;i--;;
addValue is used for specific string value compressions. It works a little different in that there are no rules or blocks attached to the string, only a possible position. An example would be compressing color strings inside gradient values. This is the only compression that requires a return value
CSSCompressoraddValue 'Removing Leading Zeros on Numerics'var m = /^0+$/exec value ;if mreturn m 1 ;;
Every branch and rule in a CSSTree comes with a position object that contains a ton of useful information about it's parent object. In CSSCompressor's demo site, the logging function is used to mark the original position in the stylesheet for that compression.
compressor.log key msg position ;
The log method takes 3 parameters, an optional string name of the compression function used, a string message describing what was changed, and the position object of the affected rule/branch. The last parameter may optionally be an array of position objects if multiple branches/rules are affected. Taking the color example from above and adding a log line to it:
CSSCompressoraddRule 'Special Black to Hex Converter'if ruleproperty == 'color' && ruleparts 0 == 'black'ruleparts 0 = '#000';compressor.log "Converting black to it's hex alternative" ruleposition ;;
This compressor can also be used as part of a build process to force a cache bump on resources. The following example shows to to look for all url's and attaches the current unix timestamp to the query string of the url.
var now = Datenow rurl = /^url\(.*?\)$/;CSSCompressoraddValue 'Resource Refresh'if rurlexec valuevar query = valueindexOf '?' > -1 ? '&d=' + now : '&d=' + now;// "url(img/phone.png)" -> "url(img/phone.png?d=1366303414438)"return valuesubstr 0 valuelength - 2 + query + ')';;
The MIT LicenseCopyright (c) 2013 Corey HartPermission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included inall copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS INTHE SOFTWARE.