PostCSS Solid-Color Image

This PostCSS plugin lets you use a solid color as an image, following the CSS Images specification.

.box {
    background: image(red);
}

/* becomes */

.box {
    background: linear-gradient(red 0 0);
}

Usage

Deno

Import the module:

import postcss from 'npm:postcss';
import colorImage from 'https://deno.land/x/postcss_color_image@5.0.0/mod.js';

await postcss([colorImage]).process(YOUR_CSS);

Node.js

Add the package in your project:

npm install postcss-color-image

Then import or require it:

import postcss from 'postcss';
import colorImage from 'postcss-color-image';
// OR
const postcss = require('postcss');
const colorImage = require('postcss-color-image');

await postcss([colorImage]).process(YOUR_CSS);

Options

compat: true

Instead of adding a double-position color stop, duplicate the color in the output gradient for wider browser support.

.box {
    background: linear-gradient(red, red);
}

preserve: true

Keep the original CSS declaration alongside the transformed one.

.box {
    background: linear-gradient(red 0 0);
    background: image(red);
}