What changed in csstree from 2 to 3

5 releases numbered after v2.3.1 up to and including v3.2.1, stable releases only. v2.3.1 and v3.2.1 are the newest stable releases of 2 and 3 we track; this page follows them as new ones ship.

57 changes across 5 releases

Added 29

v3.2.0

  • Added `"sideEffects": false` in `package.json`
  • Added `list` option to the `parse()` method to specify whether the parser should produce a `List` (by default, `list: true`) or an array (`list: false`) for node's children
  • Added support for Functional Notation in definition syntax by wrapping function arguments into an implicit group when necessary
  • Added support for stacked multipliers `{A}?` and `{A,B}?` according to spec in definition syntax parsing
  • Added math functions support in syntax matching (e.g., `min()`, `max()`, etc.)
  • Added `onToken` option to the `parse()` method, which can be either an array or a function for token handling with type, start, end, and index parameters
  • Extended `TokenStream` with `getTokenEnd(tokenIndex)` method to return the token's end offset by index
  • Extended `TokenStream` with `getTokenType(tokenIndex)` method to return the token's type by index
  • Extended `TokenStream` with `isBlockOpenerTokenType(tokenType)` method to identify block opener tokens
  • Extended `TokenStream` with `isBlockCloserTokenType(tokenType)` method to identify block closer tokens
  • Extended `TokenStream` with `getBlockTokenPairIndex(tokenIndex)` method to return the index of the pair token for a block or `-1` if no pair exists

v3.1.0

  • Support for boolean expression multiplier in syntax definition, i.e. `<boolean-expr[ test ]>`
  • Add `source`, `startOffset`, `startLine`, and `startColumn` parameters to `OffsetToLocation` constructor
  • Expose `OffsetToLocation` class in the main entry point

v3.0.1

  • Added errors array to the Lexer#validate() method result, providing details on problematic syntax
  • Added Lexer#cssWideKeywords dictionary to list CSS-wide keywords

v3.0.0

  • Support for the @container at-rule
  • Support for the @starting-style at-rule
  • Support for the @scope at-rule
  • Support for the @position-try at-rule
  • Support for the @layer at-rule
  • Support for layer, layer() and supports() in the @media at-rule
  • Layer and LayerList node types
  • TokenStream#lookupTypeNonSC() method
  • <dashed-ident> to generic types
  • Feature, FeatureRange, FeatureFunction, Condition, and GeneralEnclosure node types for query-related at-rules
  • Support for functions in features and features in range context
  • SupportsDeclaration node type to encapsulate a declaration in a @supports query
  • Support for the selector() feature in @supports at-rule via FeatureFunction node
Changed 13

v3.2.0

  • Changed `generate()` to not auto insert whitespaces between tokens for raw values

v3.0.1

  • Bumped mdn/data to 2.12.1
  • 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

v3.0.0

  • Aligned <'font'> to CSS Fonts 4
  • Aligned <color> to CSS Color 5
  • Block to not include { and }
  • Atrule and Rule to include { and } for a block
  • Ratio parsing to use nodes instead of strings for left and right parts, allow any number for both parts, support functions in both parts, and permit omitting the right part
  • MediaFeature node type transitioned to Feature node type with kind: "media" in @media at-rule
  • MediaQuery node structure to include modifier, mediaType, and condition properties
  • parseWithFallback() to rollback tokenIndex before calling a fallback
Fixed 14

v3.2.0

  • Fixed `fork()` to extend `node` definitions instead of overriding them

v3.1.0

  • Fix `Raw` node value consumption by ignoring stop tokens inside blocks
  • Fix `TokenStream#balance` computation to handle unmatched brackets correctly
  • Fix syntax definition parser to allow a token to be followed by a multiplier
  • Fix location for `Layer` node

v3.0.1

  • Reverted changes to Block to include { and }, and Atrule and Rule to exclude { and } for a block
  • Fixed syntaxes for <basic-shapes>, <absolute-color-function> and <'stroke-opacity'>

v3.0.0

  • Initialization when Object.prototype is extended or polluted
  • fork() method to consider the generic option when creating a Lexer instance
  • Crash on parse error when custom line or offset is specified via options
  • speak syntax patch
  • :lang() to accept a list of <ident> or <string> per spec
  • Lexer matching for syntaxes referred to as <'property'> when the syntax has a top-level #-multiplier
  • Parsing of syntax definition to allow whitespaces in range multiplier
