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
• 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, so you would need to install that as well.

Usage

With postcss-cli

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

With Node.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,
        function( err ) {
          if ( err ) throw err;
        });
    }).catch( ( err ) => {
      throw err;
    });
});

Grunt with grunt-postcss

Running default options:

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:

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' );
};

Gulp.js with gulp-postcss

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

Default Options:

{
  "selectors": [
      "before",
      "after",
      "first-letter",
      "first-line"
  ],
  "colon-notation": "double"
}

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 ):

.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 Single Colon

Before enforcing the single colon 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;
}