PostCSS Pseudo-Element Casing

PostCSS plugin to format pseudo elements to uppercase or lowercase.

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
  • case
• Examples
  • Enforced Lowercase
  • Enforced Uppercase

---

Installation

$ npm install postcss-pseudo-element-cases --save-dev

Note: This plugin is for PostCSS.

Usage

With postcss-cli

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

Note: This requires postcss-cli.

With Node.js:

var fs           = require( 'fs' ),
    postcss      = require( 'postcss' ),
    pseudoCases  = require( 'postcss-pseudo-element-cases' );

const
  options = {
    "case": "upper"
  };

fs.readFile( './style.css', ( err, css ) => {
  postcss( [pseudoCases( 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 ) => {
      console.log( err );
    });
});

Grunt with grunt-postcss

Running default options:

module.exports = function( grunt ) {
  grunt.initConfig({
    postcss: {
      options: {
        processors: [
          require( 'postcss-pseudo-element-cases' )
        ]
      },
      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-cases' )({
            "selectors": [
                "before",
                "after"
            ],
            "case": "upper"
          })
        ]
      },
      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 pseudoCases  = require( 'postcss-pseudo-element-cases' );

const
  options = {
    "case": "upper"
  };

gulp.task( 'postcss', function(){
    gulp.src( 'src/style.css' )
        .pipe( postcss( [ pseudoCases( options ) ] ) )
        .pipe( gulp.dest( 'dist' ) );
});

Options

Default Options:

{
  "selectors": [
    "before",
    "after",
    "first-letter",
    "first-line",
    "selection",
    "spelling-error",
    "grammar-error",
    "backdrop",
    "marker",
    "placeholder",
    "shadow",
    "slotted",
    "content"
  ],
  "case": "lower"
}

selectors

Accepts array of pseudo-elements which should have casing enforced in your stylesheet.

case

Accepts "upper" or "lower" for the psudeo-element's casing.

"upper" produces syntax like: .fancy-style::BEFORE {

"lower" produces syntax like .fancy-style::before {

Examples

Enforced Lowercase

Before enforcing lowercase with the case 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 Uppercase

Before enforcing uppercase with the case 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;
}