postcss-color-rgba-fallback

What is postcss-color-rgba-fallback?

The postcss-color-rgba-fallback package is a PostCSS plugin that provides fallback colors for browsers that do not support RGBA colors. It automatically generates hexadecimal color fallbacks for RGBA colors in your CSS, ensuring better compatibility across different browsers.

What are postcss-color-rgba-fallback's main functionalities?

RGBA to Hex Fallback

This feature automatically converts RGBA colors to their hexadecimal equivalents and adds them as fallbacks. This ensures that browsers that do not support RGBA can still render the color.

/* Input CSS */
body {
  background: rgba(255, 0, 0, 0.5);
}

/* Output CSS */
body {
  background: #ff0000;
  background: rgba(255, 0, 0, 0.5);
}

Other packages similar to postcss-color-rgba-fallback

postcss-color-rgb

The postcss-color-rgb package is a PostCSS plugin that converts RGB colors to hexadecimal. Unlike postcss-color-rgba-fallback, it does not handle alpha transparency but focuses on converting RGB values to hex.

postcss-color-hex-alpha

The postcss-color-hex-alpha package is a PostCSS plugin that converts 8-digit hexadecimal colors (which include alpha transparency) to RGBA. It is somewhat the reverse of postcss-color-rgba-fallback, focusing on converting hex with alpha to RGBA.

postcss-color-function

The postcss-color-function package is a PostCSS plugin that transforms W3C CSS color function notation (like color-mod) into more compatible CSS. It offers broader functionality for color manipulation compared to postcss-color-rgba-fallback.

README

postcss-color-rgba-fallback

PostCSS plugin to transform rgba() to hexadecimal.

Installation

$ npm install postcss-color-rgba-fallback

Usage

// dependencies
var fs = require("fs")
var postcss = require("postcss")
var colorRgbaFallback = require("postcss-color-rgba-fallback")

// css to be processed
var css = fs.readFileSync("input.css", "utf8")

// process css
var output = postcss()
  .use(colorRgbaFallback())
  .process(css)
  .css

Using this input.css:

body {
  background: rgba(153, 221, 153, 0.8);
  border: solid 1px rgba(100,102,103,.3);
}

you will get:

body {
  background: #99DD99;
  background: rgba(153, 221, 153, 0.8);
  border: solid 1px #646667;
  border: solid 1px rgba(100,102,103,.3);
}

Node.js options

postcss-color-rgba-fallback accepts options

properties

default: [ "background-color", "background", "color", "border", "border-color", "outline", "outline-color ]

Allows you to specify your whitelist of properties. This option enables adding a fallback for one or a properties list

oldie

default: false

Set to true to enable the option and to get fallback for ie8

backgroundColor

default: null

Allows you to specify a background color to use as a base alpha matte.

Instead of cutting off the alpha channel it will blend the foreground and background.

Expects an array of rgb values:

  "backgroundColor": [255, 1, 1]

Checkout tests for more examples.

---

Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

$ git clone https://github.com/postcss/postcss-color-rgba-fallback.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License