postcss-short-color

Define background-color within the color property in CSS

Usage no npm install needed!

<script type="module">
  import postcssShortColor from 'https://cdn.skypack.dev/postcss-short-color';
</script>

README

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