2.3.1

• Added :host, :host() and :host-context() pseudo class support (#216)
• Fixed generator, parse and parse-selector entry points by adding missed NestedSelector node type
• Removed npm > 7 version requirement (#218)

2.3.0 CSS Nesting, units introspection & customisation

• Added CSS Nesting support:
  • Added NestingSelector node type for & (a nesting selector) in selectors
  • Added @nest at-rule
  • Changed behaviour for @media inside a Rule to parse its block content as a Declaration first
  • Changed DeclarationList behaviour to follow the rules for Rule's block
• Added the dimension units introspection & customisation:
  • Added Lexer#units dictionary to provide unit groups (length, angle, etc.) used for matching
  • Changed Lexer's constructor to take into consideration config.units to override default units
  • Extended lexer's dump to contain a units dictionary
• Bumped mdn-data to 2.0.30

2.2.1

• Fixed a regression added in 2.2.0 for at-rule syntax matching when at-rule has no prelude (#203)

2.2.0

• Bumped mdn-data to 2.0.28
• Added support for CSS wide keywords revert and revert-layer
• Dropped support for expression() the same way as CSS wide keywords
• Patched background-clip property definition to match Backgrounds and Borders 4 (#190)
• Patched content property definition to allow attr() (#201)
• Fixed definition syntax matching when a comma is expected before a <delim-token>
• Fixed at-rule validation fail when no prelude is specified and its syntax allows an empty prelude, that's the case for @page at-rule (#191)
• Added new units according to current state of CSS Values and Units 4: rex, cap, rcap, rch, ic, ric, lh, rlh, vi, vb, sv*, lv*, dv*
• Added container relative length units from CSS Containment 3: cqw, cqh, cqi, cqb, cqmin, cqmax
• Removed vm unit (supposed to be an old IE versions supported this unit instead of vmax)
• Value definition syntax:
  • Added support for stacked multipliers +# and #? according to spec (#199)
  • Added parsing of a dimension in range definition notations, however, a validation for such ranges is not supported yet (#192)
  • Changed parsing of range definition notation to not omitting [-∞,∞] ranges

2.1.0

• Bumped mdn-data to 2.0.27
• Added module field to package.json
• Fixed minor issues in CommonJS version
• Fixed css-tree/utils export (#181)
• Added css-tree/convertor export
• Added css-tree/selector-parser export (~27kb when bundled, #183)
• Reduced bundle size:
  • css-tree/parser 50kb -> 41kb
  • css-tree/generator 46kb -> 23kb
• Renamed syntaxes into types in css-tree/definition-syntax-data-patch
• Added parsing support for :is(), :-moz-any(), :-webkit-any() and :where() (#182, #184)

2.0.4

• Extended Node.js support to include ^10
• Fixed generate() in safe mode to add a whitespace between <dimension-token> and <hash-token>, otherwise some values are broken in IE11, e.g. border properties (#173)
• Removed allowance for : for an attribute name on AttributeSelector parsing as it does not meet the CSS specs (details)

2.0.3

• Fixed unintended whitespace on generate() in safe mode between type-selector and id-selector (e.g. a#id). A regression was introduces in 2.0.2 since IE11 fails on values when <hash-token> goes after <ident-token> without a whitespace in the middle, e.g. 1px solid#000. Thus, in one case, a space between the <ident-token> and the <hash-token> is required, and in the other, vice versa. Until a better solution found, a workaround is used on id-selector generation by producing a <delim-token> instead of <hash-token>.

2.0.2

• Updated width, min-width and max-width syntax definitions
• Patched counter related syntaxes to match specs until updated in mdn-data
• Replaced source-map with source-map-js which reduce install size by ~700KB
• Fixed calc() function consumption on definition syntax matching
• Fixed generate() auto emitting a whitespace edge cases when next token starts with a dash (minus)
• Fixed generate() safe mode to cover more cases for IE11
• Fixed CommonJS bundling by adding browser files dist/data.cjs and dist/version.cjs
• Added exports:
  • css-tree/definition-syntax-data
  • css-tree/definition-syntax-data-patch

2.0.1

• Extended Node.js support to include ^12.20.0 and ^14.13.0 versions

2.0 – ESM support, no white space nodes on AST, auto encode/decode string and url values, and more

ES2020 syntax and support for ESM

The source code was refactored to use ES2020 syntax and ES modules by default. However, Commonjs version of library is still supported, so the package became a dual module. Using ESM allowed to reduce bundle size from 167Kb down to 164Kb despite that mdn-data grew up in size by 11Kb.

In case only a part of CSSTree functionality is used (for instance only for a parsing), it's possible now to use specific exports like css-tree/parser (see the full list of exports) to reduce a bundle size. As new package mechanics are used, the minimal version for Node.js was changed to 14.16+.

No white space nodes on AST anymore

Previously white spaces was preserved on CSS parsing as a WhiteSpace node with a single space. This was mostly needed to avoid combining the CSS tokens into one when generating back into a CSS string. This is no longer necessary, as the generator has been reworked to independently determine when to use spaces in output. This simplify analysis and construction of the AST, and also improves the performance and memory consumption a bit.

Some changes have been made to the AST construction during parsing. First of all, white spaces in selectors are now producing { type: 'Combinator', name: ' ' } nodes when appropriate. Second, white spaces surrounding operators - and + are now replacing with a single space and appending to operators to preserve a behaviour of expressions in calc() functions. Finally, the only case a WhiteSpace node is now created is a custom property declaration with a single whitespace token as the value, since --var: ; and --var:; have different behaviour in terms of CSS.

Improved generator

CSS Syntax Module defines rules for CSS serialization that it must "round-trip" with parsing. Starting with this release the CSSTree's generator follows these rules and determines itself when to output the space to avoid unintended CSS tokens combining.

The spec rules allow to omit whitespaces in most cases. However, some older browsers fail to parse the resulting CSS because they didn't follow the spec. For this reason, the generator supports two modes:

• safe (by default) which adds an extra space in some edge cases;
• spec which completely follows the spec.

import { parse, generate } from 'css-tree';

const ast = parse('a { border: calc(1px) solid #ff0000 }');

// safe mode is by default
// the same as console.log(generate(ast, { mode: 'safe' }));
console.log(generate(ast));
// a{border:calc(1px) solid#ff0000}

// spec mode
console.log(generate(ast, { mode: 'spec' }));
// a{border:calc(1px)solid#ff0000}

These changes to the generator bring it closer to the pretty print output that will be implemented in future releases.

Auto encoding and decoding of values

For string and url values an auto encoding and decoding was implemented. This means you no longer need to do any preprocessing on string or url values before analyzing or transforming of it. Most noticeable simplification with Url nodes:

// CSSTree 1.x
csstree.walk(ast, function(node) {
    if (node.type === 'Url') {
        if (node.value.type === 'String') {
            urls.push(node.value.value.substring(1, node.value.value.length - 1));
        } else {
            urls.push(node.value.value);
        }
    }
});

// CSSTree 2.0
csstree.walk(ast, function(node) {
    if (node.type === 'Url') {
        urls.push(node.value);
    }
});

It is worth noting that despite the fact that in many cases the example above will give the same results for both versions, a solution with CSSTree 1.x still lacks decoding of escaped sequences, that is, additional processing of values is needed.

Additionaly, encode and decode functions for string, url and ident values are available as utils:

import { string, url, ident } from 'css-tree';

string.decode('"hello\\9  \\"world\\""') // hello\t "world"
string.decode('\'hello\\9  "world"\'')   // hello\t "world"
string.encode('hello\t "world"')         // "hello\9  \"world\""
string.encode('hello\t "world"', true)   // 'hello\9  "world"'

url.decode('url(file\ \(1\).ext)')  // file (1).ext
url.encode('file (1).ext')          // url(file\ \(1\).ext)

ident.decode('hello\\9 \\ world')   // hello\t world
ident.encode('hello\t world')       // hello\9 \ world

Changes

• Package
  • Dropped support for Node.js prior 14.16 (following patch versions changed it to ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0)
  • Converted to ES modules. However, CommonJS is supported as well (dual module)
  • Added exports for standalone parts instead of internal paths usage (use as import * as parser from "css-tree/parser" or require("css-tree/parser")):
    • css-tree/tokenizer
    • css-tree/parser
    • css-tree/walker
    • css-tree/generator
    • css-tree/lexer
    • css-tree/definition-syntax
    • css-tree/utils
  • Changed bundle set to provide dist/csstree.js (an IIFE version with csstree as a global name) and dist/csstree.esm.js (as ES module). Both are minified
  • Bumped mdn-data to 2.0.23
• Tokenizer
  • Changed tokenize() to take a function as second argument, which will be called for every token. No stream instance is creating when second argument is ommited.
  • Changed TokenStream#getRawLength() to take second parameter as a function (rule) that check a char code to stop a scanning
  • Added TokenStream#forEachToken(fn) method
  • Removed TokenStream#skipWS() method
  • Removed TokenStream#getTokenLength() method
• Parser
  • Moved SyntaxError (custom parser's error class) from root of public API to parser via parse.SyntaxError
  • Removed parseError field in parser's SyntaxError
  • Changed selector parsing to produce { type: 'Combinator', name: ' ' } node instead of WhiteSpace node
  • Removed producing of WhiteSpace nodes with the single exception for a custom property declaration with a single white space token as a value
  • Parser adds a whitespace to + and - operators, when a whitespace is before and/or after an operator
  • Exposed parser's inner configuration as parse.config
  • Added consumeUntilBalanceEnd(), consumeUntilLeftCurlyBracket(), consumeUntilLeftCurlyBracketOrSemicolon(), consumeUntilExclamationMarkOrSemicolon() and consumeUntilSemicolonIncluded() methods to parser's inner API to use with Raw instead of Raw.mode
  • Changed Nth to always consume of clause when presented, so it became more general and moves validation to lexer
  • Changed String node type to store decoded string value, i.e. with no quotes and escape sequences
  • Changed Url node type to store decoded url value as a string instead of String or Raw node, i.e. with no quotes, escape sequences and url() wrapper
• Generator
  • Generator is now determines itself when a white space required between emitting tokens
  • Changed chunk() handler to token() (output a single token) and tokenize() (split a string into tokens and output each of them)
  • Added mode option for generate() to specify a mode of token separation: spec or safe (by default)
  • Added emit(token, type, auto) handler as implementation specific token processor
  • Changed Nth to serialize +n as n
  • Added auto-encoding for a string and url tokens on serialization
• Lexer
  • Removed Lexer#matchDeclaration() method
• Utils
  • Added ident, string and url helpers to decode/encode corresponding values, e.g. url.decode('url("image.jpg")') === 'image.jpg'
  • List
    • Changed List to be iterable (iterates data)
    • Changed List#first, List#last and List#isEmpty to getters
    • Changed List#getSize() method to List#size getter
    • Removed List#each() and List#eachRight() methods, List#forEach() and List#forEachRight() should be used instead