@csstools/postcss-exponential-functions

What is @csstools/postcss-exponential-functions?

@csstools/postcss-exponential-functions is a PostCSS plugin that allows you to use exponential functions in your CSS. This can be particularly useful for creating smooth transitions and animations, as well as for responsive design calculations.

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

Exponential Functions in CSS

This feature allows you to use exponential functions directly in your CSS. The `exp(base, exponent)` function calculates the base raised to the power of the exponent.

/* Input CSS */
.element {
  width: exp(2, 3)px; /* 2^3 = 8px */
  height: exp(3, 2)px; /* 3^2 = 9px */
}

/* Output CSS */
.element {
  width: 8px;
  height: 9px;
}

Logarithmic Functions in CSS

This feature allows you to use logarithmic functions in your CSS. The `log(value, base)` function calculates the logarithm of the value with the specified base.

/* Input CSS */
.element {
  width: log(8, 2)px; /* log base 2 of 8 = 3px */
  height: log(9, 3)px; /* log base 3 of 9 = 2px */
}

/* Output CSS */
.element {
  width: 3px;
  height: 2px;
}

Other packages similar to @csstools/postcss-exponential-functions

postcss-calc

postcss-calc is a PostCSS plugin that reduces calc() references whenever it's possible. It allows you to perform mathematical operations within your CSS, similar to @csstools/postcss-exponential-functions, but it focuses on basic arithmetic operations rather than exponential and logarithmic functions.

postcss-math

postcss-math is a PostCSS plugin that allows you to use mathematical expressions in your CSS. It supports a wide range of mathematical functions, including trigonometric and logarithmic functions, making it a more comprehensive alternative to @csstools/postcss-exponential-functions.

README

PostCSS Exponential Functions

npm install @csstools/postcss-exponential-functions --save-dev

PostCSS Exponential Functions lets you use the pow(), sqrt(), hypot(), log(), exp() functions following the CSS Values 4 Specification.

.foo {
	top: calc(1px * pow(2, 3));
	line-height: sqrt(1.2);
	padding: hypot(3px, 4px);
	order: log(10, 10);
	min-height: calc(e - exp(1));
}

/* becomes */

.foo {
	top: 8px;
	line-height: 1.0954451150103;
	padding: 5px;
	order: 1;
	min-height: 0;
}

Usage

Add PostCSS Exponential Functions to your project:

npm install postcss @csstools/postcss-exponential-functions --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssExponentialFunctions = require('@csstools/postcss-exponential-functions');

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

PostCSS Exponential Functions runs in all Node environments, with special instructions for:

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

Options

preserve

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

postcssExponentialFunctions({ preserve: true })

.foo {
	top: calc(1px * pow(2, 3));
	line-height: sqrt(1.2);
	padding: hypot(3px, 4px);
	order: log(10, 10);
	min-height: calc(e - exp(1));
}

/* becomes */

.foo {
	top: 8px;
	top: calc(1px * pow(2, 3));
	line-height: 1.0954451150103;
	line-height: sqrt(1.2);
	padding: 5px;
	padding: hypot(3px, 4px);
	order: 1;
	order: log(10, 10);
	min-height: 0;
	min-height: calc(e - exp(1));
}