: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);
}
npm install postcss-color-functional-notation --save-dev
const postcssColorFunctionalNotation = require('postcss-color-functional-notation');
postcssColorFunctionalNotation.process(YOUR_CSS /*, processOptions, pluginOptions */);
const postcss = require('postcss');
const postcssColorFunctionalNotation = require('postcss-color-functional-notation');
postcss([
postcssColorFunctionalNotation(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
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%);
}