README
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
, andprops
to lowercase - @counter-style Transform
name
,params
, andprops
to lowercase - @namespace Transform
name
lowercase, - @import Transform
name
to lowercase, - @font-face Transform
name
andprops
to lowercase, - @page Transform
name
andprops
to lowercase - @supports Transform
name
andprops
to lowercase - @media Transform
name
andprops
to lowercase - @charset Transform
name
to lowercase, - @document Transform
name
to lowercase, - @viewport Transform
name
andprops
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