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

CSSTree is a tool set for CSS: fast detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations. The main goal is to be efficient and W3C spec compliant, with focus on CSS analyzing and source-to-source transforming tasks.

Features

• Detailed parsing with an adjustable level of detail

  By default CSSTree parses CSS as detailed as possible, i.e. each single logical part is representing with its own AST node (see AST format for all possible node types). The parsing detail level can be changed through parser options, for example, you can disable parsing of selectors or declaration values for component parts.

• Tolerant to errors by design

  Parser behaves as spec says: "When errors occur in CSS, the parser attempts to recover gracefully, throwing away only the minimum amount of content before returning to parsing as normal". The only thing the parser departs from the specification is that it doesn't throw away bad content, but wraps it in a special node type (Raw) that allows processing it later.

• Fast and efficient

  CSSTree is created with focus on performance and effective memory consumption. Therefore it's one of the fastest CSS parsers at the moment.

• Syntax validation

  The built-in lexer can test CSS against syntaxes defined by W3C. CSSTree uses mdn/data as a basis for lexer's dictionaries and extends it with vendor specific and legacy syntaxes. Lexer can only check the declaration values currently, but this feature will be extended to other parts of the CSS in the future.

Projects using CSSTree

• Svelte – Cybernetically enhanced web apps
• SVGO – Node.js tool for optimizing SVG files
• CSSO – CSS minifier with structural optimizations
• NativeScript – NativeScript empowers you to access native APIs from JavaScript directly
• react-native-svg – SVG library for React Native, React Native Web, and plain React web projects
• penthouse – Critical Path CSS Generator
• Bit – Bit is the platform for collaborating on components
• and more...

Documentation

• AST format
• Parsing CSS → AST
  • parse(source[, options])
• Serialization AST → CSS
  • generate(ast[, options])
• AST traversal
  • walk(ast, options)
  • find(ast, fn)
  • findLast(ast, fn)
  • findAll(ast, fn)
• Util functions
  • Value encoding & decoding
    • property(name)
    • keyword(name)
    • ident
    • string
    • url
  • AST transforming
    • clone(ast)
    • fromPlainObject(object)
    • toPlainObject(ast)
• Value Definition Syntax
  • parse(source)
  • walk(node, options, context)
  • generate(node, options)
  • AST format

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

Usage

Install with npm:

npm install css-tree

Basic usage:

import * as csstree from 'css-tree';

// parse CSS to AST
const ast = csstree.parse('.example { world: "!" }');

// traverse AST and modify it
csstree.walk(ast, (node) => {
    if (node.type === 'ClassSelector' && node.name === 'example') {
        node.name = 'hello';
    }
});

// generate CSS from AST
console.log(csstree.generate(ast));
// .hello{world:"!"}

Syntax matching:

// parse CSS to AST as a declaration value
const ast = csstree.parse('red 1px solid', { context: 'value' });

// match to syntax of `border` property
const matchResult = csstree.lexer.matchProperty('border', ast);

// check first value node is a <color>
console.log(matchResult.isType(ast.children.first, 'color'));
// true

// get a type list matched to a node
console.log(matchResult.getTrace(ast.children.first));
// [ { type: 'Property', name: 'border' },
//   { type: 'Type', name: 'color' },
//   { type: 'Type', name: 'named-color' },
//   { type: 'Keyword', name: 'red' } ]

Exports

Is it possible to import just a needed part of library like a parser or a walker. That's might useful for loading time or bundle size optimisations.

import * as tokenizer from 'css-tree/tokenizer';
import * as parser from 'css-tree/parser';
import * as walker from 'css-tree/walker';
import * as lexer from 'css-tree/lexer';
import * as definitionSyntax from 'css-tree/definition-syntax';
import * as data from 'css-tree/definition-syntax-data';
import * as dataPatch from 'css-tree/definition-syntax-data-patch';
import * as utils from 'css-tree/utils';

Using in a browser

Bundles are available for use in a browser:

• dist/csstree.js – minified IIFE with csstree as global

<script src="node_modules/css-tree/dist/csstree.js"></script>
<script>
  csstree.parse('.example { color: green }');
</script>

• dist/csstree.esm.js – minified ES module

<script type="module">
  import { parse } from 'node_modules/css-tree/dist/csstree.esm.js'
  parse('.example { color: green }');
</script>

One of CDN services like unpkg or jsDelivr can be used. By default (for short path) a ESM version is exposing. For IIFE version a full path to a bundle should be specified:

<!-- ESM -->
<script type="module">
  import * as csstree from 'https://cdn.jsdelivr.net/npm/css-tree';
  import * as csstree from 'https://unpkg.com/css-tree';
</script>

<!-- IIFE with an export to global -->
<script src="https://cdn.jsdelivr.net/npm/css-tree/dist/csstree.js"></script>
<script src="https://unpkg.com/css-tree/dist/csstree.js"></script>

Top level API

License

MIT

Changelog

3.0.1 (November 1, 2024)

• Bumped mdn/data to 2.12.1
• Added errors array to the Lexer#validate() method result, providing details on problematic syntax.
• Added CSS wide keyword customization and introspection:
  • Added a Lexer#cssWideKeywords dictionary to list CSS-wide keywords
  • Updated the Lexer's constructor to consider config.cssWideKeywords for overriding the default list
  • Expanded the lexer's dump output to include the cssWideKeywords dictionary
  • Modified the fork() method to accept a cssWideKeywords option, allowing the addition of new keywords to the existing list
• Reverted changes to Block to include { and }, and Atrule and Rule to exclude { and } for a block (#296)
• Removed second parameter (assign) for the callback in the fork() method (e.g., syntax.fork((config, assign) => { ... })), as it simply refers to Object.assign()
• Fixes in syntaxes: <basic-shapes>, <absolute-color-function> and <'stroke-opacity'>