@willbooster/tree-sitter-css

CSS grammar for tree-sitter, forked from tree-sitter/tree-sitter-css. We are grateful to its authors and contributors. This is not an official release of that project.

This fork is based on upstream's version 0.23.2 grammar and generates the parser with the WillBooster/tree-sitter generator. The parser carries that fork's own ABI number (0x57420001) and loads only with that fork's runtime, version 2.0.0 or later: upstream's tree-sitter runtime rejects it. This grammar accepts keyframe selectors with fractional percentages or comma-separated lists, which upstream 0.23.2 rejects. Attribute selectors accept the case-insensitive i/I and case-sensitive s/S flags. Declarations accept CSS whitespace between ! and important and ASCII case variants of that keyword. Class names accept digit- or hyphen-starting continuations after escape sequences. Nesting selectors may follow descendant combinators, as in b &. Attribute names accept CSS escape sequences, including namespace prefixes and local names. Custom-property declaration names accept CSS escape sequences. Blocks accept empty statements before, between, and after declarations. A NUL character inside a token such as a string or a comment is part of that token, where upstream's lexer reports an error.

Usage

The npm package ships tree-sitter-css.wasm for @willbooster/web-tree-sitter version 2.0.0 or later, which runs in Node.js, Bun, browsers, and Cloudflare Workers. In Node.js and Bun, load the grammar from its path:

import { fileURLToPath } from 'node:url';
import { Language, Parser } from '@willbooster/web-tree-sitter';

await Parser.init();
const parser = new Parser();
const wasmPath = fileURLToPath(import.meta.resolve('@willbooster/tree-sitter-css/tree-sitter-css.wasm'));
parser.setLanguage(await Language.load(wasmPath));
const tree = parser.parse('.foo {\n  color: red;\n}\n');

In browsers, serve both .wasm files and load them by URL (the example uses Vite's ?url imports):

import { Language, Parser } from '@willbooster/web-tree-sitter';
import runtimeUrl from '@willbooster/web-tree-sitter/web-tree-sitter.wasm?url';
import cssUrl from '@willbooster/tree-sitter-css/tree-sitter-css.wasm?url';

await Parser.init({ locateFile: () => runtimeUrl });
const parser = new Parser();
parser.setLanguage(await Language.load(cssUrl));

Cloudflare Workers do not allow compiling Wasm at run time, so import both .wasm files as modules, with or without Node.js compatibility:

import { Language, Parser } from '@willbooster/web-tree-sitter';
import runtime from '@willbooster/web-tree-sitter/web-tree-sitter.wasm';
import css from '@willbooster/tree-sitter-css/tree-sitter-css.wasm';

await Parser.init({ wasmModule: runtime });
const parser = new Parser();
parser.setLanguage(await Language.load(css));

The package also ships grammar.js, the queries in queries/, and the node types in src/node-types.json.

In Rust, depend on the crate and on willbooster-tree-sitter, the runtime this package is tested and fuzzed with:

[dependencies]
tree-sitter = { package = "willbooster-tree-sitter", version = "2" }
tree-sitter-css = { package = "willbooster-tree-sitter-css", version = "1" }

let mut parser = tree_sitter::Parser::new();
parser.set_language(&tree_sitter_css::LANGUAGE.into())?;

Development

mise install
bun install --frozen-lockfile
bun run test/ci-setup # installs Chromium for the browser test
bun run build/ci
bun run test
script/parse-examples
cargo test

The scripts and tests generate, build, test, and parse with script/tree-sitter, the tree-sitter CLI of the WillBooster/tree-sitter runtime version locked in Cargo.lock, since the generator and the runtime of upstream's CLI are not the ones this package ships with. Its first run downloads that CLI from the runtime's GitHub Release, or builds it with cargo (whose build runs the CMake that mise.toml pins) when the download fails or the release has no binary that runs here. Run other CLI commands through it as well (e.g. script/tree-sitter parse file.css).

bun run generate records a fresh generation profile from the applicable test/corpus cases and Git-tracked files in examples/, then generates compact parser tables. The parser also embeds metadata from tree-sitter.json. After changing a grammar, tree-sitter.json, a corpus case, or a tracked example, regenerate and commit src/. Stage added or removed examples with git add -A examples before generation so the profile uses the intended file list. Profiles in .tmp/generation-profiles/ are temporary and must not be committed. bun run build-wasm, bun run build/ci, and the release build regenerate the parsers before compiling them.

bun run test runs:

• the corpus in test/corpus, with the native build and with the Wasm build (the first run downloads the WASI SDK);
• an incremental-parsing check (test/unit/incremental.test.ts): script/fuzz-corpus runs tree-sitter fuzz, which edits each corpus case at random, reparses it, undoes the edits, and reparses again. TREE_SITTER_SEED, TREE_SITTER_ITERATIONS, and TREE_SITTER_EDITS run other or more edits;
• a check that the real-world CSS files in examples/, the checked-in ones and those of the cloned repositories, fail to parse exactly as listed in script/known-failures.txt. The first run clones the repositories. The example repositories are pinned to commits in script/parse-examples. After a grammar change or a moved pin alters that list, script/parse-examples rewrites it; review its diff before committing;
• a performance check (test/unit/performance.test.ts) that recovering from an error on each line takes linear time, since consumers parse files while they are being edited. It loads the Wasm build through @willbooster/web-tree-sitter, which bun run build/ci rebuilds after regenerating the parser;
• a check (test/unit/runtimeVersion.test.ts) that @willbooster/web-tree-sitter in package.json and willbooster-tree-sitter in Cargo.lock are the same version, since the Wasm tests run on the former and the Rust tests, the fuzzer, and the CLI on the latter;
• tests that load the Wasm build with @willbooster/web-tree-sitter in Chromium (test/e2e/browser.test.ts) and in Cloudflare Workers with and without Node.js compatibility (test/e2e/workers.test.ts).

The tests and script/parse-examples compile the parser into .tmp/tree-sitter-lib rather than the CLI's cache shared by every checkout; script/fuzz-corpus builds a parser of its own in .tmp/fuzz for each run and deletes it afterwards.

CI also runs these tests on Linux arm64 and macOS, where the CLI compiles the parser and the scanner natively, and fuzzes the parser with libFuzzer and sanitizers (.github/workflows/robustness.yml).

References

• CSS Syntax Guide