Skip to content

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

License

Notifications You must be signed in to change notification settings

dmarchena/postcss-color-hsl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published