npm install @csstools/postcss-image-function --save-devPostCSS 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);
}Add PostCSS Image Function to your project:
npm install postcss @csstools/postcss-image-function --save-devUse 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:
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);
}
}