PostCSS Short Color

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