Skip to content

README.md

Latest commit

 

History

History
106 lines (78 loc) · 2.93 KB

README.md

File metadata and controls

106 lines (78 loc) · 2.93 KB

PostCSS Image Function PostCSS Logo

npm version Build Status Discord

Baseline Status CSS Standard Status

npm install @csstools/postcss-image-function --save-dev

PostCSS Image Function lets you easily generate a solid-color image from any color following the CSS Images 4 Specification.

.foo {
	background-image: image(transparent);
}

.foo {
	--bg-image: image(transparent);
}

/* becomes */

.foo {
	background-image: linear-gradient(transparent,transparent);
}

.foo {
	--bg-image: linear-gradient(transparent,transparent);
}

Usage

Add PostCSS Image Function to your project:

npm install postcss @csstools/postcss-image-function --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssImageFunction = require('@csstools/postcss-image-function');

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

PostCSS Image Function runs in all Node environments, with special instructions for:

Options

preserve

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

postcssImageFunction({ preserve: true })
.foo {
	background-image: image(transparent);
}

.foo {
	--bg-image: image(transparent);
}

/* becomes */

.foo {
	background-image: linear-gradient(transparent,transparent);
	background-image: image(transparent);
}

.foo {
	--bg-image: linear-gradient(transparent,transparent);
}

@supports (background-image: image(red)) {
.foo {
	--bg-image: image(transparent);
}
}