css.md

• 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

test.css

/**
  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 */