0.8.10

• Hardened Lit CSS parsing for quoted CSS strings that contain braces or escaped backticks.
• Allowed selector-position interpolations such as .x-${suffix} without making a top-level ${sharedStyles} ambiguous.
• Added regression coverage for attribute selectors, pseudo selectors, @keyframes, @font-face, @property, and preserving HTML quoted-attribute interpolation.

cm6-lezer-lit-html

A CodeMirror 6 / Lezer JavaScript grammar fork that parses Lit html, svg, and css tagged templates directly into ordinary syntax-tree nodes.

This package is intentionally shaped for CST matching. Unlike a mixed parser, Lit and CSS template structure is visible during a normal tree walk—no mounted-tree traversal or collector pass is required.

Install

npm install cm6-lezer-lit-html

Use

import {litJavaScript} from "cm6-lezer-lit-html";

const tree = litJavaScript.parse(`
  import {html, css} from "lit";
  const view = html` + "`" + `<x-card .item=${"${item}"} @save=${"${onSave}"}></x-card>` + "`" + `;
  const styles = css` + "`" + `:host { display: block; }` + "`" + `;
`);

The exported parser is named litJavaScript.

Matcher-facing Lit nodes

Examples of nodes exposed directly in the JavaScript tree include:

• LitHtmlTaggedTemplateExpression
• LitSvgTaggedTemplateExpression
• LitCssTaggedTemplateExpression
• LitTemplate
• ComponentElement
• Element
• VoidElement
• DynamicElement
• OpenTag / CloseTag / SelfClosingTag
• EventListener
• PropertyInput
• BooleanInput
• SpreadInput
• AttributeInput
• DynamicValue
• Interpolation
• StyleSheet
• CssRule
• CssSelector
• CssBlock
• CssBlockContent
• CssAtRule
• CssAtPrelude
• CssDeclaration
• CssDeclarationValue
• CssPropertyName
• CssClassSelector
• CssHash

Scope

This is a matcher-oriented grammar fork, not a full browser-grade HTML/CSS validator. It is designed to preserve useful Lit/CSS CST structure inside a single JavaScript parse tree.

Version 0.8.8 note

0.8.8 keeps the nested-template fix from 0.8.5 and adds structured CSS blocks. CSS tagged templates now expose matcher-facing nodes such as CssRule, CssSelector, CssBlock, CssBlockContent, CssAtRule, CssAtPrelude, CssDeclaration, and CssDeclarationValue.

The CSS parser is still forgiving and matcher-oriented rather than a full CSS spec validator. It is designed to keep the outer JavaScript/Lit parse stable while distinguishing selectors, blocks, at-rules, declarations, values, comments, and interpolations.

0.8.9

• Fix CSS vendor-prefixed property names such as -webkit-user-select: and -ms-user-select:.
• Prevent complex css template bodies with vendor-prefixed declarations and !important values from leaking out of LitCssTaggedTemplateExpression into ordinary JavaScript/error nodes.

0.8.11

CSS hardening pass for edge cases discovered after 0.8.10. Adds coverage for at-rule string preludes such as @charset/@import, interpolated CSS property names like ${prop}: value, nested/braced custom-property values, and additional modern nesting/container/scope selector cases. Keeps complex CSS inside LitCssTaggedTemplateExpression without leaking into JavaScript recovery.