Removed 1

v3.0.1

  • Removed second parameter (assign) for the callback in the fork() method

One release in the range carries no categorized changes yet: v3.2.1. Their original notes, where the vendor published any, are below.

Original release notes, newest first

The list above is our reading of these notes; the originals from csstree are here, one fold per release.

v3.2.13.2.1
  • Fixed parsing of nested function in a group in definition syntax (#358)

View originalPermalink

v3.2.03.2.0
  • Added "sideEffects": false in package.json
  • Added list option to the parse() method to specify whether the parser should produce a List (by default, list: true) or an array (list: false) for node's children (e.g., SelectorList, Block, etc.)
  • Added support for Functional Notation in definition syntax (for now by wrapping function arguments into an implicit group when necessary, see #292)
  • Added support for stacked multipliers {A}? and {A,B}? according to spec in definition syntax parsing (#346)
  • Added math functions support in syntax matching (e.g., min(), max(), etc.) (#344)
  • Added onToken option to the parse() method, which can be either an array or a function:
    • When the value is an array, it is populated with objects { type, start, end } (token type, and its start and end offsets).
    • When the value is a function, it accepts type, start, end, and index parameters, and is invoked with a token API as this, enabling advanced token handling (see onToken). For example, the following demonstrates checking if all block tokens have matching pairs: 
      parse(css, {
    onToken(type, start, end, index) {
        if (this.isBlockOpenerTokenType(type)) {
            if (this.getBlockPairTokenIndex(index) === -1) {
                console.warn('No closing pair for', this.getTokenValue(index), this.getRangeLocation(start, end));
            }
        } else if (this.isBlockCloserTokenType(type)) {
            if (this.getBlockPairTokenIndex(index) === -1) {
                console.warn('No opening pair for', this.getTokenValue(index), this.getRangeLocation(start, end));
            }
        }
    }
});
  • Extended TokenStream with the following methods:
    • getTokenEnd(tokenIndex) – returns the token's end offset by index, complementing getTokenStart(tokenIndex)
    • getTokenType(tokenIndex) – returns the token's type by index
    • isBlockOpenerTokenType(tokenType) – returns true for <function-token>, <(-token>, <[-token>, and <{-token>
    • isBlockCloserTokenType(tokenType) – returns true for <)-token>, <]-token>, and <}-token>
    • getBlockTokenPairIndex(tokenIndex) – returns the index of the pair token for a block, or -1 if no pair exists
  • Changed generate() to not auto insert whitespaces between tokens for raw values (#356)
  • Fixed fork() to extend node definitions instead of overriding them. For example, fork({ node: { Dimension: { generate() { /* ... */ } } } }) will now update only the generate() method on the Dimension node, while inheriting all other properties from the previous syntax definition.
  • Bumped mdn/data to 2.27.1 and various fixes in syntaxes

View originalPermalink

v3.1.03.1.0
  • Added support for boolean expression multiplier in syntax definition, i.e. <boolean-expr[ test ]> (#304)
  • Added source, startOffset, startLine, and startColumn parameters to OffsetToLocation constructor, eliminating the need to call setSource() after creating a new OffsetToLocation instance
  • Exposed OffsetToLocation class in the main entry point, which was previously accessible only via css-tree/tokenizer
  • Fixed Raw node value consumption by ignoring stop tokens inside blocks, resolving an issue where Raw value consumption stopped prematurely. This fix also enables parsing of functions whose content includes stop characters (e.g., semicolons and curly braces) within declaration values, aligning with the latest draft of CSS Values and Units L5.
  • Fixed TokenStream#balance computation to handle unmatched brackets correctly. Previously, when encountering a closing bracket, the TokenStream would prioritize it over unmatched opening brackets, leading to improper parsing. For example, the parser would incorrectly consume the declaration value of .a { prop: ([{); } as ([{) instead of consuming it until all opened brackets were closed (([{); }). Now, unmatched closing brackets are discarded unless they match the most recent opening bracket on the stack. This change aligns CSSTree with CSS specifications and browser behavior.
  • Fixed syntax definition parser to allow a token to be followed by a multiplier (#303)
  • Fixed location for Layer node (#310)
  • Bumped mdn/data to 2.12.2

View originalPermalink

v3.0.13.0.1
  • 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'>

View originalPermalink

v3.0.03.0.0
  • Added support for the @container at-rule
  • Added support for the @starting-style at-rule
  • Added support for the @scope at-rule
  • Added support for the @position-try at-rule
  • Added support for the @layer at-rule
  • Added support for layer, layer() and supports() in the @media at-rule (according to the @import rule in Cascading and Inheritance 5)
  • Added Layer and LayerList node types
  • Added TokenStream#lookupTypeNonSC() method
  • Added <dashed-ident> to generic types
  • Bumped mdn/data to 2.10.0
  • Aligned <'font'> to CSS Fonts 4
  • Aligned <color> to CSS Color 5
  • Fixed initialization when Object.prototype is extended or polluted (#262)
  • Fixed fork() method to consider the generic option when creating a Lexer instance (#266)
  • Fixed crash on parse error when custom line or offset is specified via options (#251)
  • Fixed speak syntax patch (#241)
  • Fixed :lang() to accept a list of <ident> or <string> per spec (#265)
  • Fixed lexer matching for syntaxes referred to as <'property'>, when the syntax has a top-level #-multiplier (#102)
  • Relaxed parsing of syntax definition to allow whitespaces in range multiplier (#270)
  • Changed parseWithFallback() to rollback tokenIndex before calling a fallback
  • Changed Block to not include { and }
  • Changed Atrule and Rule to include { and } for a block
  • Changed Ratio parsing:
    • Left and right parts contain nodes instead of strings
    • Both left and right parts of a ratio can now be any number; validation of number range is no longer within the parser's scope.
    • Both parts can now be functions. Although not explicitly mentioned in the specification, mathematical functions can replace numbers, addressing potential use cases (#162).
    • As per the CSS Values and Units Level 4 specification, the right part of Ratio can be omitted. While this can't be a parser output (which would produce a Number node), it's feasible during Ratio node construction or transformation.
  • Changes to query-related at-rules:
    • Added new node types:
      • Feature: represents features like (feature) and (feature: value), fundamental for both @media and @container at-rules
      • FeatureRange: represents features in a range context
      • FeatureFunction: represents functional features such as @supports's selector() or @container's style()
      • Condition: used across all query-like at-rules, encapsulating queries with features and the not, and, and or operators
      • GeneralEnclosure: represents the <general-enclosed> production, which caters to unparsed parentheses or functional expressions

      Note: All new nodes include a kind property to define the at-rule type. Supported kinds are media, supports, and container

    • Added support for functions for features and features in a range context, e.g. (width: calc(100cm / 6))
    • Added a condition value for the parser's context option to parse queries. Use the kind option to specify the condition type, e.g., parse('...', { context: 'condition', kind: 'media' })
    • Introduced a features section in the syntax configuration for defining functional features of at-rules. Expand definitions using the fork() method. The current definition is as follows: 
      features: {
    supports: { selector() { /* ... */ } },
    container: { style() { /* ... */ } }
}
    • Changes for @media at-rule:
      • Enhanced prelude parsing for complex queries. Parentheses with errors will be parsed as GeneralEnclosed
      • Added support for features in a range context, e.g. (width > 100px) or (100px < height < 400px)
      • Transitioned from MediaFeature node type to the Feature node type with kind: "media"
      • Changed MediaQuery node structure into the following form: 
        type MediaQuery = {
    type: "MediaQuery";
    modifier: string | null; // e.g. "not", "only", etc.
    mediaType: string | null; // e.g. "all", "screen", etc.
    condition: Condition | null;
}
    • Changes for @supports at-rule:
      • Enhanced prelude parsing for complex queries. Parentheses with errors will be parsed as GeneralEnclosed
      • Added support for features in a range context, e.g. (width > 100px) or (100px < height < 400px)
      • Added SupportsDeclaration node type to encapsulate a declaration in a query, replacing Parentheses
      • Parsing now employs Condition or SupportsDeclaration nodes of kind supports instead of Parentheses
      • Added support for the selector() feature via the FeatureFunction node (configured in features.supports.selector)

View originalPermalink