postcss-pseudo-element-colons

    1.0.2 • Public • Published

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

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

    Install

    npm i postcss-pseudo-element-colons

    DownloadsWeekly Downloads

    161

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • time