Postcss plugin to lowercase your CSS selectors and props safely
Postcss plugin to safely lowercase your CSS
selectors and properties in order to minimize your gzip size
npm install postcss-lowercase-text --save
Refer the PostCSS Documentation for using this plugin.
A {
color: red;
}
UL li {
display : block
}
H1#heading {
color: red;
}
.outerClass.INNERCLASS {
color: red;
}
a {
color: red;
}
ul li {
display : block
}
h1#heading {
color: red;
}
.outerClass.INNERCLASS {
color: red;
}
.classname {
COLOR: red;
}
#someID {
width: 100%;
}
.classname {
color: red;
}
#someID {
width: 100%;
}
#main{
border: 1PX solid black;
}
img{
rotate: 10DEG;
}
#main{
border: 1px solid black;
}
img{
rotate: 10deg;
}
@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;
}
}
@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
name
, params
, and props
to lowercasename
, params
, and props
to lowercasename
lowercase,name
to lowercase,name
and props
to lowercase,name
and props
to lowercasename
and props
to lowercasename
and props
to lowercasename
to lowercase,name
to lowercase,name
and props
to lowercase,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