# postcss-calc-ast-parser > Parses calc of css and converts it to AST. Latest version **0.1.4** (published 2019-01-29) · MIT license · 0 weekly downloads ## Install ```sh npm install postcss-calc-ast-parser pnpm add postcss-calc-ast-parser yarn add postcss-calc-ast-parser bun add postcss-calc-ast-parser ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.4 | | Published | 2019-01-29 | | First published | 2019-01-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=6.5 | | Dependencies | 1 | | Unpacked size | 73.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Yosuke Ota | | Maintainers | ota-meshi | | Keywords | postcss, css, calc, parser, math, ast | ## Links - npm: https://www.npmjs.com/package/postcss-calc-ast-parser - Repository: https://github.com/ota-meshi/postcss-calc-ast-parser - Homepage: https://github.com/ota-meshi/postcss-calc-ast-parser#readme - Issues: https://github.com/ota-meshi/postcss-calc-ast-parser/issues - npm.io page: https://npm.io/package/postcss-calc-ast-parser ## Dependencies (1) - [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^3.3.1 ## Alternatives - [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads - [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads - [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads - [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads - [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads ## Recent versions - 0.1.4 (latest) — 2019-01-29 - 0.1.3 — 2019-01-27 - 0.1.2 — 2019-01-27 - 0.1.1 — 2019-01-27 - 0.1.0 — 2019-01-27 - 0.0.1 — 2019-01-26 ## README # postcss-calc-ast-parser [![NPM license](https://img.shields.io/npm/l/postcss-calc-ast-parser.svg)](https://www.npmjs.com/package/postcss-calc-ast-parser) [![NPM version](https://img.shields.io/npm/v/postcss-calc-ast-parser.svg)](https://www.npmjs.com/package/postcss-calc-ast-parser) [![NPM downloads](https://img.shields.io/npm/dw/postcss-calc-ast-parser.svg)](http://www.npmtrends.com/postcss-calc-ast-parser) [![NPM downloads](https://img.shields.io/npm/dm/postcss-calc-ast-parser.svg)](http://www.npmtrends.com/postcss-calc-ast-parser) [![NPM downloads](https://img.shields.io/npm/dy/postcss-calc-ast-parser.svg)](http://www.npmtrends.com/postcss-calc-ast-parser) [![NPM downloads](https://img.shields.io/npm/dt/postcss-calc-ast-parser.svg)](http://www.npmtrends.com/postcss-calc-ast-parser) [![Build Status](https://travis-ci.org/ota-meshi/postcss-calc-ast-parser.svg?branch=master)](https://travis-ci.org/ota-meshi/postcss-calc-ast-parser) [![Coverage Status](https://coveralls.io/repos/github/ota-meshi/postcss-calc-ast-parser/badge.svg?branch=master)](https://coveralls.io/github/ota-meshi/postcss-calc-ast-parser?branch=master) Parse the `calc()` function defined in CSS and convert it to AST. ## Why? There are already various parsers of CSS and values ​​defined in CSS. However, these parser do not have the information of calc function AST. Also, it may not be possible to use it combination with SCSS or Less. `postcss-calc-ast-parser` is a parser specialized for the `calc()` (`max`, `min` and `clamp`) functions. We are aiming to work even when used in combination with SCSS or Less. ## :cd: Installation ```bash npm install --save-dev postcss-calc-ast-parser ``` ## :book: Usage ```js const calcAstParser = require("postcss-calc-ast-parser") const parsed = calcAstParser.parse("calc(100%/3 - 2*1em - 2*1px)") ``` For example, parsing the value `calc(100%/3 - 2*1em - 2*1px)` will return the following: ```json { "type": "Root", "nodes": [ { "type": "Function", "name": "calc", "nodes": [ { "type": "MathExpression", "left": { "type": "MathExpression", "left": { "type": "Percentage", "value": 100, "unit": "%" }, "operator": "/", "right": { "type": "Number", "value": 3 } }, "operator": "-", "right": { "type": "MathExpression", "left": { "type": "MathExpression", "left": { "type": "Number", "value": 2 }, "operator": "*", "right": { "type": "Length", "value": 1, "unit": "em" } }, "operator": "-", "right": { "type": "MathExpression", "left": { "type": "Number", "value": 2 }, "operator": "*", "right": { "type": "Length", "value": 1, "unit": "px" } } } } ] } ] } ``` To know more about certain nodes in produced AST, please go [AST docs](./docs/ast.md). ## API ```js const calcAstParser = require("postcss-calc-ast-parser") const parsed = calcAstParser.parse("calc(100% - 20px)") ``` ### calcAstParser.parse(code, options) Parse the given source code. ```ts calcAstParser.parse( code: string, options?: { /** * Allow inline comments. default `true` */ allowInlineCommnets: boolean } ): AST.Root ``` ### calcAstParser.stringify(node) Stringifies the given node. ```ts calcAstParser.stringify(node: AST.Node): string ``` ### calcAstParser.getResolvedType(expr) Get the resolved type of the given math expression. > https://www.w3.org/TR/css3-values/#calc-type-checking ```ts calcAstParser.getResolvedType(expr: AST.MathExpression): | "Number" | "Length" | "Angle" | "Time" | "Frequency" | "Resolution" | "Percentage" | "Flex" | "Unknown" // Is includes unknown values and SCSS interpolation etc. | "invalid" // Type can not be resolved. ``` ### calcAstParser.reduceExpression(expr) Returns the calculated value of `MathExpression`. Returns `null` if it can not be resolved. ```ts calcAstParser.reduceExpression(expr: | AST.MathExpression | AST.Root | AST.FunctionNode | AST.NumberValue | AST.LengthValue | AST.AngleValue | AST.TimeValue | AST.FrequencyValue | AST.ResolutionValue | AST.PercentageValue | AST.FlexValue ): | { value: number, type: "Number" | "Length" | "Angle" | "Time" | "Frequency" | "Resolution" | "Percentage" | "Flex", unit?: string } | null ``` ### parsed.walk(type, callback) Walks each node of the given type inside parsed.nodes. ```ts parsed.walk(type: string | RegExp, callback: (node) => boolean | void): boolean | void ``` --- _Source: https://npm.io/package/postcss-calc-ast-parser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._