postcss-color-rgb
v2.0.0
Published
PostCSS plugin to transform W3C CSS Color Module Level 4 rgb() new syntax to more compatible CSS (comma-separated rgb() or rgba())
Downloads
589,746
Maintainers
Readme
PostCSS Color Rgb
PostCSS plugin to transform W3C CSS Color Module Level 4 rgb() new syntax to more compatible CSS (comma-separated rgb() or rgba()).
CSS Colors 4 syntax
rgb() = rgb( <percentage>{3} [ / <alpha-value> ]? ) |
rgb( <number>{3} [ / <alpha-value> ]? )
<alpha-value> = <number> | <percentage>
CSS Colors 3 syntax (actual)
rgb() = rgb( <percentage>#{3}) |
rgb( <integer>#{3})
rgba() = rgba( <percentage>#{3} , <alpha-value> ) |
rgba( <integer>#{3} , <alpha-value> )
<alpha-value> = <number>
Example
.foo {
/* Input example */
color: rgb(250.5 255 255);
background-image: linear-gradient(to bottom right, rgb(10% 11% 12% / 90%), rgb(23% 24% 25% / .5));
}
.foo {
/* Output example */
color: rgb(251, 255, 255);
background-image: linear-gradient(to bottom right, rgba(10%, 11%, 12%, .9), rgba(23%, 24%, 25%, .5));
}
Usage
postcss([ require('postcss-color-rgb') ])
See PostCSS docs for examples for your environment.