PostCSS plugin to format single or double colon notation on pseudo elements.
npm install postcss-pseudo-element-colonsPostCSS plugin to format single or double colon notation on pseudo elements.
Turn .fancy-style:before { into .fancy-style::before { and vice versa.
---
```
$ npm install postcss-pseudo-element-colons --save-dev
Note: This plugin is for PostCSS.
`shell`
$ postcss --use postcss-pseudo-element-colons style.css
js
var fs = require( 'fs' ),
postcss = require( 'postcss' ),
pseudoColons = require( 'postcss-pseudo-element-colons' );const
options = {
"selectors": [
"before",
"after",
"first-letter",
"first-line"
],
"colon-notation": "single"
};
fs.readFile( 'style.css', ( err, css ) => {
postcss( [pseudoColons( options )] )
.process( css, {
from: 'style.css',
to: '/style.css'
}).then( result => {
fs.writeFile( 'style.css', result.css,
( err ) => {
if ( err ) throw err;
});
}).catch( ( err ) => {
console.log( err );
});
});
`$3
Running default options:
`js
module.exports = function( grunt ) {
grunt.initConfig({
postcss: {
options: {
processors: [
require( 'postcss-pseudo-element-colons' )
]
},
dist: {
src: 'src/style.css',
dest: 'dist/style.css'
}
}
}); grunt.loadNpmTasks( 'grunt-postcss' );
};
`Running custom options:
`js
module.exports = function( grunt ) {
grunt.initConfig({
postcss: {
options: {
processors: [
require( 'postcss-pseudo-element-colons' )({
"selectors": [
"before",
"after"
],
"colon-notation": "single"
})
]
},
dist: {
src: 'src/style.css',
dest: 'dist/style.css'
}
}
}); grunt.loadNpmTasks( 'grunt-postcss' );
};
`$3
`js
var gulp = require( 'gulp' );
var postcss = require( 'gulp-postcss' );
var pseudoColons = require( 'postcss-pseudo-element-colons' );const
options = {
"selectors": [
"before",
"after",
"first-letter",
"first-line"
],
"colon-notation": "single"
};
gulp.task( 'postcss', function(){
gulp.src( 'src/style.css' )
.pipe( postcss( [ pseudoColons( options ) ] ) )
.pipe( gulp.dest( 'dist' ) );
});
`Options
$3
`json
{
"selectors": [
"before",
"after",
"first-letter",
"first-line"
],
"colon-notation": "double"
}
`$3
Accepts array of pseudo-elements which should have single or double colon syntax enforced in stylesheet.
Defaults to
["before", "after", "first-letter", "first-line"].$3
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
$3
Before enforcing the double colon option ( default ):
`css
.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:
`css
.fancy-style::first-line {
font-variant: small-caps;
}
.fancy-style::before, .fancy-style::after {
content: "";
}
.fancy-style::first-letter {
color: blue;
}
`$3
Before enforcing the single colon option:
`css
.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:
`css
.fancy-style:first-line {
font-variant: small-caps;
}
.fancy-style:before, .fancy-style:after {
content: "";
}
.fancy-style:first-letter {
color: blue;
}
``