css-tree

CSSTree

The set of tools for working with CSS, including fast detailed parser (string->AST), walkers, generators (AST->string) and even lexer (validation and matching) based on knowledge of spec and browser implementations (see schema for details). The main goal to be efficient and W3C spec complient, with focus on analyzing and source-to-source processing.

Work in progress. The project in alpha stage since some parts need further experiments, AST format and API are subjects to change. However it's stable enough and used by packages like CSSO (CSS minifier) in production.

• Parsing CSS into AST
• AST format
• Translate AST to string
• AST traversal
• Utils to work with AST

Docs and tools:

• AST Explorer – explore CSSTree AST format with zero setup
• CSS syntax reference
• CSS syntax validator

Related projects:

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

Install

> npm install css-tree

Usage

var csstree = require('css-tree');
var ast = csstree.parse('.example { world: "!" }');

csstree.walk(ast, function(node) {
    if (node.type === 'ClassSelector' && node.name === 'example') {
        node.name = 'hello';
    }
});

console.log(csstree.translate(ast));
// .hello{world:"!"}

Top level API

License

MIT

Syntax matching uses mdn/data by Mozilla Contributors