# Tài liệu AST CSS Tài liệu này tổng hợp các loại node AST được sinh ra từ hai grammar: - `CSSParser.js` - `GridColumnGrammar.js` --- ## 1) Tổng quan target parse ### `CSSParser` (`CSSParser.js`) - Các target thường dùng: - `exp`: biểu thức CSS có tính toán (`calc`, `var`, phép toán số học, số có đơn vị) - `declaration_value`: giá trị khai báo CSS tổng quát (1 item hoặc nhiều item) ### `gridColumnParser` (`GridColumnGrammar.js`) - Target: - `grid_column`: giá trị cho `grid-column` / `grid-row` --- ## 2) Các node AST từ `CSSParser.js` ## `MeasureLiteral` **Ý nghĩa** - Số có đơn vị CSS (ví dụ: `15px`, `50%`, `1.2rem`, `3fr`). **Sinh ra từ rule** - `measure_num -> .msnumber` **Shape** ```js { type: "MeasureLiteral", value: number, unit: string } ``` **Ví dụ** - Input: `15px` - AST: `{ type: "MeasureLiteral", value: 15, unit: "px" }` --- ## `NumericLiteral` **Ý nghĩa** - Số không đơn vị (ví dụ: `1`, `1.5`, `.25`). **Sinh ra từ rule** - `number -> .number` - Được dùng qua: - `exp -> number` - `list_items -> number` **Shape** ```js { type: "NumericLiteral", value: number } ``` --- ## `VariableName` **Ý nghĩa** - Tên CSS custom property trong `var(...)` (ví dụ: `--main-color`). **Sinh ra từ rule** - `variable_name -> .varname` **Shape** ```js { type: "VariableName", name: string } ``` **Ví dụ** - Input: `--abcd` - AST: `{ type: "VariableName", name: "--abcd" }` --- ## `Identifier` **Ý nghĩa** - Từ khóa/tên chung dạng word (ví dụ: `auto`, `bold`, `Arial`, `calc`). **Sinh ra từ rule** - `ident -> .word` - `list_items -> .word` **Shape** ```js { type: "Identifier", name: string } ``` **Ghi chú** - Trong function call, `callee` thường là `Identifier`. --- ## `ColorLiteral` **Ý nghĩa** - Màu hex CSS (`#fff`, `#ffffff`, `#ffffffff`, ...). **Sinh ra từ rule** - `color -> .color` - `list_items -> color` **Shape** ```js { type: "ColorLiteral", value: string } ``` --- ## `CallExpression` **Ý nghĩa** - Lời gọi hàm kiểu CSS (ví dụ: `calc(...)`, `var(...)`). **Sinh ra từ rule** - `function_call -> function_callee '(' args_list ')'` - `function_call -> function_callee '(' ')'` **Shape** ```js { type: "CallExpression", callee: Identifier, arguments: ASTNode[] } ``` **Ví dụ** - Input: `var(--gap)` ```js { type: "CallExpression", callee: { type: "Identifier", name: "var" }, arguments: [ { type: "VariableName", name: "--gap" } ] } ``` --- ## `BinaryExpression` **Ý nghĩa** - Biểu thức nhị phân (`+`, `-`, `*`, `/`) có xét độ ưu tiên toán tử. **Sinh ra từ rule** - `exp -> exp bin_op exp` **Shape** ```js { type: "BinaryExpression", left: ASTNode, operator: { type: string, // token type, thường là "symbol" content: "+" | "-" | "*" | "/" }, right: ASTNode } ``` **Ghi chú quan trọng** - Trường `operator` trong `BinaryExpression` được lấy trực tiếp từ token (`operatorTokenToAst`), không phải node `BinaryOperator`. --- ## `BinaryOperator` (node trung gian) **Ý nghĩa** - Node toán tử trung gian do rule `bin_op` tạo ra. **Sinh ra từ rule** - `bin_op -> '+' | '-' | '*' | '/'` **Shape** ```js { type: "BinaryOperator", content: "+" | "-" | "*" | "/" } ``` **Trạng thái sử dụng** - Chủ yếu là node trung gian trong parse. - AST kết quả cuối cho `exp` sẽ là `BinaryExpression` với `operator` dạng token object. --- ## `DeclarationList` **Ý nghĩa** - Danh sách nhiều item trong giá trị khai báo CSS, ngăn cách bởi khoảng trắng. **Sinh ra từ rule** - `exp_list -> list_items list_items` - `exp_list -> exp_list list_items` **Shape** ```js { type: "DeclarationList", children: Array< Identifier | MeasureLiteral | ColorLiteral | NumericLiteral | CallExpression > } ``` **Ví dụ** - Input: `auto 15px #fff` ```js { type: "DeclarationList", children: [ { type: "Identifier", name: "auto" }, { type: "MeasureLiteral", value: 15, unit: "px" }, { type: "ColorLiteral", value: "#fff" } ] } ``` --- ## 3) Các node AST từ `GridColumnGrammar.js` ## `GridLine` **Ý nghĩa** - Một vế của `grid-column` / `grid-row` (`start` hoặc `end`). **Sinh ra từ các rule** - `grid_line -> auto` - `grid_line -> ` - `grid_line -> ` - `grid_line -> ` - `grid_line -> span ` - `grid_line -> span ` - `grid_line -> span ` - `grid_line -> span ` **Shape** ```js { type: "GridLine", auto: boolean, span: boolean, value: number | null, ident: string | null } ``` **Ý nghĩa các field** - `auto`: `true` nếu là `auto` - `span`: `true` nếu có từ khóa `span` - `value`: số line index/span count - `ident`: custom ident (`col-start`, `main`, ...) --- ## `GridColumn` **Ý nghĩa** - Giá trị đầy đủ của `grid-column` / `grid-row`. **Sinh ra từ rule** - `grid_column -> grid_line` - `grid_column -> grid_line '/' grid_line` **Shape** ```js { type: "GridColumn", start: GridLine, end: GridLine | null } ``` **Ví dụ** - Input: `1 / span 1` ```js { type: "GridColumn", start: { type: "GridLine", auto: false, span: false, value: 1, ident: null }, end: { type: "GridLine", auto: false, span: true, value: 1, ident: null } } ``` --- ## 4) Bảng tổng hợp nhanh | Node type | File nguồn | Mục đích | |---|---|---| | `MeasureLiteral` | `CSSParser.js` | Số có đơn vị CSS | | `NumericLiteral` | `CSSParser.js` | Số không đơn vị | | `VariableName` | `CSSParser.js` | CSS variable name (`--x`) | | `Identifier` | `CSSParser.js` | Word token chung | | `ColorLiteral` | `CSSParser.js` | Màu hex | | `CallExpression` | `CSSParser.js` | Gọi hàm (`calc`, `var`, ...) | | `BinaryExpression` | `CSSParser.js` | Biểu thức toán học | | `BinaryOperator` | `CSSParser.js` | Node trung gian cho `bin_op` | | `DeclarationList` | `CSSParser.js` | Danh sách item của declaration value | | `GridLine` | `GridColumnGrammar.js` | Một line trong grid placement | | `GridColumn` | `GridColumnGrammar.js` | Giá trị `grid-column` / `grid-row` | --- ## 5) Ghi chú về phạm vi parse - `computeMeasureExpression(...)` trong `CSSParser.js` parse theo target `exp`, nên chủ yếu dùng nhóm node: - `CallExpression` - `BinaryExpression` - `MeasureLiteral` - `NumericLiteral` - `VariableName` - Các node như `DeclarationList`, `ColorLiteral`, `Identifier` vẫn được sinh ra khi parse target `declaration_value`.