PostCSS Pseudo-Element Casing
PostCSS plugin to format pseudo elements to uppercase or lowercase.
Turn .fancy-style::BEFORE {
into .fancy-style::before {
and vice versa.
Jump To Section
Installation
$ npm install postcss-pseudo-element-cases --save-dev
Note: This plugin is for PostCSS.
Usage
With postcss-cli
$ postcss --use postcss-pseudo-element-cases style.css
Note: This requires postcss-cli.
With Node.js:
var fs = require( 'fs' ),
postcss = require( 'postcss' ),
pseudoCases = require( 'postcss-pseudo-element-cases' );
const
options = {
"case": "upper"
};
fs.readFile( './style.css', ( err, css ) => {
postcss( [pseudoCases( options )] )
.process( css, {
from: './style.css',
to: './style.css'
}).then( result => {
fs.writeFile( './style.css', result.css,
function( err ) {
if ( err ) throw err;
});
}).catch( ( err ) => {
console.log( err );
});
});
Running default options:
module.exports = function( grunt ) {
grunt.initConfig({
postcss: {
options: {
processors: [
require( 'postcss-pseudo-element-cases' )
]
},
dist: {
src: 'src/style.css',
dest: 'dist/style.css'
}
}
});
grunt.loadNpmTasks( 'grunt-postcss' );
};
Running custom options:
module.exports = function( grunt ) {
grunt.initConfig({
postcss: {
options: {
processors: [
require( 'postcss-pseudo-element-cases' )({
"selectors": [
"before",
"after"
],
"case": "upper"
})
]
},
dist: {
src: 'src/style.css',
dest: 'dist/style.css'
}
}
});
grunt.loadNpmTasks( 'grunt-postcss' );
};
var gulp = require( 'gulp' );
var postcss = require( 'gulp-postcss' );
var pseudoCases = require( 'postcss-pseudo-element-cases' );
const
options = {
"case": "upper"
};
gulp.task( 'postcss', function(){
gulp.src( 'src/style.css' )
.pipe( postcss( [ pseudoCases( options ) ] ) )
.pipe( gulp.dest( 'dist' ) );
});
Options
Default Options:
{
"selectors": [
"before",
"after",
"first-letter",
"first-line",
"selection",
"spelling-error",
"grammar-error",
"backdrop",
"marker",
"placeholder",
"shadow",
"slotted",
"content"
],
"case": "lower"
}
selectors
Accepts array of pseudo-elements which should have casing enforced in your stylesheet.
case
Accepts "upper"
or "lower"
for the psudeo-element's casing.
"upper"
produces syntax like: .fancy-style::BEFORE {
"lower"
produces syntax like .fancy-style::before {
Examples
Enforced Lowercase
Before enforcing lowercase with the case option ( default ):
.fancy-style::FIRST-LINE {
font-variant: small-caps;
}
.fancy-style:Before, .fancy-style::AFTER {
content: "";
}
.fancy-style:first-letTer {
color: blue;
}
After running the PostCSS plugin:
.fancy-style::first-line {
font-variant: small-caps;
}
.fancy-style:before, .fancy-style::after {
content: "";
}
.fancy-style:first-letter {
color: blue;
}
Enforced Uppercase
Before enforcing uppercase with the case option:
.fancy-style::first-line {
font-variant: small-caps;
}
.fancy-style:BEFORE, .fancy-style:aFter {
content: "";
}
.fancy-style::First-letter {
color: blue;
}
After running the PostCSS plugin:
.fancy-style::FIRST-LINE {
font-variant: small-caps;
}
.fancy-style:BEFORE, .fancy-style:AFTER {
content: "";
}
.fancy-style::FIRST-LETTER {
color: blue;
}