You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
mahdi 0cb8d673d7 update 2 years ago
..
dist update 2 years ago
CHANGELOG.md update 2 years ago
LICENSE.md update 2 years ago
README.md update 2 years ago
package.json update 2 years ago

README.md

PostCSS Color Functional Notation PostCSS Logo

NPM Version CSS Standard Status Build Status Discord

PostCSS Color Functional Notation lets you use space and slash separated color notation in CSS, following the CSS Color specification.

:root {
  --firebrick: rgb(178 34 34);
  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
  --firebrick-hsl: hsla(0 68% 42%);
  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}

/* becomes */

:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick-a50: rgba(178, 34, 34, .5);
  --firebrick-hsl: hsl(0, 68%, 42%);
  --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
}

Usage

Add PostCSS Color Functional Notation to your project:

npm install postcss-color-functional-notation --save-dev

Use PostCSS Color Functional Notation to process your CSS:

const postcss = require('postcss');
const postcssColorFunctionalNotation = require('postcss-color-functional-notation');

postcss([
  postcssColorFunctionalNotation(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

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

Node PostCSS CLI Webpack Create React App Gulp Grunt

Options

preserve

The preserve option determines whether the original functional color notation is preserved. By default, it is not preserved.

postcssImageSetFunction({ preserve: true })
:root {
  --firebrick: rgb(178 34 34);
  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
  --firebrick-hsl: hsla(0 68% 42%);
  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}

/* becomes */

:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick: rgb(178 34 34);
  --firebrick-a50: rgba(178, 34, 34, .5);
  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
  --firebrick-hsl: hsl(0, 68%, 42%);
  --firebrick-hsl: hsla(0 68% 42%);
  --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}