- [parse(source)](#parsesource)
- [walk(node, options, context)](#walknode-options-context)
- [generate(node, options)](#generatenode-options)
- [AST format](#ast-format)
- [AtKeyword](#atkeyword)
- [Comma](#comma)
- [Function](#function)
- [Group](#group)
- [Keyword](#keyword)
- [Multiplier](#multiplier)
- [Property](#property)
- [Range](#range)
- [String](#string)
- [Token](#token)
- [Type](#type)
## parse(source)
Arguments:
- **source**: `string`
A definition to parse
```js
import { definitionSyntax } from 'css-tree';
definitionSyntax.parse('foo | bar');
// { Group
// terms:
// [ { Keyword name: 'foo' },
// { Keyword name: 'bar' } ],
// combinator: '|',
// disallowEmpty: false,
// explicit: false }
```
## walk(node, options, context)
Arguments:
- **node**: `Object`
AST node
- **options**: `{ enter?: function, leave?: function }` or `function`
An object to specify enter and/or leave handlers. When value is a function, it treated as `{ enter: function }`. One of handlers is required.
- **context** (optional): `any`
Defines a value as `this` in enter and leave handlers.
```js
import { definitionSyntax } from 'css-tree';
const ast = definitionSyntax.parse('foo | bar');
definitionSyntax.walk(ast, {
enter(node) {
console.log('enter', node.type, node.combinator || node.name || '');
},
leave(node) {
console.log('leave', node.type, node.combinator || node.name || '');
}
});
// enter Group |
// enter Keyword foo
// leave Keyword foo
// enter Keyword bar
// leave Keyword bar
// leave Group |
definitionSyntax.walk(ast, node =>
console.log(node.type, node.combinator || node.name || '')
);
// Group |
// Keyword foo
// Keyword bar
```
## generate(node, options)
- **node**: `Object`
AST node to generate a string from
- **options** (optional): `Object`
An object to specify output behaviour (all options are optional):
- **forceBraces**: `Boolean` (default: `false`)
Enforce printing brackets for any groups (even implicit). Useful for debugging and priority revelation.
- **compact**: `Boolean` (default: `false`)
Avoid formatting (primary whitespaces around brackets and so on) when possible.
- **decorate**: `function(nodeGenerateResult, node)`
A function to post-process result of node translation to a string. Handy to make some kind of result wrapping.
```js
import { definitionSyntax } from 'css-tree';
const ast = definitionSyntax.parse('foo && bar || [ baz | qux ]');
definitionSyntax.generate(ast);
// "foo && bar || [ baz | qux ]"
definitionSyntax.generate(ast, { compact: true });
// "foo&&bar||[baz|qux]"
definitionSyntax.generate(ast, { forceBraces: true });
// "[ [ foo && bar ] || [ baz | qux ] ]"
definitionSyntax.generate(ast, {
decorate(content, node) {
return node.type === 'Keyword' && node.name.startsWith('b')
? `${content}`
: content;
}
});
// "foo && bar || [ baz | qux ]"
```
## AST format
### AtKeyword
```js
{
type: "AtKeyword",
name: String
}
```
A CSS at-keyword token (a keyword prescended by commertial at), e.g. `@media` or `@keyframes`.
### Comma
```js
{
type: "Comma"
}
```
Just a comma. Comma is widely used and has complicated rules in definition syntax, that's why it represents by a separate node type.
### Function
```js
{
type: "Function",
name: String
}
```
A CSS function token (a keyword followed by left parenthesis), e.g. `foo(` or `rgb(`.
### Group
```js
{
type: "Group",
terms: Array.