postcss-rgba-css-variables v0.0.2

PostCSS rgba-css-variables

PostCSS rgba-css-variables lets you easily support css variable when use rgba.

If you enter this,

:root {
	--width: 100px;
	--color: rgb(255, 0, 0);
	--bg-color: #555;
}

html {
	--s-color: rgb(255, 255, 0);
	--s-bg-color: #999;
	color: rgba(0, 0, 0, 0.3);
}

.header {
	width: var(--width);
	height: 80px;
	color: rgba(var(--color), 0.6);
	color: rgba(255, 0, 0, 0.6);
	background-color: rgba(var(--bg-color), 0.4);
	background-color: rgba(85, 85, 85, 0.4);
}

.footer {
	--s-color: #eee;
	--ccc-color: var(--bg-color);
	--s-bg-color: var(--ccc-color);
	color: rgba(var(--s-color), 0.3);
	color: rgba(238, 238, 238, 0.3);
	background-color: rgba(var(--s-bg-color), 0.7);
	background-color: rgba(85, 85, 85, 0.7);
}

.aaa {
	color: rgba(var(--color), 0.4);
	color: rgba(255, 0, 0, 0.4);
}

.bbb {
	color: rgba(var(--color, blue), 0.4);
	color: rgba(255, 0, 0, 0.4);
}

.ccc {
	--opacity: 0.5;
	color: rgba(var(--color), var(--opacity));
}

.ddd {
	--opacity: 0.5;
	--color-r: 255;
	--color-g: 0;
	--color-b: 0;
	color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--opacity));
}

then you will get:

:root {
	--width: 100px;
	--color: rgb(255, 0, 0);
	--bg-color: #555;
}

html {
	--s-color: rgb(255, 255, 0);
	--s-bg-color: #999;
	color: rgba(0, 0, 0, 0.3);
}

.header {
	width: var(--width);
	height: 80px;
	color: rgba(var(--color), 0.6);
	color: rgba(255, 0, 0, 0.6);
	background-color: rgba(var(--bg-color), 0.4);
	background-color: rgba(85, 85, 85, 0.4);
}

.footer {
	--s-color: #eee;
	--ccc-color: var(--bg-color);
	--s-bg-color: var(--ccc-color);
	color: rgba(var(--s-color), 0.3);
	color: rgba(238, 238, 238, 0.3);
	background-color: rgba(var(--s-bg-color), 0.7);
	background-color: rgba(85, 85, 85, 0.7);
}

.aaa {
	color: rgba(var(--color), 0.4);
	color: rgba(255, 0, 0, 0.4);
}

.bbb {
	color: rgba(var(--color, blue), 0.4);
	color: rgba(255, 0, 0, 0.4);
}

.ccc {
	--opacity: 0.5;
	color: rgba(var(--color), var(--opacity));
}

.ddd {
	--opacity: 0.5;
	--color-r: 255;
	--color-g: 0;
	--color-b: 0;
	color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--opacity));
}

Usage

Add PostCSS rgba-css-variables to your project:

npm install postcss postcss-rgba-css-variables --save-dev

Use it as a PostCSS plugin:

const postcss = require("postcss");
const postcssRgbaCssVariables = require("postcss-rgba-css-variables");

postcss([postcssRgbaCssVariables(/* pluginOptions */)]).process(
	YOUR_CSS /*, processOptions */
);

Options

mode

• optional: "replace-directly" | "replace-required" | "replace-all"
• default: "replace-directly"

replace-directly will replace all css variables which used in rgba :

:root {
	--color: #000;
	--default-color: #fff;
}

div {
	background-color: rgba(var(--color), 0.3);
}

/** will become */
:root {
	--color: #000;
	--default-color: #fff;
}

div {
	background-color: rgba(0, 0, 0, 0.3);
}

replace-required will use xxx-rgb replace all css variables which used in rgba :

:root {
	--color: #000;
	--default-color: #fff;
}

div {
	background-color: rgba(var(--color), 0.3);
}

/** will become */
:root {
	--color: #000;
	--color-rgb: 0, 0, 0;
	--default-color: #fff;
}

div {
	background-color: rgba(var(--color-rgb), 0.3);
}

replace-all will change all css variables whether it was used. This mode can be used when you want change css variables in browser.

:root {
	--color: #000;
	--default-color: #fff;
}

div {
	background-color: rgba(var(--color), 0.3);
}

/** will become */
:root {
	--color: #000;
	--color-rgb: 0, 0, 0;
	--default-color: #fff;
	--default-color-rgb: 255, 255, 255;
}

div {
	background-color: rgba(var(--color-rgb), 0.3);
}

let root = document.documentElement;

root.style.setProperty("--color", "red");
root.style.setProperty("--color-rgb", "255, 0, 0");
root.style.setProperty("--default-color", "green");
root.style.setProperty("--default-color-rgb", "0, 255, 0");

preserve

The preserve option determines whether the original notation is preserved. By default, it is preserved.

postcssRgbaCssVariables({ preserve: false });

:root {
	--color: #000;
	--default-color: #fff;
}

div {
	background-color: rgba(var(--color), 0.3);
}

/** will become */
:root {
	--color: #000;
	--default-color: #fff;
}

div {
	background-color: rgba(var(--color), 0.3);
	background-color: rgba(0, 0, 0, 0.3);
}