Skip to content

Instantly share code, notes, and snippets.

@xem xem/css.md
Last active Nov 14, 2017

Embed
What would you like to do?
  • Don't modify strings (content: "...", font-family: '...')
  • Remove all CSS comments (ex: /* ... */ )
  • Remove all unnecessary spaces, tabs and line breaks (ex: around + > ~ ; : , ( ) { } /)
    • Keep spaces before : in selectors (ex: * :before != *:before)
    • Keep spaces around + and - in calc(...) (but not in nth-child and nth-of-type)
  • Remove all unnecessary ; (ex: a{color:red;})
  • Remove all unnecessary * in CSS selectors (ex: *:before => :before)
  • Remove leading and trailing zeros (ex: 0.1%, 1.0%, 0.0px)
  • Remove units after zero (ex: 0px 0rem 0% 0turn 0vmax 0dpi)
    • Keep % after zero in parenthesis (ex: hsl(123,0%,0%))
  • Convert -0 in 0
  • Convert rgba colors in rgb (ex: rgba(255, 0, 0, 1) => rgb(255, 0, 0))
  • Convert rgba(0,0,0,0) in transparent
  • Convert rgb colors in hex (ex: rgb(255, 0, 0) => #FF0000)
  • Minify 6-digit hex colors to 3-digit hex colors if possible (ex: #FF0000 => #F00)
  • Replace hex colors with shorter names (ex: #F00 => red)
  • Remove empty rules and empty media queries
  • Remove unnecessary quotes in url("...") or font-family: "...", but not content: "...")
  • Replace font-weight values (ex: normal => 400, bold => 500)
  • Simplify nth-of-type and nth-child:
    • nth-child(1) => first-child
    • nth-child(even) => nth-child(2n)
    • nth-child(2n+1) / nth-child(2n-1) => nth-child(odd)
  • Remove http(s): in URLs
/**
Mini CSS Minifier 2017
test file
**/
/* remove spaces and line breaks around "{" and "}" */
.braces {
color:#001
}
/* remove spaces after ":" */
.colon { color: #002 }
/* remove spaces around ";" */
.semicolon { color: #003 ; background: #003 }
/* remove spaces around "," */
.class1 , .class2 { color: #004 }
/* remove spaces around "+" */
.class1 + .class2 { color: #005 }
/* remove spaces around ">" */
.class1 > .class2 { color: #006 }
/* remove spaces around "~" */
.class1 ~ .class2 { color: #007 }
/* remove spaces around "(" and ")" */
.parenthesis { background: url ( bg.jpg ), url ( "bg.png" ) #008 }
/* remove spaces before "@"and "!" */
@media (screen) { a { color: #009 !important } }
@media (print) { a { color: #009 !important } }
/* remove semicolon before "}" */
.trailing_semicolon { color: #010; }
/* Remove unnecessary "*" before ":" or ";" or after "{" */
*, *:before, *:after { color: #011; }
/* Preserve space before ":" in selectors */
body *::placeholder :first { ;;; color: #012 ; ; ; }
/* Remove spaces before ":" when it follows ""}"
:first { color: #013 }
/* Remove comments in rules */
.comment { color: #014; /* comment */ color: #014 /*
multiline comment
*/ ; }
/* don't remove spaces between selector parts */
a .b #c d { color: #015; }
/* Keep one space around space-separated values */
.digits { margin: 0 -2px 0% 0 ; box-shadow: 0 2px #000 inset ; }
/* remove leading and trailing zeros */
.leading_zero { border: 0.11em; margin: 11.0px 0.11px 0.011px 0.0px }
/* remove units after zero */
.zero_unit {
width: 0px;
width: 0in;
width: 0cm;
width: 0mm;
width: 0em;
width: 0rem;
width: 0pt;
width: 0pc;
width: 0ex;
width: 0ch;
width: 0vw;
width: 0vh;
width: 0vmin;
width: 0vmax;
width: 0deg;
width: 0rad;
width: 0grad;
width: 0turn;
width: 0%;
}
@media screen and (min-resolution : 0dpi) { .example { color: red; } }
/* More tests with zeros */
.more_zero { border: 0.11em; margin: .0px 0px 0 0.0 0.0px; padding: .0 1.0px 1.0em 1%; }
/* don't remove "%" after "0" in these cases (but still remove ".0") */
.zero_percent { background: hsl(111, 0%, 0%); color: hsl(222, 0.0%, 1.0%); }
@keyframes zero_percent {
0% { background: red }
}
/* Remove "-" before 0, and "+" before any number */
.sign { margin: -0 +0 -10px +10px; padding: -0px -0.0px -.0px +0px; }
/* Convert rgb in hexadecimal */
.rgb { color: rgb(0, 11, 222); background: RGB(111, 22, 3) ; }
/* Minify haxadecimal colors (where applicable) */
.hexadecimal { color: #123456; background: #113355 }
/* Convert RGB to minified hexadecimal colors (where applicable) */
.rgb + .hexadecimal { color: rgb(51, 102, 153) }
/* Remove empty rules / media queries / both */
.empty { /* nothing */ ; /* still nothing */ ; }
@media (min-resolution: 100dpi) { }
@media (min-resolution: 100dpi) {
.empty { }
}
/* For IE < 9: keep a space between closing parenthesis and letters */
.ie { background: url(bg.jpg) no-repeat }
/* Don't alter strings, like content */
.content:after { content: "lol; a ( b ) * { : } "}
.content:after { content: 'lol; a ( b ) * { : } '}
/* Remove URL/font-family quotes */
.url { background: url("http://test/test/png") }
.url { background: url('./test.png') }
.font { font-family: "Arial";}
/* Replace bold names with numbers (normal: 400, bold: 500) */
.weight { font-weight: normal }
.weight { font-weight: bold }
/* Replace hex colors with names */
.azure { color: #F0FFFF; color: #f0ffff; }
.beige { color: #f5f5bc }
.bisque { color: #ffe4c4 }
.brown { color: #a52a2a }
.coral { color: #ff7f50 }
.gold { color: #FFD700; }
.gray{ color: #808080; }
.grey { color: #808080; }
.green { color: #008000 }
.indigo { color: #4b0082 }
.ivory { color: #4b0082 }
.khaki { color: #f0e68c }
.linen { color: #faf0e6 }
.maroon { color: #800000 }
.navy { color: #000080 }
.olive { color: #808000 }
.orange { color: #FFA500 }
.orchid { color: #DA70D6 }
.peru { color: #CD853F }
.pink { color: #FFC0CB }
.plum { color: #DDA0DD }
.purple { color: #800080 }
.red { color: #FF0000; }
.red { color: #F00; }
.salmon { color: #FA8072 }
.sienna { color: #A0522D }
.silver { color: #C0C0C0 }
.snow { color: #FFFAFA }
.tan { color: #D2B48C }
.teal { color: #008080 }
.tomato { color: #FF6347 }
.violet { color: #EE82EE }
.wheat { color: #F5DEB3 }
/* RGB => HEX6 => HEX3 => name */
.red { color: rgb(255, 0, 0) }
/* Remove space before ":" in rules only (not selectors) */
.colon :after { color : #999 }
/* Keep space after ")" for old IE except before ";" or "}" */
.ie { background : url( ie.png ) #999 }
.ie { background : url( ie.png ) no-repeat }
.ie { background : url( ie.png ) ; color: #999 }
.ie { background : url( ie.png ) ; }
.ie { background : url( ie.png ) }
/* Remove spaces before # in properties (but not in selectors) */
.test1 #id { box-shadow: 1px 1px #111}
/* More spaces to remove */
@media screen and (monochrome) and not (min-aspect-ratio : 1 / 1) { .example { color: red; } }
@media (min-width: 500px) { @media (min-height: 500px) { :root { background: lime; } } }
\64 \69 \76 { \63 \6f \6c \6f \72 : \72 \67 \62 \61 \28 \32 \35 \35 \2c \30 \2c \30 \2c \2e \37 \35 \29 }
/* More spaces not to remove (around "+" and "-" in calc) */
.calc { width: calc((1px + 1px - 10% + 2vmax) / 2) }
/* remove leading zeros */
.leading_zero { border: 0.11em }
/* Convert rgba in rgb (where applicable) */
.rgba { color: rgba(255, 0, 0, 1); }
/* Convert rgb in hexadecimal */
.rgb { color: rgb(0, 11, 222); background: RGB(111, 22, 3) }
/* Minify haxadecimal colors (where applicable) */
.hexadecimal { color: #123456; background: #113355 }
/* Convert RGB to minified hexadecimal colors (where applicable) */
.rgb + .hexadecimal { color: rgb(51, 102, 153) }
/* Remove empty rules */
.empty { /* nothing */ ; /* still nothing */ ; }
/* For IE < 9: keep a space between closing parenthesis and letters */
.ie { background: url(bg.jpg) no-repeat }
/* Don't alter strings, like content */
.content:after { content: "lol; a ( b ) * { } "}
.content:after { content: 'lol; a ( b ) * { } '}
/* Remove URL/font-family quotes */
.url { background: url("http://test/test/png") }
.url { background: url('./test.png') }
.font { font-family: "Arial"; }
/* Replace bold names with numbers (normal: 400, bold: 500) */
.weight { font-weight: normal }
.weight { font-weight: bold }
/* Remove space before ":" in rules only (not selectors) */
.colon :before { color : #999 }
/* Replace nth-*(1) with first-* */
a:nth-child(1) { color: #fff }
a:nth-of-type(1) { color: #fff }
/* Simplify numeric and even-odd values */
a:nth-of-child(even) { color: #fff } /* 2n */
a:nth-of-child(2n+1) { color: #fff } /* odd */
a:nth-of-child(2n-1) { color: #fff } /* odd */
/* remove trailing spaces */
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.