css-tree

What is css-tree?

The css-tree npm package is a tool for parsing and manipulating CSS. It allows users to parse CSS strings into an abstract syntax tree (AST), walk over nodes in the tree, generate CSS strings, and more. It is useful for tasks such as CSS minification, linting, and transformation.

What are css-tree's main functionalities?

Parsing CSS to AST

This feature allows you to parse a CSS string and convert it into an abstract syntax tree (AST) for further manipulation or analysis.

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

Walking the AST

This feature enables you to traverse the AST and apply functions or extract information from specific nodes.

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

Generating CSS from AST

After manipulating the AST, you can generate a CSS string from the modified AST, which can be used in stylesheets or injected into web pages.

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

Minifying CSS

css-tree can be used to minify CSS by parsing it with compression options and then translating the AST back to a CSS string.

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

Other packages similar to css-tree

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It can do similar tasks as css-tree, such as parsing, walking the AST, and generating CSS. PostCSS is plugin-based, which makes it more extensible and allows for a wide range of transformations.

sass

Sass is a preprocessor scripting language that is interpreted or compiled into CSS. It offers more syntactic features compared to css-tree, such as variables, nesting, and mixins, but it is not primarily focused on parsing and manipulating existing CSS.

less

Less is another CSS pre-processor, similar to Sass, that extends the capabilities of CSS with dynamic behavior such as variables, mixins, operations, and functions. Less and css-tree serve different purposes, with Less focusing on writing CSS in a more functional way and css-tree on parsing and manipulation.

clean-css

clean-css is a fast and efficient CSS optimizer for Node.js and the browser. It focuses on minification, which is one of the features of css-tree, but does not provide a general-purpose CSS parsing and manipulation API.

README

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

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

License

MIT

Syntax matching use mdn/data by Mozilla Contributors

Changelog

1.0.0-alpha17 (March 13, 2017)

• Implemented new concept of syntax
  • Changed main exports to expose a default syntax
  • Defined initial CSS syntax
  • Implemented createSyntax() method to create a new syntax from scratch
  • Implemented fork() method to create a new syntax based on given via extension
• Parser
  • Implemented mediaQueryList and mediaQuery parsing contexts
  • Implemented CDO and CDC node types
  • Implemented additional declaration property prefix hacks (# and +)
  • Added support for UTF-16LE BOM
  • Added support for @font-face at-rule
  • Added chroma() to legacy IE filter functions
  • Improved HexColor to consume hex only
  • Improved support for \0 and \9 hacks (#2)
  • Relaxed number check for Ratio terms
    • Allowed fractal values as a Ratio term
    • Disallowed zero number as a Ratio term
  • Changed important clause parsing
    • Allowed any identifier for important (to support hacks like !ie)
    • Store true for important field in case identifier equals to important and string otherwise
  • Fixed parse error formatted message rendering to take into account tabs
  • Removed exposing of Parser class
  • Removed readSelectorSequence(), readSequenceFallback() and readSelectorSequenceFallback methods
  • Used single universal sequence consumer for AtruleExpression, Selector and Value
• Generator
  • Reworked generator to use auto-generated functions based on syntax definition (additional work to be done in next releases)
  • Implemented translateMarkup(ast, before, after) method for complex cases
  • Reworked translateWithSourceMap to be more flexible (based on translateMarkup, additional work to be done in next releases)
• Walker
  • Reworked walker to use auto-generated function based on syntax definition (additional work to be done in next releases)
• Lexer
  • Prepared for better extensibility (additional work to be done in next releases)
  • Implemented checkStructure(ast) method to check AST structure based on syntax definition
  • Update syntax dictionaries to latest mdn/data
    • Add missing <'offset-position'> syntax
    • Extended <position> property with -webkit-sticky (@sergejmueller, #37)
  • Improved mismatch error position
• Implemented script (gen:syntax) to generate AST format reference page (docs/ast.md) using syntax definition