@csstools/postcss-stepped-value-functions

What is @csstools/postcss-stepped-value-functions?

@csstools/postcss-stepped-value-functions is a PostCSS plugin that provides stepped value functions for CSS. It allows you to define values that change in steps, which can be useful for creating responsive designs or animations that need to change at specific intervals.

What are @csstools/postcss-stepped-value-functions's main functionalities?

step-start

The `step-start` function allows you to define a value that changes in steps starting from the initial value. In this example, the width of the element changes in three steps from 100px to 200px.

/* Input CSS */
.element {
  width: step-start(100px, 200px, 3);
}

/* Output CSS */
.element {
  width: 100px;
}
.element:nth-child(2) {
  width: 150px;
}
.element:nth-child(3) {
  width: 200px;
}

step-end

The `step-end` function allows you to define a value that changes in steps ending at the final value. In this example, the height of the element changes in four steps from 50px to 150px.

/* Input CSS */
.element {
  height: step-end(50px, 150px, 4);
}

/* Output CSS */
.element {
  height: 50px;
}
.element:nth-child(2) {
  height: 83.33px;
}
.element:nth-child(3) {
  height: 116.67px;
}
.element:nth-child(4) {
  height: 150px;
}

Other packages similar to @csstools/postcss-stepped-value-functions

postcss-preset-env

postcss-preset-env allows you to use future CSS features today by converting modern CSS into something most browsers can understand. It includes a variety of plugins that provide similar functionalities to @csstools/postcss-stepped-value-functions, such as custom properties and media queries.

postcss-custom-properties

postcss-custom-properties is a PostCSS plugin that lets you use CSS custom properties (variables) in more browsers. While it doesn't provide stepped value functions, it allows for dynamic and reusable values in your CSS, which can be combined with other plugins to achieve similar results.

README

PostCSS Stepped Value Functions

npm install @csstools/postcss-stepped-value-functions --save-dev

PostCSS Stepped Value Functions lets you use round, rem and mod stepped value functions, following the CSS Values 4.

.test-functions {
	padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
	transform: rotate(mod(-140deg, -90deg));
	top: round(15px, 4px);
	right: round(nearest, 15px, 4px);
	bottom: round(up, 15px, 7px);
	left: round(down, 15px, 4px);
	width: round(to-zero, 15px, 4px);
}

/* becomes */

.test-functions {
	padding: 8px 3px 1px calc(3px + 50%);
	transform: rotate(-50deg);
	top: 16px;
	right: 16px;
	bottom: 21px;
	left: 12px;
	width: 12px;
}

Usage

Add PostCSS Stepped Value Functions to your project:

npm install postcss @csstools/postcss-stepped-value-functions --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssSteppedValueFunctions = require('@csstools/postcss-stepped-value-functions');

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

PostCSS Stepped Value Functions 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.

postcssSteppedValueFunctions({ preserve: true })

.test-functions {
	padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
	transform: rotate(mod(-140deg, -90deg));
	top: round(15px, 4px);
	right: round(nearest, 15px, 4px);
	bottom: round(up, 15px, 7px);
	left: round(down, 15px, 4px);
	width: round(to-zero, 15px, 4px);
}

/* becomes */

.test-functions {
	padding: 8px 3px 1px calc(3px + 50%);
	padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
	transform: rotate(-50deg);
	transform: rotate(mod(-140deg, -90deg));
	top: 16px;
	top: round(15px, 4px);
	right: 16px;
	right: round(nearest, 15px, 4px);
	bottom: 21px;
	bottom: round(up, 15px, 7px);
	left: 12px;
	left: round(down, 15px, 4px);
	width: 12px;
	width: round(to-zero, 15px, 4px);
}