css-tree

What are css-tree's main functionalities?

const csstree = require('css-tree');
const ast = csstree.parse('.example { color: red; }');

csstree.walk(ast, function(node) {
  if (node.type === 'ClassSelector') {
    console.log(node.name);
  }
});

const modifiedAST = csstree.parse('.example { color: blue; }');
const css = csstree.generate(modifiedAST);

const compressedCSS = csstree.translate(csstree.parse('.example { color: red; }', { compress: true }));

CSSTree

Fast detailed CSS parser

Work in progress. Project in alpha stage since AST format is subject to change.

• Parsing CSS into AST
• AST format
• Translate AST to string
• AST traversal
• Utils to work with AST
• Working with syntax
• API references:
  • Tokenizer
  • Parser
  • Lexer
  • List

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 === 'Class' && node.name === 'example') {
        node.name = 'hello';
    }
});

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

License

MIT

Syntax matching use mdn/data by Mozilla Contributors

1.0.0-alpha15 (February 8, 2017)

• Fixed broken atruleExpression context
• Fixed vendor prefix detection in keyword() and property()
• Fixed property() to not lowercase custom property names
• Added variable boolean flag in property() result
• Renamed scanner into tokenizer
• Ranamed syntax into lexer
• Moved docs/*.html files to csstree/docs repo
• Added element() function for Value context (-moz-element() supported as well)
• Merged Universal node type into Type
• Renamed node types:
  • Id -> IdSelector
  • Class -> ClassSelector
  • Type -> TypeSelector
  • Attribute -> AttributeSelector
  • PseudoClass -> PseudoClassSelector
  • PseudoElement -> PseudoElementSelector
  • Hash -> HexColor
  • Space -> WhiteSpace
  • An+B -> AnPlusB
• Removed Progid node type
• Relaxed MediaQuery consumer to not validate syntax on parse and to include whitespaces in children sequence as is
• Added WhiteSpace.value property to store whitespace sequence
• Implemented parser options to specify what should be parsed in details (when option is false some part of CSS represents as balanced Raw):
  • parseAtruleExpression – to parse at-rule expressions (true by default)
  • parseSelector – to parse rule's selector (true by default)
  • parseValue - to parse declaration's value (true by default)
  • parseCustomProperty – to parse value and fallback of custom property (false by default)
• Changed tokenization to stick leading hyphen minus to identifier token
• Changed selector parsing:
  • Don't convert spaces into descendant combinator
  • Don't validate selector structure on parsing (selectors may be checked by lexer later)
• Initial refactoring of docs
• Various improvements and fixes