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.

$3

- Installation
- Usage
- postcss-cli
- node.js
- grunt.js
- gulp.js
- Options
- Defaults
- selectors
- colon-notation
- Examples
- Enforced Double Colon
- Enforced Single Colon

---

Installation

``
$ npm install postcss-pseudo-element-colons --save-dev
`
Note: This plugin is for PostCSS.

Usage

$3

`shell
$ postcss --use postcss-pseudo-element-colons style.css
`

$3


`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;
}
``