postcss-calc-ast-parser

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

1npm install --save-dev postcss-calc-ast-parser

:book: Usage

1const calcAstParser = require("postcss-calc-ast-parser")
2
3const 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:

1{
2    "type": "Root",
3    "nodes": [
4        {
5            "type": "Function",
6            "name": "calc",
7            "nodes": [
8                {
9                    "type": "MathExpression",
10                    "left": {
11                        "type": "MathExpression",
12                        "left": {
13                            "type": "Percentage",
14                            "value": 100,
15                            "unit": "%"
16                        },
17                        "operator": "/",
18                        "right": {
19                            "type": "Number",
20                            "value": 3
21                        }
22                    },
23                    "operator": "-",
24                    "right": {
25                        "type": "MathExpression",
26                        "left": {
27                            "type": "MathExpression",
28                            "left": {
29                                "type": "Number",
30                                "value": 2
31                            },
32                            "operator": "*",
33                            "right": {
34                                "type": "Length",
35                                "value": 1,
36                                "unit": "em"
37                            }
38                        },
39                        "operator": "-",
40                        "right": {
41                            "type": "MathExpression",
42                            "left": {
43                                "type": "Number",
44                                "value": 2
45                            },
46                            "operator": "*",
47                            "right": {
48                                "type": "Length",
49                                "value": 1,
50                                "unit": "px"
51                            }
52                        }
53                    }
54                }
55            ]
56        }
57    ]
58}

To know more about certain nodes in produced AST, please go AST docs.

API

1const calcAstParser = require("postcss-calc-ast-parser")
2
3const parsed = calcAstParser.parse("calc(100% - 20px)")

calcAstParser.parse(code, options)

Parse the given source code.

1calcAstParser.parse(
2    code: string,
3    options?: {
4        /**
5         * Allow inline comments. default `true`
6         */
7        allowInlineCommnets: boolean
8    }
9): AST.Root

calcAstParser.stringify(node)

Stringifies the given node.

1calcAstParser.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

1calcAstParser.getResolvedType(expr: AST.MathExpression):
2    | "Number" | "Length" | "Angle" | "Time" | "Frequency" | "Resolution" | "Percentage" | "Flex"
3    | "Unknown" // Is includes unknown values and SCSS interpolation etc.
4    | "invalid" // Type can not be resolved.

calcAstParser.reduceExpression(expr)

Returns the calculated value of MathExpression. Returns null if it can not be resolved.

1
2calcAstParser.reduceExpression(expr:
3    | AST.MathExpression
4    | AST.Root
5    | AST.FunctionNode
6    | AST.NumberValue
7    | AST.LengthValue
8    | AST.AngleValue
9    | AST.TimeValue
10    | AST.FrequencyValue
11    | AST.ResolutionValue
12    | AST.PercentageValue
13    | AST.FlexValue
14):
15    | {
16        value: number,
17        type: "Number" | "Length" | "Angle" | "Time" | "Frequency" | "Resolution" | "Percentage" | "Flex",
18        unit?: string
19    }
20    | null

parsed.walk(type, callback)

Walks each node of the given type inside parsed.nodes.

1parsed.walk(type: string | RegExp, callback: (node) => boolean | void): boolean | void