basant307/AI_Governance_Project

1# CSS Calc <img src="https://cssdb.org/images/css.svg" alt="for CSS" width="90" height="90" align="right">2 3[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/css-calc.svg" height="20">][npm-url]4[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg?branch=main" height="20">][cli-url]5[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]6 7Implemented from : https://drafts.csswg.org/css-values-4/ on 2023-02-178 9## Usage10 11Add [CSS calc] to your project:12 13```bash14npm install @csstools/css-calc @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev15```16 17### With string values :18 19```mjs20import { calc } from '@csstools/css-calc';21 22// '20'23console.log(calc('calc(10 * 2)'));24```25 26### With component values :27 28```mjs29import { stringify, tokenizer } from '@csstools/css-tokenizer';30import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms';31import { calcFromComponentValues } from '@csstools/css-calc';32 33const t = tokenizer({34	css: 'calc(10 * 2)',35});36 37const tokens = [];38 39{40	while (!t.endOfFile()) {41		tokens.push(t.nextToken());42	}43 44	tokens.push(t.nextToken()); // EOF-token45}46 47const result = parseCommaSeparatedListOfComponentValues(tokens, {});48 49// filter or mutate the component values50 51const calcResult = calcFromComponentValues(result, { precision: 5, toCanonicalUnits: true });52 53// filter or mutate the component values even further54 55const calcResultStr = calcResult.map((componentValues) => {56	return componentValues.map((x) => stringify(...x.tokens())).join('');57}).join(',');58 59// '20'60console.log(calcResultStr);61```62 63### Options64 65#### `precision` :66 67The default precision is fairly high.68It aims to be high enough to make rounding unnoticeable in the browser.69 70You can set it to a lower number to suit your needs.71 72```mjs73import { calc } from '@csstools/css-calc';74 75// '0.3'76console.log(calc('calc(1 / 3)', { precision: 1 }));77// '0.33'78console.log(calc('calc(1 / 3)', { precision: 2 }));79```80 81#### `globals` :82 83Pass global values as a map of key value pairs.84 85> Example : Relative color syntax (`lch(from pink calc(l / 2) c h)`) exposes color channel information as ident tokens.86> By passing globals for `l`, `c` and `h` it is possible to solve nested `calc()`'s.87 88```mjs89import { calc } from '@csstools/css-calc';90 91const globals = new Map([92	['a', '10px'],93	['b', '2rem'],94]);95 96// '20px'97console.log(calc('calc(a * 2)', { globals: globals }));98// '6rem'99console.log(calc('calc(b * 3)', { globals: globals }));100```101 102#### `toCanonicalUnits` :103 104By default this package will try to preserve units.105The heuristic to do this is very simplistic.106We take the first unit we encounter and try to convert other dimensions to that unit.107 108This better matches what users expect from a CSS dev tool.109 110If you want to have outputs that are closes to CSS serialized values you can pass `toCanonicalUnits: true`.111 112```mjs113import { calc } from '@csstools/css-calc';114 115// '20hz'116console.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: true }));117 118// '20hz'119console.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: true }));120 121// '0.02khz' !!!122console.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: false }));123 124// '20hz'125console.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: false }));126```127 128[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test129[discord]: https://discord.gg/bUadyRwkJS130[npm-url]: https://www.npmjs.com/package/@csstools/css-calc131 132[CSS calc]: https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc133