fix(theming): Resolve initial theme using computed styles (#2061)

Use the computed styles of the document element to
determine the initial theme when no theme is explicitly set.
Removed the old logic where theme was resolved from reading
through the document stylesheets.

Closes #2060

Author: rkaraivanov

src/theming/config.spec.ts

@@ -1,4 +1,4 @@
-import { aTimeout, expect, oneEvent } from '@open-wc/testing';
+import { expect, oneEvent } from '@open-wc/testing';
 
 import { configureTheme, getTheme } from './config.js';
 import { CHANGE_THEME_EVENT } from './theming-event.js';
@@ -18,21 +18,6 @@ describe('Theming Config', () => {
     sheet.remove();
   });
 
-  it('does not throw for CORS', async () => {
-    const link = document.createElement('link');
-    Object.assign(link, {
-      rel: 'stylesheet',
-      href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css',
-    });
-
-    document.head.append(link);
-    await aTimeout(1000);
-
-    expect(() => getAllCssVariables()).not.to.throw();
-
-    link.remove();
-  });
-
   it('should set the theme and raise event with the new theme', async () => {
     const theme = 'material';
     const themeVariant = 'light';

src/theming/utils.ts

@@ -1,76 +1,41 @@
 import { isServer } from 'lit';
 
-function isStyleRule(rule: CSSRule): rule is CSSStyleRule {
-  return rule != null && 'style' in rule;
-}
-
+/**
+ * Converts a CSS custom property name to a camelCase JavaScript key.
+ * Removes leading '--' and converts kebab-case to camelCase.
+ * @param key - The CSS variable name (e.g., '--my-color')
+ * @returns The JavaScript key (e.g., 'myColor')
+ */
 function cssKeyToJsKey(key: string): string {
+  // Regex: matches '--' at start OR '-x' pattern to convert to camelCase
   return key.replace(/^--|-./g, (match) => {
     return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();
   });
 }
 
-function getAllCssVariableNames(): Set<string> {
-  const cssVars = new Set<string>();
-  const styleSheets = Array.from(document.styleSheets);
-
-  for (const sheet of styleSheets) {
-    let rules: CSSRuleList | undefined;
-
-    // Potential CORS or access errors
-    try {
-      rules = sheet.cssRules;
-    } catch {
-      continue;
-    }
-
-    if (!rules) {
-      continue;
-    }
-
-    for (const rule of Array.from(rules)) {
-      if (isStyleRule(rule)) {
-        const length = rule.style.length;
-
-        for (let i = 0; i < length; i++) {
-          const style = rule.style[i];
-
-          if (style.startsWith('--')) {
-            cssVars.add(style);
-          }
-        }
-      }
-    }
-  }
-
-  return cssVars;
-}
-
-function getElementCssVariables(
-  allCssVars: Set<string>,
-  element: HTMLElement,
-  pseudo?: string
-): Record<string, string> {
-  const cssVars: Record<string, string> = {};
-  const styles = getComputedStyle(element, pseudo);
-
-  for (const key of allCssVars) {
-    const value = styles.getPropertyValue(key);
+function getCssVariables(): Record<string, string> {
+  const rootStyles = getComputedStyle(document.documentElement);
+  const result: Record<string, string> = {};
 
-    if (value) {
-      cssVars[cssKeyToJsKey(key)] = value.trim();
+  for (const key of Array.from(rootStyles)) {
+    if (key.startsWith('--')) {
+      result[cssKeyToJsKey(key)] = rootStyles.getPropertyValue(key).trim();
     }
   }
 
-  return cssVars;
+  return result;
 }
 
+/**
+ * Retrieves all CSS custom properties from the document root element.
+ * Property names are converted from kebab-case to camelCase.
+ *
+ * @returns An object mapping camelCase property names to their values.
+ * Returns an empty object in SSR environments.
+ * @example
+ * // CSS: --my-primary-color: #ff0000;
+ * // Returns: { myPrimaryColor: '#ff0000' }
+ */
 export function getAllCssVariables(): Record<string, string> {
-  /* c8 ignore next 2 */
-  return isServer
-    ? {}
-    : getElementCssVariables(
-        getAllCssVariableNames(),
-        document.documentElement
-      );
+  return isServer ? {} : getCssVariables();
 }