diff options
Diffstat (limited to 'vanilla/node_modules/@csstools/css-calc/README.md')
| -rw-r--r-- | vanilla/node_modules/@csstools/css-calc/README.md | 132 |
1 files changed, 0 insertions, 132 deletions
diff --git a/vanilla/node_modules/@csstools/css-calc/README.md b/vanilla/node_modules/@csstools/css-calc/README.md deleted file mode 100644 index 1e20fae..0000000 --- a/vanilla/node_modules/@csstools/css-calc/README.md +++ /dev/null @@ -1,132 +0,0 @@ -# CSS Calc <img src="https://cssdb.org/images/css.svg" alt="for CSS" width="90" height="90" align="right"> - -[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/css-calc.svg" height="20">][npm-url] -[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg?branch=main" height="20">][cli-url] -[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord] - -Implemented from : https://drafts.csswg.org/css-values-4/ on 2023-02-17 - -## Usage - -Add [CSS calc] to your project: - -```bash -npm install @csstools/css-calc @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev -``` - -### With string values : - -```mjs -import { calc } from '@csstools/css-calc'; - -// '20' -console.log(calc('calc(10 * 2)')); -``` - -### With component values : - -```mjs -import { stringify, tokenizer } from '@csstools/css-tokenizer'; -import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms'; -import { calcFromComponentValues } from '@csstools/css-calc'; - -const t = tokenizer({ - css: 'calc(10 * 2)', -}); - -const tokens = []; - -{ - while (!t.endOfFile()) { - tokens.push(t.nextToken()); - } - - tokens.push(t.nextToken()); // EOF-token -} - -const result = parseCommaSeparatedListOfComponentValues(tokens, {}); - -// filter or mutate the component values - -const calcResult = calcFromComponentValues(result, { precision: 5, toCanonicalUnits: true }); - -// filter or mutate the component values even further - -const calcResultStr = calcResult.map((componentValues) => { - return componentValues.map((x) => stringify(...x.tokens())).join(''); -}).join(','); - -// '20' -console.log(calcResultStr); -``` - -### Options - -#### `precision` : - -The default precision is fairly high. -It aims to be high enough to make rounding unnoticeable in the browser. - -You can set it to a lower number to suit your needs. - -```mjs -import { calc } from '@csstools/css-calc'; - -// '0.3' -console.log(calc('calc(1 / 3)', { precision: 1 })); -// '0.33' -console.log(calc('calc(1 / 3)', { precision: 2 })); -``` - -#### `globals` : - -Pass global values as a map of key value pairs. - -> Example : Relative color syntax (`lch(from pink calc(l / 2) c h)`) exposes color channel information as ident tokens. -> By passing globals for `l`, `c` and `h` it is possible to solve nested `calc()`'s. - -```mjs -import { calc } from '@csstools/css-calc'; - -const globals = new Map([ - ['a', '10px'], - ['b', '2rem'], -]); - -// '20px' -console.log(calc('calc(a * 2)', { globals: globals })); -// '6rem' -console.log(calc('calc(b * 3)', { globals: globals })); -``` - -#### `toCanonicalUnits` : - -By default this package will try to preserve units. -The heuristic to do this is very simplistic. -We take the first unit we encounter and try to convert other dimensions to that unit. - -This better matches what users expect from a CSS dev tool. - -If you want to have outputs that are closes to CSS serialized values you can pass `toCanonicalUnits: true`. - -```mjs -import { calc } from '@csstools/css-calc'; - -// '20hz' -console.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: true })); - -// '20hz' -console.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: true })); - -// '0.02khz' !!! -console.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: false })); - -// '20hz' -console.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: false })); -``` - -[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test -[discord]: https://discord.gg/bUadyRwkJS -[npm-url]: https://www.npmjs.com/package/@csstools/css-calc - -[CSS calc]: https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc |
