# AST traversal - [Basic example](#basic-example) - [walk\(ast, handler\)](#walkast-handler) - [walkUp\(ast, handler\)](#walkupast-handler) - [walkRules\(ast, handler\)](#walkrulesast-handler) - [walkRulesRight\(ast, handler\)](#walkrulesrightast-handler) - [walkDeclarations\(ast, handler\)](#walkdeclarationsast-handler) ## Basic example ```js var csstree = require('css-tree'); csstree.walk(csstree.parse('.a { color: red; }'), function(node) { console.log(node.type); }); // StyleSheet // Rule // SelectorList // Selector // ClassSelector // Block // Declaration // Value // Identifier ``` ## walk(ast, handler) Visits each node of AST in natural way and calls handler for each one. `handler` receives three arguments: - `node` – current AST node - `item` – node wrapper when node is a list member; this wrapper contains references to `prev` and `next` nodes in list - `list` – reference to list when node is a list member; it's useful for operations on list like `remove()` or `insert()` Context for handler an object, that contains references to some parent nodes: - `root` – refers to `ast` root node (actually it's a node passed to walker function) - `stylesheet` – refers to `StyleSheet` node, usually it's a root node - `atrulePrelude` – refers to `AtrulePrelude` node if any - `rule` – refers to closest `Rule` node if any - `selector` – refers to `SelectorList` node if any - `block` - refers to closest `Block` node if any - `declaration` – refers to `Declaration` node if any - `function` – refers to closest `Function`, `PseudoClassSelector` or `PseudoElementSelector` node if current node inside one of them ```js // collect all urls in declarations var csstree = require('./lib/index.js'); var urls = []; var ast = csstree.parse(` @import url(import.css); .foo { background: url('foo.jpg'); } .bar { background-image: url(bar.png); } `); csstree.walk(ast, function(node) { if (this.declaration !== null && node.type === 'Url') { var value = node.value; if (value.type === 'Raw') { urls.push(value.value); } else { urls.push(value.value.substr(1, value.value.length - 2)); } } }); console.log(urls); // [ 'foo.jpg', 'bar.png' ] ``` ## walkUp(ast, handler) Same as `walk()` but visits nodes in down-to-top order. Useful to process deepest nodes and then their parents. ```js var csstree = require('css-tree'); var ast = csstree.parse('.a { color: red; }'); csstree.walk(ast, function(node) { console.log(node.type); }); // StyleSheet // Rule // SelectorList // Selector // ClassSelector // Block // Declaration // Value // Identifier csstree.walkUp(ast, function(node) { console.log(node.type); }); // ClassSelector // Selector // SelectorList // Identifier // Value // Declaration // Block // Rule // StyleSheet ``` ## walkRules(ast, handler) Same as `walk()` but visits `Rule` and `Atrule` nodes only. ## walkRulesRight(ast, handler) Same as `walkRules()` but visits nodes in reverse order (from last to first). ## walkDeclarations(ast, handler) Visit all declarations.