PostCSS plugin to transform W3C CSS Color Module Level 4 rgb() new syntax to more compatible CSS (comma-separated rgb() or rgba())
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 Rgb Build Status Coverage Status

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.