Skip to content
This repository has been archived by the owner on Mar 22, 2019. It is now read-only.

Home

Jump to bottom
Kyo Nagashima edited this page Jun 25, 2016 · 28 revisions

A CSS minifier of PostCSS, by PostCSS, for PostCSS

Minification Details

Also see /test/ directory.

White Space

Minify or remove white spaces as possible.

.foo,
    .bar {
  display             :   block  ;
   }

.baz +  .qux {
  display: block !important;
  background-image: url( "baz.png"   );
}

becomes:

.foo,.bar{display:block}.baz+.qux{display:block!important;background-image:url(baz.png)}

Comment

Remove comments except /*! ... */.

/* This comment will be removed. */
/*! This comment will NOT be removed. */

becomes:

/*! This comment will NOT be removed. */

Value

content Property

Don't touch content property value.

.foo::before {
  content: " Lorem  ipsum   dolor   sit  amet. ";
}

becomes:

.foo::before{content:" Lorem  ipsum   dolor   sit  amet. "}

Font Family Quote

Unquote font-family values as possible.

.foo {
  font-family: "Helvetica Neue", "Arial", "Font 01", sans-serif;
}

becomes:

.foo{font-family:Helvetica Neue,Arial,"Font 01",sans-serif}

Leading Zeros in Number

Omit leading zeros in number.

.foo {
  top: 00102px;
}

becomes:

.foo {
  top: 102px;
}

Zero Value Unit

Omit unit if value is 0.

.foo {
  margin: 0px;
}

becomes:

.foo{margin:0}

Shortest Unit for Zero Value

Shorten unit if value is 0.

.foo {
  transition-duration: 0ms;
}

becomes:

.foo{transition-duration:0s}

Decimal with Zeros

Omit leading and trailing zeros from decimal number.

.foo {
  font-size: 01.8750em;
}

becomes:

.foo{font-size:1.875em}

Color

Convert colors to its shortest form.

.foo {
  border-color: #f00;
  color: rgb(36, 36, 36);
  background-color: hsl(0, 0%, 93.5%);
  outline-color: rgba(0, 0, 0, 0);
}

becomes:

.foo{border-color:red;color:#242424;background-color:#eee;outline-color:transparent}

URL Quote

Unquote inside url() notation if possible. If not possible, keep original style of quotation mark.

.foo {
  background-image: url("foo.png");
  list-style-image: url("/~john/foo.png");
  cursor: url('/~john/foo.cur');
}

becomes:

.foo{background-image:url(foo.png);list-style-image:url("/~john/foo.png");cursor:url('/~john/foo.cur')}

Multiple Zeros

Gather zeros into one zero.

.foo {
  margin: 0 0 0 0;
}

becomes:

.foo{margin:0}

Multiple Values

Gather values as possible.

.foo {
  margin: 1px 2px 3px 2px;
  padding: 1px 2px 1px 2px;
  border-color: #000 #000 #000 #000;
}

becomes:

.foo{margin:1px 2px 3px;padding:1px 2px;border-color:#000}

Font Weight in Number

Replace normal and bold in font-weight with 400 and 700.

.foo {
  font-weight: normal;
}

.bar {
  font-weight: bold;
}

becomes:

.foo{font-weight:400}.bar{font-weight:700}

Shortest unit

Convert to shorter unit if possible.

.foo {
  pitch: 48000Hz;
  transform-duration: 1000ms;
  translate-function: rotate(100grad);
}

becomes:

.foo{pitch:48kHz;transition-duration:1s;transition-timing-function:rotate(90deg)}

Ruleset

Last Semicolon

Omit semicolon of last declaration in ruleset.

.foo {
  margin: 0;
  padding: 0;
}

becomes:

.foo{margin:0;padding:0}

Empty Ruleset

Remove empty ruleset.

.foo {
}

.bar {
  display: block;
}

becomes:

.bar{display:block}

Empty Selector

Remove rulesets with empty selector.

{
  display: block;
}

.foo {
  display: block;
}

becomes:

.foo{display:block}

Invalid Keyframe

Remove invalid keyframe selector.

@keyframes foo {
  to {
    top: 100px;
  }

  bar, 50% {
    top: 50px;
  }

  -25% {
    top: 999px;
  }
}

becomes:

@keyframes foo{to{top:100px}50%{top:50px}}

Duplicate Selector

Remove duplicate selectors.

.foo,
.bar,
.foo {
  display: block;
}

becomes:

.bar,.foo{display:block}

Duplicate Declaration

Remove duplicate declarations.

.foo {
  color: rgb(255, 255, 255);
  color: #ffffff;
  color: rgba(255, 255, 255, 0);
}

becomes:

.foo{color:#fff;color:rgba(255,255,255,0)}

Unnecessary Colon

Remove unnecessary colon from some pseudo elements (::before, ::after, ::first-line, and ::first-letter).

.foo::before {
  color: black;
}

becomes:

.foo:before{color:black}

Erroneous Property

Remove a declaration that has erroneous property.

.foo {
  --Custom: black;
  color: black;
  col!or: red;
}

becomes:

.foo{--Custom:black;color:black}

At-Rule

Invalid @import

Remove all invalid @import rules.

@import "foo.css";
@import "bar.css";

.baz {
  display: block
}

@import "qux.css";

becomes:

@import"foo.css";@import"bar.css";.baz{display:block}

Invalid @charset

Keep first valid @charset only, remove rest.

@charset "UTF-8";

.foo {
  display: block;
}

@charset "UTF-8";

.bar {
  display: block;
}

becomes:

@charset "UTF-8";.foo{display:block}.bar{display:block}

Last Semicolon

Omit last semicolon of last declaration in at-rule block (such as @font-face).

@font-face {
  font-family: "Foo";
  src: url("foo.woff") format("woff");
}

becomes:

@font-face{font-family:Foo;src:url("foo.woff") format("woff")}

Invalid @font-face Block

Remove @font-face block without required descriptors (both src and font-family).

@font-face {
  font-family: "Foo";
  src: url("foo.woff") format("woff");
}

@font-face {
  font-family: "Bar";
  font-weight: 400;
}

@font-face {
  src: url("baz.woff") format("woff");
  font-weight: 400;
}

becomes:

@font-face{font-family:Foo;src:url(foo.woff) format("woff")}

Default @font-face Descriptor

Remove @font-face descriptor with default value.

@font-face {
  font-family: "Foo";
  font-style: normal;
  font-weight: 400;
  src: url("foo.woff") format("woff");
}

becomes:

@font-face{font-family:Foo;src:url(foo.woff) format("woff")}

Empty At-Rule Block

Remove all empty at-rule block.

.foo {
  display: block;
}

@media (min-width:99px) {
  .foo {}
}

@page :left {
}

becomes:

.foo{display:block}

URL in @import

Use quoted string instead of url() notation in @import.

@import url("foo.css");
@import url(bar.css);

becomes:

@import"foo.css";@import"bar.css"

URL in @namespace

Use quoted string instead of url() notation in @namespace.

@namespace url("foo.css");
@namespace bar url(bar.css);

becomes:

@namespace"foo.css";@namespace bar"bar.css"

@keyframes Animation Name

Unquote animation name in @keyframes.

@keyframes "foo" {
  from {
    top: 0px;
  }

  to {
    top: 100px;
  }
}

becomes:

@keyframes foo{from{top:0}to{top:100px}}
Clone this wiki locally