postcss-color-functional-notation v6.0.9
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 */);
PostCSS Color Functional Notation runs in all Node environments, with special instructions for:
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
tofalse
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
4 days ago
25 days ago
1 month ago
1 month ago
2 months ago
4 months ago
4 months ago
7 months ago
7 months ago
11 months ago
10 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
4 years ago
4 years ago
4 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago