Skip to content

Implement mutable stylesheet CSSOM for Monaco and Code OSS #74

Description

@wieslawsoltes

Problem

HTMLStyleElement.sheet currently returns a stable object containing only ownerNode. It lacks cssRules, insertRule, and deleteRule. Code OSS and Monaco add and remove runtime decoration/theme rules through this CSSOM surface. The authored CSS engine can already parse replacement style text and recascade, but JavaScript cannot perform rule mutation.

SceneTech/vscode-demo currently wraps the sheet object and republishes mutations through the owning style element's textContent. This proves the Code OSS path, but it is deliberately incomplete: nested grouping rules, imported/constructed sheets, native rule identity, and browser-accurate CSS text are outside that adapter.

WebScene #70 caches compiled CSS and introduces typed CSS IR. That work is complementary; CSSOM mutation must invalidate/reuse those caches correctly without storing document-specific cascade state.

Proposed implementation

  • Add native CSSStyleSheet, CSSRuleList, CSSRule, and CSSStyleRule wrappers with stable object identity.
  • Implement cssRules, insertRule, and deleteRule for connected style elements with CSSOM index/error semantics.
  • Expose mutable CSSStyleDeclaration on style rules and route changes through the existing parser, stylesheet ownership, cascade invalidation, layout, and paint pipeline.
  • Handle grouping rules and stylesheet replacement explicitly; define supported behavior for link, imported, and constructed sheets.
  • Integrate cache invalidation with WebScene Compile and cache CSS units across runtime and native builds #70 if/when it lands.

Acceptance

  • Code OSS editor decorations and theme rules render and can be removed without a host-injected stylesheet shim.
  • Tests cover insertion order, deletion, live rule lists, stable rule identity, external textContent replacement, declaration mutation, disconnected owners, invalid indices/syntax, shadow-root ownership, nested rules, recascade, and cache invalidation.
  • Top-level and iframe realms expose the same CSSOM behavior.

Reproduction

Use SceneTech/vscode-demo at c37b252e372dbf8fe04f912bfda0c37e0f3520d0, remove src/css_compat.hpp, build/package, and exercise Monaco decorations. style.sheet.insertRule is unavailable.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions