PostCSS plugin to transform W3C CSS Color Module Level 4 hsl() new syntax to more compatible CSS (comma-separated hsl() or hsla())
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json

README.md

PostCSS Color Hsl Build Status Coverage Status

PostCSS plugin to transform W3C CSS Color Module Level 4 hsl() new syntax to more compatible CSS (comma-separated hsl() or hsla()).

CSS Colors 4 syntax

hsl() = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? )
<hue> = <number> | <angle>
<alpha-value> = <number> | <percentage>

CSS Colors 3 syntax (actual)

hsl()  = hsl( <hue>, <percentage>, <percentage> )
hsla() = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<hue> = <number>
<alpha-value> = <number>

Example

.foo {
  /* Input example */
  color: hsl(0 100% 50%);
  border-color: hsl(200grad 100% 50% / 20%);
}
.foo {
  /* Output example */
  color: hsl(0, 100%, 50%);
  border-color: hsla(180, 100%, 50%, .2);
}

Usage

postcss([ require('postcss-color-hsl') ])

See PostCSS docs for examples for your environment.