CSSTree
Fast detailed CSS parser
Work in progress
Docs and tools:
Related projects:
Install
> npm install css-tree
Usage
var csstree = require('css-tree');
csstree.walk(csstree.parse('.a { color: red; }'), function(node) {
console.log(node.type);
});
API
parse(source[, options])
Parses CSS to AST.
NOTE: Currenly parser omits redundant separators, spaces and comments (except exclamation comments, i.e. /*! comment */
) on AST build.
Options:
context
String – parsing context, useful when some part of CSS is parsing (see below)property
String – make sense for declaration
context to apply some property specific parse rulespositions
Boolean – should AST contains node position or not, store data in info
property of nodes (false
by default)filename
String – filename of source that adds to info when positions
is true, uses for source map generation (<unknown>
by default)line
Number – initial line number, useful when parse fragment of CSS to compute correct positionscolumn
Number – initial column number, useful when parse fragment of CSS to compute correct positions
Contexts:
stylesheet
(default) – regular stylesheet, should be suitable in most casesatrule
– at-rule (e.g. @media screen, print { ... }
)atruleExpression
– at-rule expression (screen, print
for example above)ruleset
– rule (e.g. .foo, .bar:hover { color: red; border: 1px solid black; }
)selectorList
– selector group (.foo, .bar:hover
for ruleset example)selector
– selector (.foo
or .bar:hover
for ruleset example)block
– block content w/o curly braces (color: red; border: 1px solid black;
for ruleset example)declaration
– declaration (color: red
or border: 1px solid black
for ruleset example)value
– declaration value (red
or 1px solid black
for ruleset example)
var ast = csstree.parse('.example { color: red }');
var ast = csstree.parse('.foo.bar', {
context: 'simpleSelector',
positions: true
});
clone(ast)
Make an AST node deep copy.
var orig = csstree.parse('.test { color: red }');
var copy = csstree.clone(orig);
csstree.walk(copy, function(node) {
if (node.type === 'Class') {
node.name = 'replaced';
}
});
console.log(csstree.translate(orig));
console.log(csstree.translate(copy));
translate(ast)
Converts AST to string.
var ast = csstree.parse('.test { color: red }');
console.log(csstree.translate(ast));
translateWithSourceMap(ast)
The same as translate()
but also generates source map (nodes should contain positions in info
property).
var ast = csstree.parse('.test { color: red }', {
filename: 'my.css',
positions: true
});
console.log(csstree.translateWithSourceMap(ast));
walk(ast, handler)
Visits each node of AST in natural way and calls handler for each one. handler
receives three arguments:
node
– current AST nodeitem
– node wrapper when node is a list member; this wrapper contains references to prev
and next
nodes in listlist
– 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
or root nodestylesheet
– refers to closest StyleSheet
node, it may be a top-level or at-rule block stylesheetatruleExpression
– refers to AtruleExpression
node if current node inside at-rule expressionruleset
– refers to Rule
node if current node inside a rulesetselector
– refers to SelectorList
node if current node inside a selector listdeclaration
– refers to Declaration
node if current node inside a declarationfunction
– refers to closest Function
or FunctionalPseudo
node if current node inside one of them
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);
walkUp(ast, handler)
Same as walk()
but visits nodes in down-to-top order. Useful to process deepest nodes and then their parents.
var csstree = require('css-tree');
var ast = csstree.parse('.a { color: red; }');
csstree.walk(ast, function(node) {
console.log(node.type);
});
csstree.walkUp(ast, function(node) {
console.log(node.type);
});
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.
License
MIT
Syntax matching use mdn/data by Mozilla Contributors