postcss-color-hsla-fallback
v1.0.0
Published
PostCSS plugin to transform hsl() and hsla() to hexadecimal
Downloads
12
Maintainers
Readme
postcss-color-hsla-fallback
PostCSS plugin to transform hsl()
and hsla()
to hexadecimal.
Inspiration for this plugin comes from postcss-color-rgba-fallback
Installation
With npm:
npm install postcss-color-hsla-fallback --save-dev
or with yarn:
yarn add postcss-color-hsla-fallback --dev
Also make sure you have postcss
installed:
npm install postcss --save-dev
yarn add postcss --dev
Usage
const fs = require('fs');
const postcss = require('postcss');
const colorHslaFallback = require('postcss-color-hsla-fallback');
const css = fs.readFileSync('input.css', 'utf8');
const output = postcss()
.use(colorHslaFallback())
.process(css)
.css;
Using this input.css
:
body {
color: hsl(0, 53%, 41%);
}
you will get:
body {
color: #a03131;
color: hsl(0, 53%, 41%);
}
Options
preserve
(default: true
)
Allows you to preserve the original hsl()
or hsla()
colors in the output.
Possible values:
true
: Keepshsl()
andhsla()
values in the output.false
: Removeshsl()
andhsla()
values from the output and replaces them with their hex computed values.
With preserve: false
you will get:
body {
color: #a03131;
}
skipProperties
(default: '[]`)
Allows you to skip specific properties from the list so that they are not replaced with their hex computed values.
Possible values includes one or more from this list:
[
'background-color',
'background',
'border-bottom-color',
'border-color',
'border-left-color',
'border-right-color',
'border-top-color',
'border',
'caret-color',
'color',
'column-rule-color',
'column-rule',
'filter',
'outline-color',
'outline',
'text-decoration-color',
'text-shadow'
]
Requirements
This plugin requires postcss
v8+.
Contributing
- Run tests with
npm run test
oryarn test
. - Run the lint with
npm run lint
oryarn lint
.
For details, check out the Contributing guide.
LICENSE
MIT