PostCSS Trigonometric Functions

PostCSS Trigonometric Functions lets you use sin, cos, tan, asin, acos, atan and atan2 to be able to compute trigonometric relationships following the CSS Values 4 specification.

.trigonometry {
	line-height: sin(pi / 4);
	line-height: cos(.125turn);
	line-height: tan(50grad);
	transform: rotate(asin(-1));
	transform: rotate(asin(sin(30deg + 1.0471967rad)));
	transform: rotate(acos(-1));
	transform: rotate(acos(cos(0 / 2 + 1 - 1)));
	transform: rotate(atan(infinity));
	transform: rotate(atan(e - 2.7182818284590452354));
	transform: rotate(atan2(-infinity,-infinity));
	transform: rotate(atan2(-infinity,infinity));
	transform: rotate(atan2(-infinity,infinity));
	transform: rotate(atan2(90, 15));
}

/* becomes */

.trigonometry {
	line-height: 0.70711;
	line-height: 0.70711;
	line-height: 1;
	transform: rotate(-90deg);
	transform: rotate(90deg);
	transform: rotate(180deg);
	transform: rotate(0deg);
	transform: rotate(90deg);
	transform: rotate(0deg);
	transform: rotate(-135deg);
	transform: rotate(-45deg);
	transform: rotate(-45deg);
	transform: rotate(80.54deg);
}

Usage

Add PostCSS Trigonometric Functions to your project:

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

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssTrigonometricFunctions = require('@csstools/postcss-trigonometric-functions');

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

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

Node	PostCSS CLI	Webpack	Create React App	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.

Units

PostCSS Trigonometric Functions lets you use different special units that are within the spec and computed at run time to be able to calculate the result of the trigonometric function.

The following units are supported:

pi: Computes to Math.PI which is 3.141592653589793
e: Computes to Math.E which is 2.718281828459045
infinity, -infinity: Compute to Infinity and -Infinity respectively. Note that the usage is case insensitive so InFiNiTy is a valid value.

Some calculations (such as sin(-infinity)) might return NaN as per the spec. Given that NaN can't be replaced with a value that's useful to CSS it is left as is, as the result will be effectively ignored by the browser.

Options

preserve

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

postcssTrigonometricFunctions({ preserve: true })

.trigonometry {
	line-height: sin(pi / 4);
	line-height: cos(.125turn);
	line-height: tan(50grad);
	transform: rotate(asin(-1));
	transform: rotate(asin(sin(30deg + 1.0471967rad)));
	transform: rotate(acos(-1));
	transform: rotate(acos(cos(0 / 2 + 1 - 1)));
	transform: rotate(atan(infinity));
	transform: rotate(atan(e - 2.7182818284590452354));
	transform: rotate(atan2(-infinity,-infinity));
	transform: rotate(atan2(-infinity,infinity));
	transform: rotate(atan2(-infinity,infinity));
	transform: rotate(atan2(90, 15));
}

/* becomes */

.trigonometry {
	line-height: 0.70711;
	line-height: sin(pi / 4);
	line-height: 0.70711;
	line-height: cos(.125turn);
	line-height: 1;
	line-height: tan(50grad);
	transform: rotate(-90deg);
	transform: rotate(asin(-1));
	transform: rotate(90deg);
	transform: rotate(asin(1));
	transform: rotate(asin(sin(30deg + 1.0471967rad)));
	transform: rotate(180deg);
	transform: rotate(acos(-1));
	transform: rotate(0deg);
	transform: rotate(acos(1));
	transform: rotate(acos(cos(0 / 2 + 1 - 1)));
	transform: rotate(90deg);
	transform: rotate(atan(infinity));
	transform: rotate(0deg);
	transform: rotate(atan(e - 2.7182818284590452354));
	transform: rotate(-135deg);
	transform: rotate(atan2(-infinity,-infinity));
	transform: rotate(-45deg);
	transform: rotate(atan2(-infinity,infinity));
	transform: rotate(-45deg);
	transform: rotate(atan2(-infinity,infinity));
	transform: rotate(80.54deg);
	transform: rotate(atan2(90, 15));
}

5.7 KiB Raw Blame History