postcss-pseudo-element-cases

    1.0.0 • Public • Published

    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

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

    Install

    npm i postcss-pseudo-element-cases

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • time