{"_id":"@csstools/css-calc","_rev":"261632","name":"@csstools/css-calc","description":"Solve CSS math expressions","dist-tags":{"latest":"1.0.1"},"maintainers":[{"name":"alaguna","email":""},{"name":"jonathantneal","email":""}],"time":{"modified":"2023-03-27T17:30:36.000Z","created":"2023-02-21T16:21:28.079Z","1.0.1":"2023-03-25T07:52:29.420Z","1.0.0":"2023-02-21T16:21:28.079Z"},"users":{},"repository":{"type":"git","url":"git+https://github.com/csstools/postcss-plugins.git","directory":"packages/css-calc"},"versions":{"1.0.1":{"name":"@csstools/css-calc","description":"Solve CSS math expressions","version":"1.0.1","contributors":[{"name":"Antonio Laguna","email":"antonio@laguna.es","url":"https://antonio.laguna.es"},{"name":"Romain Menke","email":"romainmenke@gmail.com"}],"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/csstools"},"engines":{"node":"^14 || ^16 || >=18"},"main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs","default":"./dist/index.mjs"}},"peerDependencies":{"@csstools/css-parser-algorithms":"^2.0.1","@csstools/css-tokenizer":"^2.0.1"},"scripts":{"build":"rollup -c ../../rollup/default.mjs","lint":"node ../../.github/bin/format-package-json.mjs","prepublishOnly":"npm run build && npm run test","stryker":"stryker run --logLevel error","test":"node ./test/test.mjs && node ./test/_import.mjs && node ./test/_require.cjs"},"homepage":"https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc#readme","repository":{"type":"git","url":"git+https://github.com/csstools/postcss-plugins.git","directory":"packages/css-calc"},"bugs":{"url":"https://github.com/csstools/postcss-plugins/issues"},"keywords":["calc","css"],"volta":{"extends":"../../package.json"},"gitHead":"7fc17bb85ca4fa83104d04a07a3a063762d9d72d","_id":"@csstools/css-calc@1.0.1","_nodeVersion":"18.13.0","_npmVersion":"9.4.1","dist":{"shasum":"c478dbfb2c10e22741b261b2a64998960d69bfc7","size":14725,"noattachment":false,"key":"/@csstools/css-calc/-/@csstools/css-calc-1.0.1.tgz","tarball":"http://name.csiicloud.com:7001/@csstools/css-calc/download/@csstools/css-calc-1.0.1.tgz"},"_npmUser":{"name":"alaguna","email":"sombragriselros@gmail.com"},"directories":{},"maintainers":[{"name":"alaguna","email":""},{"name":"jonathantneal","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-calc_1.0.1_1679730749219_0.06314273352123267"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-03-25T07:52:29.420Z","publish_time":1679730749420,"_cnpm_publish_time":1679730749420},"1.0.0":{"name":"@csstools/css-calc","description":"Solve CSS math expressions","version":"1.0.0","contributors":[{"name":"Antonio Laguna","email":"antonio@laguna.es","url":"https://antonio.laguna.es"},{"name":"Romain Menke","email":"romainmenke@gmail.com"}],"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/csstools"},"engines":{"node":"^14 || ^16 || >=18"},"main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs","default":"./dist/index.mjs"}},"peerDependencies":{"@csstools/css-parser-algorithms":"^2.0.1","@csstools/css-tokenizer":"^2.0.1"},"scripts":{"benchmark":"node ./test/benchmark.mjs","prebuild":"npm run clean","build":"rollup -c ../../rollup/default.mjs","clean":"node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"","lint":"npm run lint:eslint && npm run lint:package-json","lint:eslint":"eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern","lint:package-json":"node ../../.github/bin/format-package-json.mjs","prepublishOnly":"npm run clean && npm run build && npm run test","stryker":"stryker run --logLevel error","test":"npm run test:exports && node ./test/test.mjs","test:exports":"node ./test/_import.mjs && node ./test/_require.cjs"},"homepage":"https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc#readme","repository":{"type":"git","url":"git+https://github.com/csstools/postcss-plugins.git","directory":"packages/css-calc"},"bugs":{"url":"https://github.com/csstools/postcss-plugins/issues"},"keywords":["calc","css"],"volta":{"extends":"../../package.json"},"gitHead":"1c9406d2ec54fff81022d1a2126902559c50a8ae","_id":"@csstools/css-calc@1.0.0","_nodeVersion":"18.13.0","_npmVersion":"9.4.1","dist":{"shasum":"f93e4cc9d80b504467aee1b5251bb2fd8be435a7","size":14911,"noattachment":false,"key":"/@csstools/css-calc/-/@csstools/css-calc-1.0.0.tgz","tarball":"http://name.csiicloud.com:7001/@csstools/css-calc/download/@csstools/css-calc-1.0.0.tgz"},"_npmUser":{"name":"alaguna","email":"sombragriselros@gmail.com"},"directories":{},"maintainers":[{"name":"alaguna","email":""},{"name":"jonathantneal","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-calc_1.0.0_1676996487918_0.003670461940096903"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-02-21T16:21:28.079Z","publish_time":1676996488079,"_cnpm_publish_time":1676996488079}},"readme":"# CSS Calc\n\n[<img alt=\"npm version\" src=\"https://img.shields.io/npm/v/@csstools/css-calc.svg\" height=\"20\">][npm-url]\n[<img alt=\"Build Status\" src=\"https://github.com/csstools/postcss-plugins/workflows/test/badge.svg\" height=\"20\">][cli-url]\n[<img alt=\"Discord\" src=\"https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white\">][discord]\n\nImplemented from : https://drafts.csswg.org/css-values-4/ on 2023-02-17\n\n## Usage\n\nAdd [CSS calc] to your project:\n\n```bash\nnpm install @csstools/css-calc @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev\n```\n\n### With string values :\n\n```mjs\nimport { calc } from '@csstools/css-calc';\n\n// '20'\nconsole.log(calc('calc(10 * 2)'));\n```\n\n### With component values :\n\n```mjs\nimport { stringify, tokenizer } from '@csstools/css-tokenizer';\nimport { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms';\nimport { calcFromComponentValues } from '@csstools/css-calc';\n\nconst t = tokenizer({\n\tcss: 'calc(10 * 2)',\n});\n\nconst tokens = [];\n\n{\n\twhile (!t.endOfFile()) {\n\t\ttokens.push(t.nextToken());\n\t}\n\n\ttokens.push(t.nextToken()); // EOF-token\n}\n\nconst result = parseCommaSeparatedListOfComponentValues(tokens, {});\n\n// filter or mutate the component values\n\nconst calcResult = calcFromComponentValues(result, { precision: 5, toCanonicalUnits: true });\n\n// filter or mutate the component values even further\n\nconst calcResultStr = calcResult.map((componentValues) => {\n\treturn componentValues.map((x) => stringify(...x.tokens())).join('');\n}).join(',');\n\n// '20'\nconsole.log(calcResultStr);\n```\n\n### Options\n\n#### `precision` :\n\nThe default precision is fairly high.\nIt aims to be high enough to make rounding unnoticeable in the browser.\n\nYou can set it to a lower number to suit your needs.\n\n```mjs\nimport { calc } from '@csstools/css-calc';\n\n// '0.3'\nconsole.log(calc('calc(1 / 3)', { precision: 1 }));\n// '0.33'\nconsole.log(calc('calc(1 / 3)', { precision: 2 }));\n```\n\n#### `globals` :\n\nPass global values as a map of key value pairs.\n\n> Example : Relative color syntax (`lch(from pink calc(l / 2) c h)`) exposes color channel information as ident tokens.\n> By passing globals for `l`, `c` and `h` it is possible to solve nested `calc()`'s.\n\n```mjs\nimport { calc } from '@csstools/css-calc';\n\nconst globals = new Map([\n\t['a', '10px'],\n\t['b', '2rem'],\n]);\n\n// '20px'\nconsole.log(calc('calc(a * 2)', { globals: globals }));\n// '6rem'\nconsole.log(calc('calc(b * 3)', { globals: globals }));\n```\n\n#### `toCanonicalUnits` :\n\nBy default this package will try to preserve units.\nThe heuristic to do this is very simplistic.\nWe take the first unit we encounter and try to convert other dimensions to that unit.\n\nThis better matches what users expect from a CSS dev tool.\n\nIf you want to have outputs that are closes to CSS serialized values you can pass `toCanonicalUnits: true`.\n\n```mjs\nimport { calc } from '@csstools/css-calc';\n\n// '20hz'\nconsole.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: true }));\n\n// '20hz'\nconsole.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: true }));\n\n// '0.02khz' !!!\nconsole.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: false }));\n\n// '20hz'\nconsole.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: false }));\n```\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/css-calc\n\n[CSS calc]: https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc\n","_attachments":{},"homepage":"https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc#readme","bugs":{"url":"https://github.com/csstools/postcss-plugins/issues"},"license":"MIT"}