@codemirror/lang-css

@codemirror/lang-css implements CSS language support for the CodeMirror code editor. It is built on the Lezer CSS parser and extends it with syntax highlighting, indentation rules, and a completion source for CSS properties, variables, and value keywords.

Beyond plain CSS, the package exposes defineCSSCompletionSource, letting related CodeMirror language modes (such as Sass and Less) reuse its completion logic by supplying their own predicate for what counts as a completable variable in their dialect.

What You Get

• A css() extension that adds full CSS LanguageSupport to a CodeMirror editor instance
• A cssLanguage provider built on the Lezer CSS parser with highlighting and indentation baked in
• A cssCompletionSource for autocompleting CSS properties, variables, and value keywords
• A reusable defineCSSCompletionSource factory that CSS-dialect packages (Sass, Less) build their own completion sources on top of

Common Use Cases

• Adding CSS syntax highlighting and autocomplete to an in-browser code editor built on CodeMirror 6
• Building a live CSS playground or style editor with real-time property/value suggestions
• Powering CSS-in-JS or theme editors that need a lightweight, embeddable CSS editing surface
• Serving as the base completion logic for other CodeMirror CSS-dialect language packages (Sass, Less)

Under The Hood

Architecture - The package is intentionally small: src/css.ts (31 lines) wires the Lezer CSS parser into a CodeMirror LRLanguage and exposes the css() LanguageSupport extension, while src/complete.ts (229 lines) implements the completion logic, including the generic defineCSSCompletionSource factory that parameterizes what counts as a completable variable so other CSS-dialect packages can reuse it. Tech Stack - TypeScript, built against @codemirror/language, @codemirror/autocomplete, @codemirror/state, and @lezer/css/@lezer/common as peer building blocks, compiled via the shared @codemirror/buildhelper tooling used across the CodeMirror 6 package family. Code Quality - tests run through the shared cm-runtests CodeMirror test runner rather than an in-repo test suite; the code is compact and narrowly scoped, which limits surface area for bugs, but the low development_activity and maintenance_consistency health signals reflect that active development has moved to the project’s own Forgejo instance rather than GitHub. API Design - the public surface is minimal and composable: a single css() call for editor consumers, plus cssLanguage and cssCompletionSource as named exports for anyone customizing behavior, following the same small-surface convention as the rest of the @codemirror/lang-* package family.