# @csstools/postcss-trigonometric-functions > Use sin(), cos(), tan(), acos(), atan(), and atan2() to compute trigonometric relationships Latest version **5.0.6** (published 2026-09-13) · MIT-0 license · 0 weekly downloads ## Install ```sh npm install @csstools/postcss-trigonometric-functions pnpm add @csstools/postcss-trigonometric-functions yarn add @csstools/postcss-trigonometric-functions bun add @csstools/postcss-trigonometric-functions ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 5.0.6 | | Published | 2026-09-13 | | First published | 2022-05-20 | | Weekly downloads | 0 | | License | MIT-0 | | TypeScript types | none | | Module format | ESM | | Node | >=20.19.0 | | Dependencies | 3 | | Unpacked size | 8.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1052 | | Maintainers | jonathantneal, alaguna, romainmenke | | Keywords | acos, acos2, asin, atan, cos, css, postcss-plugin, sin, tan, trigonometric | ## Links - npm: https://www.npmjs.com/package/@csstools/postcss-trigonometric-functions - Repository: https://github.com/csstools/postcss-plugins - Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions#readme - Issues: https://github.com/csstools/postcss-plugins/issues - Funding: https://github.com/sponsors/csstools - npm.io page: https://npm.io/package/@csstools/postcss-trigonometric-functions ## Dependencies (3) - [@csstools/css-calc](https://npm.io/package/@csstools/css-calc.md) ^3.4.0 - [@csstools/css-tokenizer](https://npm.io/package/@csstools/css-tokenizer.md) ^4.0.0 - [@csstools/css-parser-algorithms](https://npm.io/package/@csstools/css-parser-algorithms.md) ^4.0.0 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 5.0.6 (latest) — 2026-09-13 - 5.0.5 — 2026-09-06 - 5.0.4 — 2026-07-22 - 5.0.3 — 2026-05-13 - 5.0.2 — 2026-04-12 - 5.0.1 — 2026-02-21 - 5.0.0 — 2026-01-14 - 4.0.9 — 2025-05-27 - 4.0.8 — 2025-04-19 - 4.0.7 — 2025-02-23 - 4.0.6 — 2024-12-27 - 4.0.5 — 2024-11-11 - 4.0.4 — 2024-11-01 - 4.0.3 — 2024-10-23 - 4.0.2 — 2024-10-10 - … 20 more at https://npm.io/package/@csstools/postcss-trigonometric-functions/versions ## README # PostCSS Trigonometric Functions [PostCSS Logo][PostCSS] `npm install @csstools/postcss-trigonometric-functions --save-dev` [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. ```css .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: calc(0.70711); line-height: calc(0.70711); line-height: calc(1); transform: rotate(calc(-90deg)); transform: rotate(calc(89.99995deg)); transform: rotate(calc(180deg)); transform: rotate(calc(0deg)); transform: rotate(calc(90deg)); transform: rotate(calc(0deg)); transform: rotate(calc(-135deg)); transform: rotate(calc(-45deg)); transform: rotate(calc(-45deg)); transform: rotate(calc(80.53768deg)); } ``` ## Usage Add [PostCSS Trigonometric Functions] to your project: ```bash npm install postcss @csstools/postcss-trigonometric-functions --save-dev ``` Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssTrigonometricFunctions = require('@csstools/postcss-trigonometric-functions'); postcss([ postcssTrigonometricFunctions(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` ## ⚠️ 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. ```js postcssTrigonometricFunctions({ preserve: true }) ``` ```css .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: calc(0.70711); line-height: sin(pi / 4); line-height: calc(0.70711); line-height: cos(.125turn); line-height: calc(1); line-height: tan(50grad); transform: rotate(calc(-90deg)); transform: rotate(asin(-1)); transform: rotate(calc(89.99995deg)); transform: rotate(asin(sin(30deg + 1.0471967rad))); transform: rotate(calc(180deg)); transform: rotate(acos(-1)); transform: rotate(calc(0deg)); transform: rotate(acos(cos(0 / 2 + 1 - 1))); transform: rotate(calc(90deg)); transform: rotate(atan(infinity)); transform: rotate(calc(0deg)); transform: rotate(atan(e - 2.7182818284590452354)); transform: rotate(calc(-135deg)); transform: rotate(atan2(-infinity,-infinity)); transform: rotate(calc(-45deg)); transform: rotate(atan2(-infinity,infinity)); transform: rotate(calc(-45deg)); transform: rotate(atan2(-infinity,infinity)); transform: rotate(calc(80.53768deg)); transform: rotate(atan2(90, 15)); } ``` [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#trigonometric-functions [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-trigonometric-functions [PostCSS]: https://github.com/postcss/postcss [PostCSS Trigonometric Functions]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions [CSS Values 4]: https://www.w3.org/TR/css-values-4/#trig-funcs --- _Source: https://npm.io/package/@csstools/postcss-trigonometric-functions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._