Bugfix: CSS custom properties defined in _chat-variables.scss on :ro...

Documentation for Sessions

🐛 Bugfix: CSS custom properties defined in _chat-variables.scss on :ro...

Date: 2026-02-21
Time: 19:56:57 UTC
Session: gspace1-133.16
Agent: angular
Confidence: 9900%
Status: ✅ Documented

📋 Decision Context

Question:

CSS custom properties defined in _chat-variables.scss on :root are silently ignored because Angular's ViewEncapsulation.Emulated scopes the :root selector

Task: Not specified

🎯 Decision Made

Chosen:

Convert :root block to a @mixin and @include on :host in chat-shell

Options Considered:

  1. Move --chat-* variables to the global styles.scss of each app
  2. Set ViewEncapsulation.None on the chat-shell component
  3. Convert :root block to a @mixin and @include on :host in chat-shell

💭 Reasoning

Root cause: _chat-variables.scss defined all --chat-* CSS custom properties inside a :root { } block. This file was imported via @use in chat-shell.component.scss, which uses Angular's default ViewEncapsulation.Emulated. Angular adds scoping attributes to all CSS selectors, transforming :root into [_ngcontent-xxx]:root, which NEVER matches the HTML document root. Result: every var(--chat-*) reference across the shell, header, messages, input, and sidebar silently resolved to nothing -- zero visual styling was applied despite the SCSS compiling without errors.

Fix: Changed _chat-variables.scss from a bare :root block to a @mixin chat-vars { ... }. Then in chat-shell.component.scss, @include vars.chat-vars inside the :host block. CSS custom properties cascade through the DOM naturally -- even through Angular's emulated encapsulation boundaries -- so defining them on the chat-shell's host element makes them available to ALL descendant components (chat-header, unified-message, unified-input-bar, session-sidebar, etc.) without any additional imports.

Why not ViewEncapsulation.None: Breaks style isolation, risks leaking styles globally. Why not global styles.scss: Pollutes global namespace, couples library code to app configuration. The @mixin approach keeps variables centralized in one file, scoped correctly, and cascading naturally.

Prevention: NEVER use :root {} in Angular component SCSS files (with default encapsulation). Always use :host {} or a @mixin included on :host. The :root selector is only safe in global stylesheets (styles.scss) or components with ViewEncapsulation.None.

📁 Files Involved

🔗 Related

Auto-generated by MCP Smart Consolidation