anikethsaha / postcss-lowercase-text

Postcss plugin to lowercase your CSS selectors and props safely

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

H1.HEADING{
  color: red;
}

here it will transform the H1 to h1 but not the class .HEADING

The values are parsed using postcss-value-parser and then their units are checked and converted to lowercase if required

postcss-lowercase-text's Issues

TODO

1. Unit transformation (done at v0.3.0)

h1 {
  border: 10PX;
}

⬇️

h1 {
  border: 10px;
}

2. refactoring the existing selector transformer using postcss-selector-parser (done at v0.4.0)