Skip to content
This repository has been archived by the owner on Jun 14, 2022. It is now read-only.

Latest commit

 

History

History
134 lines (106 loc) · 7.34 KB

README.md

File metadata and controls

134 lines (106 loc) · 7.34 KB
Raw
⚠️ PostCSS Trig is no longer maintained ⚠️
There's a new plugin that handles trigonometric which you can find in @csstools/postcss-plugins.

PostCSS Trig PostCSS

NPM Version Build Status Support Chat

PostCSS Trig lets you use trigonometry functions in CSS.

These functions include acos, asin, atan, atan2, cos, hypot, pow, sin, sqrt, and tan.

:root {
  --acos: acos(0.8);
  --asin: asin(0.6);
  --atan: atan(0.8);
  --atan2: atan2(5, 5);
  --cos: cos(20);
  --cos-deg: cos(20deg);
  --hypot: hypot(3, 4);
  --pow: pow(4, 4);
  --pow-rem: pow(4rem, 4);
  --sin: sin(20);
  --sin-deg: sin(20deg);
  --sqrt: sqrt(81);
  --sqrt-rem: sqrt(81rem);
  --tan: tan(20);
  --tan-deg: tan(20deg);
}


/* becomes */

:root {
  --acos: 0.6435;
  --asin: 0.6435;
  --atan: 0.9273;
  --atan2: 0.7854;
  --cos: 0.40808;
  --cos-deg: 0.93969;
  --hypot: 5;
  --pow: 256;
  --pow-rem: 256rem;
  --sin: 0.91295;
  --sin-deg: 0.34202;
  --sqrt: 9;
  --sqrt-rem: 9rem;
  --tan: 2.23716;
  --tan-deg: 0.36397;
}

When necessary, more complex fallbacks are used to support real-time values.

:root {
  --cos-calc: cos(calc(20 * 2));
  --cos-var: cos(var(--angle));
  --pow-calc: pow(calc(4 * 2), 4);
  --pow-var: pow(var(--number), 4);
  --sin-calc: sin(calc(20 * 2));
  --sin-var: sin(var(--angle));
  --sqrt-calc: sqrt(calc(81 * 4));
  --sqrt-var: sqrt(var(--number));
  --tan-calc: tan(calc(20 * 2));
  --tan-var: tan(var(--angle));
}

/* becomes */

:root {
  --cos-calc: calc(1 - ((20 * 2) * (20 * 2) /  2 ) + ((20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) /  24 ) - ((20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) /  720 ) + ((20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) /  40320 ));
  --cos-var: calc(1 - (var(--angle) * var(--angle) /  2 ) + (var(--angle) * var(--angle) * var(--angle) * var(--angle) /  24 ) - (var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) /  720 ) + (var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) /  40320 ));
  --pow-calc: pow(calc(4 * 2), 4);
  --pow-var: pow(var(--number), 4);
  --sin-calc: calc((20 * 2) - ((20 * 2) * (20 * 2) * (20 * 2) /  6 ) + ((20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) /  120 ) - ((20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) /  5040 ) + ((20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) /  362880 ));
  --sin-var: calc(var(--angle) - (var(--angle) * var(--angle) * var(--angle) /  6 ) + (var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) /  120 ) - (var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) /  5040 ) + (var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) /  362880 ));
  --sqrt-calc: calc(((((((((((81 * 4) + (81 * 4) / (81 * 4)) / 2) + (81 * 4) / (((81 * 4) + (81 * 4) / (81 * 4)) / 2)) / 2) + (81 * 4) / (((((81 * 4) + (81 * 4) / (81 * 4)) / 2) + (81 * 4) / (((81 * 4) + (81 * 4) / (81 * 4)) / 2)) / 2)) / 2) + (81 * 4) / (((((((81 * 4) + (81 * 4) / (81 * 4)) / 2) + (81 * 4) / (((81 * 4) + (81 * 4) / (81 * 4)) / 2)) / 2) + (81 * 4) / (((((81 * 4) + (81 * 4) / (81 * 4)) / 2) + (81 * 4) / (((81 * 4) + (81 * 4) / (81 * 4)) / 2)) / 2)) / 2)) / 2) + (81 * 4) / (((((((((81 * 4) + (81 * 4) / (81 * 4)) / 2) + (81 * 4) / (((81 * 4) + (81 * 4) / (81 * 4)) / 2)) / 2) + (81 * 4) / (((((81 * 4) + (81 * 4) / (81 * 4)) / 2) + (81 * 4) / (((81 * 4) + (81 * 4) / (81 * 4)) / 2)) / 2)) / 2) + (81 * 4) / (((((((81 * 4) + (81 * 4) / (81 * 4)) / 2) + (81 * 4) / (((81 * 4) + (81 * 4) / (81 * 4)) / 2)) / 2) + (81 * 4) / (((((81 * 4) + (81 * 4) / (81 * 4)) / 2) + (81 * 4) / (((81 * 4) + (81 * 4) / (81 * 4)) / 2)) / 2)) / 2)) / 2)) / 2);
  --sqrt-var: calc((((((((((var(--number) + var(--number) / var(--number)) / 2) + var(--number) / ((var(--number) + var(--number) / var(--number)) / 2)) / 2) + var(--number) / ((((var(--number) + var(--number) / var(--number)) / 2) + var(--number) / ((var(--number) + var(--number) / var(--number)) / 2)) / 2)) / 2) + var(--number) / ((((((var(--number) + var(--number) / var(--number)) / 2) + var(--number) / ((var(--number) + var(--number) / var(--number)) / 2)) / 2) + var(--number) / ((((var(--number) + var(--number) / var(--number)) / 2) + var(--number) / ((var(--number) + var(--number) / var(--number)) / 2)) / 2)) / 2)) / 2) + var(--number) / ((((((((var(--number) + var(--number) / var(--number)) / 2) + var(--number) / ((var(--number) + var(--number) / var(--number)) / 2)) / 2) + var(--number) / ((((var(--number) + var(--number) / var(--number)) / 2) + var(--number) / ((var(--number) + var(--number) / var(--number)) / 2)) / 2)) / 2) + var(--number) / ((((((var(--number) + var(--number) / var(--number)) / 2) + var(--number) / ((var(--number) + var(--number) / var(--number)) / 2)) / 2) + var(--number) / ((((var(--number) + var(--number) / var(--number)) / 2) + var(--number) / ((var(--number) + var(--number) / var(--number)) / 2)) / 2)) / 2)) / 2)) / 2);
  --tan-calc: calc((20 * 2) + ((1 / 3) * ((20 * 2) * (20 * 2) * (20 * 2))) + ((2 / 15) * ((20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2))) + ((17 / 315) * ((20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2) * (20 * 2))));
  --tan-var: calc(var(--angle) + ((1 / 3) * (var(--angle) * var(--angle) * var(--angle))) + ((2 / 15) * (var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle))) + ((17 / 315) * (var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle))));
}

Usage

Add PostCSS Trig to your project:

npm install postcss-trig --save-dev

Use PostCSS Trig to process your CSS:

const postcssTrig = require('postcss-trig');

postcssTrig.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssTrig = require('postcss-trig');

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

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

Node PostCSS CLI Webpack Create React App Gulp Grunt

Options

precision

The precision option determines how many decimal places of precision will be preserved after transformations. By default, this precision is up to 5 places.