Postcss-lowercase-text NPM

postcss-lowercase-text

Postcss plugin to safely lowercase your CSS selectors and properties in order to minimize your gzip size

Installation

npm install postcss-lowercase-text --save

Usage

Refer the PostCSS Documentation for using this plugin.

Example

Selector

Input

A {
  color: red;
}

UL li {
  display : block
}

H1#heading {
  color: red;
}

.outerClass.INNERCLASS {
  color: red;
}

Output

a {
  color: red;
}

ul li {
  display : block
}

h1#heading {
  color: red;
}

.outerClass.INNERCLASS {
  color: red;
}

Property

Input

.classname {
  COLOR: red;
}

#someID {
  width: 100%;
}

Output

.classname {
  color: red;
}

#someID {
  width: 100%;
}

Units

Input

#main{
  border: 1PX solid black;  
}

img{
  rotate: 10DEG;  
}

Output

#main{
  border: 1px solid black;  
}

img{
  rotate: 10deg;  
}

AtRules

Input

@MEDIA screen and (min-width: 480px){
    body{
      COLOR: lightgreen;
    }
}
@CHARSET "iso-8859-15";

@IMPORT url("fineprint.css") print;

@NAMESPACE prefix url(http://www.w3.org/1999/xhtml);

@SUPPORTS (display: grid) {
	div {
		display: grid;
	}
}

Output

@media screen and (min-width: 480px){
    body{
      COLOR: lightgreen;
    }
}
@charset "iso-8859-15";

@import url("fineprint.css") print;

@namespace prefix url(http://www.w3.org/1999/xhtml);

@supports (display: grid) {
	div {
		display: grid;
	}
}

Rules supported

@keyframes Transform name , params, and props to lowercase
@counter-style Transform name , params, and props to lowercase
@namespace Transform name lowercase,
@import Transform nameto lowercase,
@font-face Transform name and props to lowercase,
@page Transform name and props to lowercase
@supports Transform name and props to lowercase
@media Transform name and props to lowercase
@charset Transform name to lowercase,
@document Transform name to lowercase,
@viewport Transform name and props to lowercase,

Explanation

All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. Like id and class are case sensitive so this plugin wont transform these things.

It will transform the selector where it is followed by id(s) or class(s)

example