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

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

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(179, 34, 34, 0.5);
	--firebrick-hsl: hsl(0, 68%, 42%);
	--firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);
}

Usage

Add PostCSS Color Functional Notation to your project:

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

Use it as a PostCSS plugin:

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

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

Options

preserve

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

postcssColorFunctionalNotation({ 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-a50: rgba(179, 34, 34, 0.5);
	--firebrick-hsl: hsl(0, 68%, 42%);
	--firebrick-hsl: hsla(0 68% 42%);
	--firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);
}

@supports (color: rgb(0 0 0 / 0)) {
:root {
	--firebrick: rgb(178 34 34);
	--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
}
}

@supports (color: hsl(0 0% 0% / 0)) {
:root {
	--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}
}

enableProgressiveCustomProperties

The enableProgressiveCustomProperties option determines whether the original notation is wrapped with @supports when used in Custom Properties. By default, it is enabled.

[!NOTE] We only recommend disabling this when you set preserve to false or if you bring your own fix for Custom Properties.
See what the plugin does in its README.

postcssColorFunctionalNotation({ enableProgressiveCustomProperties: false })

: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(179, 34, 34, 0.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%, 0.5);
	--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}

Custom properties do not fallback to the previous declaration