refactor: Cleaned up theming utilities

Author: rkaraivanov

src/theming/config.ts

@@ -1,4 +1,4 @@
-import { isDefined } from '../components/common/util.js';
+import { isServer } from 'lit';
 import {
   CHANGE_THEME_EVENT,
   type ChangeThemeEventDetail,
@@ -12,8 +12,8 @@ let themeVariant: ThemeVariant;
 /**
  * Dispatch an "igc-change-theme" event to `window` with the given detail.
  */
-function dispatchThemingEvent(detail: ChangeThemeEventDetail) {
-  if (isDefined(globalThis.dispatchEvent)) {
+function dispatchThemingEvent(detail: ChangeThemeEventDetail): void {
+  if (!isServer) {
     globalThis.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));
   }
 }
@@ -26,34 +26,23 @@ function isOfTypeThemeVariant(variant: string): variant is ThemeVariant {
   return ['light', 'dark'].includes(variant);
 }
 
-export const getTheme: () => {
-  theme: Theme;
-  themeVariant: ThemeVariant;
-} = () => {
+export function getTheme() {
   if (!(theme && themeVariant)) {
-    const [_theme, _variant] =
-      Object.entries(getAllCssVariables()).filter(
-        ([v]) => v === 'igTheme' || v === 'igThemeVariant'
-      ) || [];
+    const cssVars = getAllCssVariables();
+    const foundTheme = cssVars.igTheme;
+    const foundVariant = cssVars.igThemeVariant;
 
-    theme =
-      _theme?.[1] && isOfTypeTheme(_theme[1])
-        ? (_theme[1] as Theme)
-        : 'bootstrap';
-
-    themeVariant =
-      _variant?.[1] && isOfTypeThemeVariant(_variant[1])
-        ? (_variant[1] as ThemeVariant)
-        : 'light';
+    theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
+    themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
   }
 
   return { theme, themeVariant };
-};
+}
 
-export const setTheme = (value: Theme, variant: ThemeVariant) => {
+export function setTheme(value: Theme, variant: ThemeVariant): void {
   theme = value;
   themeVariant = variant;
-};
+}
 
 /**
  * Allows the global configuration of the active theme.
@@ -65,10 +54,9 @@ export const setTheme = (value: Theme, variant: ThemeVariant) => {
  *  configureTheme('material', 'light');
  *  ```
  */
-export const configureTheme = (t: Theme, v: ThemeVariant = 'light') => {
+export function configureTheme(t: Theme, v: ThemeVariant = 'light'): void {
   if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {
     setTheme(t, v);
+    dispatchThemingEvent({ theme, themeVariant });
   }
-
-  dispatchThemingEvent({ theme, themeVariant });
-};
+}

src/theming/utils.ts

@@ -1,43 +1,45 @@
 import { isServer } from 'lit';
 
-import { isDefined } from '../components/common/util.js';
-
 function isStyleRule(rule: CSSRule): rule is CSSStyleRule {
-  return !!rule && 'style' in rule;
+  return rule != null && 'style' in rule;
 }
 
 function cssKeyToJsKey(key: string): string {
-  return key.replace('--', '').replace(/-./g, (x) => x.toUpperCase()[1]);
+  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);
 
-  /* c8 ignore next 3 */
-  if (isServer || !isDefined(globalThis.document)) {
-    return cssVars;
-  }
+  for (const sheet of styleSheets) {
+    let rules: CSSRuleList | undefined;
 
-  // Filter out any external stylesheets which throw CORS errors
-  const styleSheets = Array.from(globalThis.document.styleSheets).filter(
-    (sheet) => {
-      try {
-        return sheet.cssRules;
-      } catch {
-        return false;
-      }
+    // Potential CORS or access errors
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
     }
-  );
 
-  for (const sheet of styleSheets) {
-    const rules = Array.from(sheet.cssRules).filter(isStyleRule);
+    if (!rules) {
+      continue;
+    }
 
-    for (const rule of rules) {
-      Array.from(rule.style).forEach((style) => {
-        if (style.startsWith('--')) {
-          cssVars.add(style);
+    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);
+          }
         }
-      });
+      }
     }
   }
 
@@ -50,13 +52,7 @@ function getElementCssVariables(
   pseudo?: string
 ): Record<string, string> {
   const cssVars: Record<string, string> = {};
-
-  /* c8 ignore next 3 */
-  if (!isDefined(globalThis.getComputedStyle)) {
-    return cssVars;
-  }
-
-  const styles = globalThis.getComputedStyle(element, pseudo);
+  const styles = getComputedStyle(element, pseudo);
 
   for (const key of allCssVars) {
     const value = styles.getPropertyValue(key);
@@ -71,10 +67,10 @@ function getElementCssVariables(
 
 export function getAllCssVariables(): Record<string, string> {
   /* c8 ignore next 2 */
-  return isServer || !isDefined(globalThis.document)
+  return isServer
     ? {}
     : getElementCssVariables(
         getAllCssVariableNames(),
-        globalThis.document.documentElement
+        document.documentElement
       );
 }