Skip to content

Latest commit

 

History

History

postcss-random-function

README.md

PostCSS Random Function PostCSS Logo

npm version Build Status Discord

Baseline Status CSS Standard Status

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:

⚠️ 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);
}