Skip to content

Instantly share code, notes, and snippets.

@xem xem/LICENSE.txt forked from 140bytes/LICENSE.txt
Last active Dec 14, 2015

Embed
What would you like to do?

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

    • the function needed to be called twice on complex CSS files
    • and it removed spaces between classnames like ".class1 .class2"
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>
@atk

This comment has been minimized.

Copy link

atk commented Mar 14, 2013

Save 3 bytes:

function(c,r){return c[r='replace'](/\/\*(\s|.)*?\*\/|\s+/g,' ')[r](/^ *| *$|[ ;]*([{};,:!+>~\(\)]) */g,'$1')[r](/\)([^;{}])/g,') $1')}

Just a question: why '(\s|.)*' and not '[^]'?

@xem

This comment has been minimized.

Copy link
Owner Author

xem commented Apr 22, 2013

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.

@xem

This comment has been minimized.

Copy link
Owner Author

xem commented Apr 23, 2013

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.

@xem

This comment has been minimized.

Copy link
Owner Author

xem commented Apr 27, 2013

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.