README.md

PostCSS Random Function

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

PostCSS Random Function lets you use the random function, following the CSS Values 5 specification.

div {
	color: oklch(0.7 0.2 random(120deg, 240deg));
}

div {
	color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
}

div {
	margin: random(10px, 100px) random(10px, 100px);
	padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
}

/* becomes */

div {
	color: oklch(0.7 0.2 177.17235deg);
}

div {
	color: oklch(0.7 0.2 176deg);
}

div {
	margin: 41.7525px 70.01679px;
	padding: 44.03856px 44.03856px;
}

Note

Generated values are deterministic pseudo random numbers. Generating values twice with the same input will give the same result. The input length of the CSS source file is used as a random seed.

Usage

Add PostCSS Random Function to your project:

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

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssRandomFunction = require('@csstools/postcss-random-function');

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

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

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

⚠️ About custom properties

Given the dynamic nature of custom properties it's impossible to know what the variable value is, which means the plugin can't compute a final value for the stylesheet.

Because of that, any usage that contains a var is skipped.

Options

preserve

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

postcssRandomFunction({ preserve: true })

div {
	color: oklch(0.7 0.2 random(120deg, 240deg));
}

div {
	color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
}

div {
	margin: random(10px, 100px) random(10px, 100px);
	padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
}

/* becomes */

div {
	color: oklch(0.7 0.2 177.17235deg);
	color: oklch(0.7 0.2 random(120deg, 240deg));
}

div {
	color: oklch(0.7 0.2 176deg);
	color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
}

div {
	margin: 41.7525px 70.01679px;
	margin: random(10px, 100px) random(10px, 100px);
	padding: 44.03856px 44.03856px;
	padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
}