Simple regex CSS minifier/compressor
PS: I hate to use different frameworks and libraries where they are not needed.
So, I want propose my easiest way that allows to minify and simplify CSS.
Features
- Remove all comments
- Remove all empty declarations
- Remove all whitespaces that are unnecessary
(including around the meta characters, such as { } ( ) : ; > ~ + etc.)
- Remove the last ";" in a rule declaration
- Remove leading zero in float value. For example: 0.5 > .5
- Convert HEX color to short value when it's possible. For example: #CCCCCC > #CCC
- Remove for all zero values units (such as %,px,pt,pc,rem,em,ex,cm,mm,in) that are unnecessary (excluding CSS keyframes). For example: border: 1px 0px > border:1px 0
The code
function minifyCSS (css) {
return String(css)
.replace(/\/\*[\s\S]*?\*\//g, ' ') // Comments
.replace(/\s+/g, ' ') // Extra spaces
.replace(/([\(\)\{\}\:\;\,]) /g, '$1') // Extra spaces
.replace(/ \{/g, '{') // Extra spaces
.replace(/\;\}/g, '}') // Last semicolon
.replace(/ ([+~>]) /g, '$1') // Extra spaces
.replace(/([^{][,: \(\)]0)(%|px|pt|pc|rem|em|ex|cm|mm|in)([, };\(\)])/g, '$1$3') // Units for zero values
.replace(/([: ,=\-\(])0\.(\d)/g, '$1.$2') // Lead zero for float values
.replace(/([^\}]*\{\s*?\})/g, '') // Empty rules
.replace(/([,: \(])#([0-9a-f]{6})/gi, function(m, pfx, clr) { // HEX code reducing
if (clr[0] == clr[1] && clr[2] == clr[3] && clr[4] == clr[5]) return pfx + '#' + clr[0] + clr[2] + clr[4];
return pfx + '#' + clr;
});
}