postcss-color-functional-notation

What is postcss-color-functional-notation?

The postcss-color-functional-notation package is a PostCSS plugin that transforms CSS color functions like `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`, and `lab()` into a more modern and consistent functional notation. This helps in maintaining a consistent color format across your stylesheets and ensures compatibility with modern CSS standards.

What are postcss-color-functional-notation's main functionalities?

Transforming RGB/RGBA Notation

This feature transforms the traditional `rgb()` and `rgba()` functions into the modern space-separated notation. This makes the color definitions more consistent and easier to read.

/* Input CSS */
body {
  color: rgb(255, 0, 0);
  background-color: rgba(0, 255, 0, 0.5);
}

/* Output CSS */
body {
  color: rgb(255 0 0);
  background-color: rgb(0 255 0 / 0.5);
}

Transforming HSL/HSLA Notation

This feature converts the `hsl()` and `hsla()` functions into the modern space-separated notation, making the color definitions more consistent and easier to read.

/* Input CSS */
body {
  color: hsl(120, 100%, 50%);
  background-color: hsla(240, 100%, 50%, 0.5);
}

/* Output CSS */
body {
  color: hsl(120 100% 50%);
  background-color: hsl(240 100% 50% / 0.5);
}

Transforming HWB Notation

This feature transforms the `hwb()` function into the modern space-separated notation, ensuring consistency and readability in color definitions.

/* Input CSS */
body {
  color: hwb(120, 0%, 0%);
}

/* Output CSS */
body {
  color: hwb(120 0% 0%);
}

Transforming LAB Notation

This feature converts the `lab()` function into the modern space-separated notation, making the color definitions more consistent and easier to read.

/* Input CSS */
body {
  color: lab(50, 0, 0);
}

/* Output CSS */
body {
  color: lab(50 0 0);
}

Other packages similar to postcss-color-functional-notation

postcss-preset-env

postcss-preset-env allows you to use future CSS features today by converting modern CSS into something most browsers can understand. It includes a variety of plugins, including one for transforming color functions, making it a more comprehensive solution compared to postcss-color-functional-notation.

postcss-color-mod-function

postcss-color-mod-function is a PostCSS plugin that transforms the `color-mod()` function, which allows for color manipulation. While it focuses on color modification rather than notation transformation, it provides advanced color manipulation capabilities that complement the features of postcss-color-functional-notation.

postcss-color-rebeccapurple

postcss-color-rebeccapurple is a PostCSS plugin that transforms the `rebeccapurple` color keyword to its equivalent hex value. While it has a more specific use case, it can be used alongside postcss-color-functional-notation for comprehensive color transformations.

README

PostCSS Color Functional Notation

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 postcssColorFunctionalNotation = require('postcss-color-functional-notation');

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

Or use it as a PostCSS plugin:

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