Mini CSS Minifier 0.3
http://xem.github.com/miniMinifier/
Size: 140 characters.
Strong minification of CSS code (all the comments and the unnecessary spaces/tabs/line jumps and ";" are removed).
Includes a fix for IE that needs a space after some parenthesis (like url(...) no-repeat).
Fixes the two annoying 0.2 bugs
| function m(c){ | |
| return c | |
| .replace(/\/\*(\s|.)*?\*\/|\s+/g, ' ') // replace comments, whitespaces, tabs, line breaks with a space | |
| .replace(/^ *| *$|[ ;]*([{};,:!+>~\(\)]) */g, '$1') // trim spaces at the beginning and the end, trim spaces around [{};,:!+>~()] and trim ; before } | |
| .replace(/\)([^;{}])/g, ') $1'); // IE bug: keep a space after ) unless it's followed by [;{}] | |
| } |
| function m(c){return c.replace(/\/\*(\s|.)*?\*\/|\s+/g,' ').replace(/^ *| *$|[ ;]*([{};,:!+>~\(\)]) */g,'$1').replace(/\)([^;{}])/g,') $1')} |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE FUCK YOU WANT TO. |
| { | |
| "name": "miniCssMinifier", | |
| "description": "A mini CSS minifier.", | |
| "keywords": [ | |
| "css", | |
| "minify", | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <title>Foo</title> | |
| <div>Expected value: <b>*{margin:0;padding:0}html{background:#1F3D5B;font:normal 14px Calibri,Arial}</b></div> | |
| <div>Actual value: <b id="ret"></b></div> | |
| <script> | |
| // write a small example that shows off the API for your example | |
| // and tests it in one fell swoop. | |
| var myFunction = function(c){return c.replace(/\/\*(\s|.)*?\*\/|\s+/g,' ').replace(/^ *| *$|[ ;]*([{};,:!+>~\(\)]) */g,'$1').replace(/\)([^;{}])/g,') $1')} | |
| document.getElementById( "ret" ).innerHTML = myFunction( | |
| "/* Style */ | |
| * { margin: 0; padding: 0; } | |
| html { background: #1F3D5B; font: normal 14px Calibri, Arial; } | |
| " | |
| ) | |
| </script> |
I tried to go further:
If we want to keep old IE support for the minified code, the minifier can be as light as 120 bytes if the function is written like this:
function m(c){return c.replace(/^ | $|\/\*.*?\*\/|[ ;]*([{};,:!+>~\(\)]) */g,'$1').replace(/\s+|(\))(?![;,{}])/g,'$1 ')}
but it has to be called at least 2/3 times to remove everything, like so:
css = m(m(m(css)));
We can also skip old IE compatibility and be as light as 103 bytes:
function m(c){return c.replace(/\s+/g,' ').replace(/^ | $|\/\*.*?\*\/|[ ;]*([{};,:!+>~\(\)]) */g,'$1')}
but it has to be called multiple times too.
The lightest we can do without needing multiple calls of the function is 109 bytes (without old IE support):
function m(c){return c.replace(/((\/\*[^]*?\*\/)|\s)+/g,' ').replace(/^ | $|[ ;]*([{};,:!+>~\(\)]) */g,'$1')}
I didn't manage to make one-call IE-friendly version lighter than 134 bytes yet.
Hello, miniMinifier is now in v0.6, with lots of improvements and thanks to atk for his help.
There's a dedicated page: http://xem.github.io/miniMinifier/
And a new gist for it: https://gist.github.com/xem/5472247
Thanks :)
Hello atk,
Thanks for this technique that minifies the replace function!
I don't understand what '[^]' means but it seems to do the job! (you forgot a "", it has to be [^] to work)
Thanks to you, 3 + 3 bytes were saved.
so you managed to do better than the 135bytes version hidden in my site's source code (https://github.com/xem/miniMinifier/blob/gh-pages/index.html#L81-94). This version got rid of the "(\s|.)" part too.
I'll update all that tomorrow.