postcss-short-color

    4.0.0 • Public • Published

    PostCSS Short Color PostCSS

    NPM Version Build Status Support Chat

    PostCSS Short Color lets you define background-color within the color property in CSS.

    header {
      color: #abccfc #212231;
    }
     
    /* becomes */
     
    header {
      background-color: #212231;
      color: #abccfc;
    }

    Usage

    Add PostCSS Short Color to your project:

    npm install postcss-short-color --save-dev

    Use PostCSS Short Color to process your CSS:

    const postcssShortColor = require('postcss-short-color');
     
    postcssShortColor.process(YOUR_CSS /*, processOptions, pluginOptions */);

    Or use it as a PostCSS plugin:

    const postcss = require('postcss');
    const postcssShortColor = require('postcss-short-color');
     
    postcss([
      postcssShortColor(/* pluginOptions */)
    ]).process(YOUR_CSS /*, processOptions */);

    PostCSS Short Color runs in all Node environments, with special instructions for:

    Node PostCSS CLI Webpack Create React App Gulp Grunt

    Options

    prefix

    The prefix option defines a prefix required by properties being transformed. Wrapping dashes are automatically applied, so that x would transform -x-color.

    postcssShortColor({ prefix: 'x' });
    header {
      -x-color: #abccfc #212231;
    }
     
    /* becomes */
     
    header {
      background-color: #212231;
      color: #abccfc;
    }

    skip

    The skip option defines the skip token used to ignore portions of the shorthand.

    postcssShortColor({ skip: '-' });
    header {
      color: - #212231;
    }
     
    /* becomes */
     
    header {
      background-color: #212231;
    }

    Install

    npm i postcss-short-color

    DownloadsWeekly Downloads

    4,317

    Version

    4.0.0

    License

    CC0-1.0

    Unpacked Size

    20.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • jonathantneal