PostCSS Pseudo-Element Colons
PostCSS plugin to format single or double colon notation on pseudo elements.
Turn .fancy-style:before {
into .fancy-style::before {
and vice versa.
Jump To Section
Installation
$ npm install postcss-pseudo-element-colons --save-dev
Note: This plugin is for PostCSS.
Usage
With postcss-cli
$ postcss --use postcss-pseudo-element-colons style.css
With Node.js:
var fs = postcss = pseudoColons = ; const options = "selectors": "before" "after" "first-letter" "first-line" "colon-notation": "single" ; fs;
grunt-postcss
Grunt withRunning default options:
module { grunt; grunt;};
Running custom options:
module { grunt; grunt;};
gulp-postcss
Gulp.js withvar gulp = ;var postcss = ;var pseudoColons = ; const options = "selectors": "before" "after" "first-letter" "first-line" "colon-notation": "single" ; gulp;
Options
Default Options:
selectors
Accepts array of pseudo-elements which should have single or double colon syntax enforced in stylesheet.
Defaults to ["before", "after", "first-letter", "first-line"]
.
colon-notation
Accepts "single"
or "double"
for the psudeo-element's colon notation.
"single"
produces syntax like: .fancy-style:before {
"double"
produces syntax like .fancy-style::before {
Examples
Enforced Double Colon
Before enforcing the double colon option ( default ):
After running the PostCSS plugin:
Enforced Single Colon
Before enforcing the single colon option:
After running the PostCSS plugin: