smelukov / csstree Goto Github PK

• CSS syntax reference
• CSS syntax validator

Related:

• csstree-validator – NPM package to validate CSS
• stylelint-csstree-validator – plugin for stylelint to validate CSS
• Gulp plugin
• Sublime plugin
• VS Code plugin

> npm install css-tree

var csstree = require('css-tree');

csstree.walk(csstree.parse('.a { color: red; }'), function(node) {
  console.log(node.type);
});
// Class
// SimpleSelector
// Selector
// Property
// Identifier
// Value
// Declaration
// Block
// Ruleset
// StyleSheet

Parse CSS to AST.

NOTE: Currenly parser omit 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 rules
• positions 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 positions
• column Number – initial column number, useful when parse fragment of CSS to compute correct positions

Contexts:

• stylesheet (default) – regular stylesheet, should be suitable in most cases
• atrule – 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; })
• selector – selector group (.foo, .bar:hover for ruleset example)
• simpleSelector – 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)

// simple parsing with no options
var ast = csstree.parse('.example { color: red }');

// parse with options
var ast = csstree.parse('.foo.bar', {
    context: 'simpleSelector',
    positions: true
});

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));
// .test{color:red}
console.log(csstree.translate(copy));
// .replaced{color:red}

Converts AST to string.

var ast = csstree.parse('.test { color: red }');
console.log(csstree.translate(ast));
// > .test{color:red}

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));
// { css: '.test{color:red}', map: SourceMapGenerator {} }

Visit all nodes of AST and call 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 or root node
• stylesheet – refers to closest StyleSheet node, it may be a top-level or at-rule block stylesheet
• atruleExpression – refers to AtruleExpression node if current node inside at-rule expression
• ruleset – refers to Ruleset node if current node inside a ruleset
• selector – refers to Selector node if current node inside a selector
• declaration – refers to Declaration node if current node inside a declaration
• function – refers to closest Function or FunctionalPseudo node if current node inside one of them

// 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' ]

Same as walk() but visits Ruleset and Atrule nodes only.

Same as walkRules() but visits nodes in reverse order (from last to first).

Visit all declarations.

MIT

Template:CSSData by Mozilla Contributors is licensed under [CC-BY-SA 2.5]