-
Converts at-rule one liner url's to strings
Before:
@import url(other.css)
After:
@import "other.css"
-
Combines border directionals into single border property
Before:
.example {
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
After:
.example {
border: 1px solid red;
}
-
Combines border radius directionals into their shorter alternative
Before:
.example {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
After:
.example {
border-radius: 10px;
}
-
Converts shorthand border radius properties
Before:
.example {
border-radius: 10px 10px 10px 10px;
}
After:
.example {
border-radius: 10px;
}
-
Combine border & outline expanded properties into shorthand
Before:
.example {
border-top-width: 2px;
border-top-style: dashed;
border-top-color: blue;
}
After:
.example {
border-top: 2px dashed blue;
}
-
Compresses individual units in calc function, and removes whitespace
Before:
.example {
width: calc( 100% - 10.0px );
}
After:
.example {
width: calc(100% - 10px);
}
-
Converts class attributes to class selectors
Before:
[class='example'] {
color: red;
}
After:
.example {
color: red;
}
-
Converts colors to shorter hex representation
Before:
.example {
color: aliceblue;
}
After:
.example {
color: #f0f8ff;
}
-
Removes repeated selectors separated by commas
Before:
html body, html body {
color: red;
}
After:
html body {
color: red;
}
-
Combines rule sets with matching rules
Before:
.example {
color: red;
font-size: 2px;
}
.match {
color: red;
font-size: 2px;
}
After:
.example, .match {
color: red;
font-size: 2px;
}
-
Combines rule sets with matching selectors
Before:
.example {
border: 1px dashed green;
}
.example {
cursor: pointer;
}
After:
.example {
border: 1px dashed green;
cursor: pointer;
}
-
Removes multiply defined properties
Before:
.example {
color: red;
margin: 10px;
color: green;
}
After:
.example {
margin: 10px;
color: green;
}
-
Removes properties that don't have values
Before:
.example {
color: red;
font-size:;
}
After:
.example {
color: red;
}
-
Combines font declarations into single property
Before:
.example {
font-weight: bold;
font-size: 12px;
font-family: Helvetica;
}
After:
.example {
font: bold 12px Helvetica;
}
-
Removes quotes around font family names
Before:
.example {
font-family: "Arial Black";
}
After:
.example {
font-family: Arial Black;
}
-
Converts font weight strings to their numeric counterparts
Before:
.example {
font-weight: normal;
}
After:
.example {
font-weight: 400;
}
-
General whitespace removal and unit compression of css functions
Before:
.example {
background: new-rule( top, 10px, 0.5px, 15.5, foo );
}
After:
.example {
background: new-rule(top,10px,.5px,15.5,foo);
}
-
Breaks down gradient properties and runs compressions on individual parts
Before:
.example {
background: linear-gradient( top, black 0%, #dddddd 100% );
}
After:
.example {
background: linear-gradient(top,#000 0%,#ddd 100%);
}
-
Converts hex codes to short color names
Before:
.example {
color: #fffff0;
}
After:
.example {
color: ivory;
}
-
Converts hex codes to short safe color names
Before:
.example {
color: #000080;
}
After:
.example {
color: navy;
}
-
Converts HSL to Hex code
Before:
.example {
color: hsl(312,54%,68%);
}
After:
.example {
color: #d981c8;
}
-
Converts HSLA to HSL when opacity is 1
Before:
.example {
color: hsla(312,54%,68%,1);
}
After:
.example {
color: hsl(312,54%,68%);
}
-
Converts id attributes to id selectors
Before:
[id='example'] {
color: red;
}
After:
#example {
color: red;
}
-
Removes unecessary leading zeroes from values
Before:
.example {
left: 0.2px;
}
After:
.example {
left: .2px;
}
-
Combines list-style properties into their shorter alternative
Before:
.example {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
After:
.example {
list-style: square outside none;
}
-
Lowercases hex color values for better gzip compression
Before:
.example {
color: #ABCDEF;
}
After:
.example {
color: #abcdef;
}
-
Lowercases property names for better chance at compression during gzip
Before:
.example {
COLOR: red;
}
After:
.example {
color: red;
}
-
Converts element selectors to lowercase
Before:
BODY {
color: red;
}
After:
body {
color: red;
}
-
Combines margin and padding directionals into their shorter alternative
Before:
.example {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
After:
.example {
margin: 5px;
}
-
Combines Margin/Padding shorthand directionals
Before:
.example {
margin: 3px 3px 3px 3px;
}
After:
.example {
margin: 3px;
}
-
Converts none values to zeroes for allowed properties
Before:
.example {
border: none;
}
After:
.example {
border: 0;
}
-
Moves charset and import declarations to the top of the stylesheet (to help with concatenation)
Before:
.example {
color: red;
}
@charset 'utf-8';
@import 'home.css';
After:
@charset 'utf-8';
@import 'home.css';
.example {
color: red;
}
-
Compressing rect shape declarations
Before:
.example {
clip: rect( 1.0px, 2.0px, 3.0px, 4.0px );
}
After:
.example {
clip: rect(1px,2px,3px,4px);
}
-
Converts RGB to Hex code
Before:
.example {
color: rgb(214,123,214);
}
After:
.example {
color: #d67bd6;
}
-
Converts RGBA to RGB when opacity is 1
Before:
.example {
color: rgba(214,123,214,1.0);
}
After:
.example {
color: rgb(214,123,214);
}
-
Converts long hex to short hex
Before:
.example {
color: #000000;
}
After:
.example {
color: #000;
}
-
Sorts property-values for a better chance at compression during gzip
Before:
span, b, div, a {
color: red;
}
After:
a, b, div, span {
color: red;
}
-
Sorts property-values for a better chance at compression during gzip
Before:
.example {
padding: 10px;
background: green;
margin: 10px;
color: red;
}
After:
.example {
background: green;
color: red;
margin: 10px;
padding: 10px;
}
-
Removes entire selector before last ID selector
Before:
html body #myid div {
color: red;
}
After:
#myid div {
color: red;
}
-
Removes all comments from style sheet, with the exception of comments that are prefixed with a bang '/*!'
Before:
/*
Multi Line Comment
*/
.example {
color: red;
}
After:
.example {
color: red;
}
-
Removes all branches with no rules
Before:
.example {
color: red;
}
.example {}
body {
font: Helvetica;
}
After:
.example {
color: red;
}
body {
font: Helvetica;
}
-
Removes unecessary trailing zeroes from values
Before:
.example {
width: 5.0px;
}
After:
.example {
width: 5px;
}
-
Remove attribute quotes when they are not needed
Before:
.example[attr='nospace'] {
color: red;
}
After:
.example[attr=nospace] {
color: red;
}
-
Removes unecessary suffix from zero unit values
Before:
.example {
margin: 0px;
}
After:
.example {
margin: 0;
}
-
Removes quotes around url wrappers
Before:
.example {
background-image: url("http://www.google.com/image.png");
}
After:
.example {
background-image: url(http://www.google.com/image.png);
}