stoop 0.2.1 → 0.4.0

package/dist/constants.d.ts

@@ -1,20 +1,29 @@
 /**
  * Shared constants used throughout the library.
- * Includes cache size limits, nesting depth limits, and fallback context.
+ * Includes cache size limits and nesting depth limits.
  */
-import type { CSS, ThemeContextValue, ThemeScale } from "./types";
+import type { CSS, ThemeScale } from "./types";
 export declare const EMPTY_CSS: CSS;
 export declare const MAX_CSS_CACHE_SIZE = 10000;
 export declare const MAX_CLASS_NAME_CACHE_SIZE = 5000;
 export declare const MAX_CSS_NESTING_DEPTH = 10;
-export declare const FALLBACK_CONTEXT: import("react").Context<ThemeContextValue>;
+/**
+ * Cache size limits for various LRU caches.
+ */
+export declare const KEYFRAME_CACHE_LIMIT = 500;
+export declare const SANITIZE_CACHE_SIZE_LIMIT = 1000;
+/**
+ * Cookie defaults.
+ */
+export declare const DEFAULT_COOKIE_MAX_AGE = 31536000;
+export declare const DEFAULT_COOKIE_PATH = "/";
 /**
  * Approved theme scales - only these scales are allowed in theme objects.
  */
 export declare const APPROVED_THEME_SCALES: ReadonlyArray<ThemeScale>;
 /**
  * Default themeMap mapping CSS properties to theme scales.
- * Covers 150+ common CSS properties for zero-config experience.
+ * Covers common CSS properties for zero-config experience.
  * Missing properties gracefully fallback to pattern-based auto-detection.
  */
 export declare const DEFAULT_THEME_MAP: Record<string, ThemeScale>;

package/dist/constants.js

@@ -0,0 +1,154 @@
+/**
+ * Shared constants used throughout the library.
+ * Includes cache size limits and nesting depth limits.
+ */
+export const EMPTY_CSS = Object.freeze({});
+export const MAX_CSS_CACHE_SIZE = 10000;
+export const MAX_CLASS_NAME_CACHE_SIZE = 5000;
+export const MAX_CSS_NESTING_DEPTH = 10;
+/**
+ * Cache size limits for various LRU caches.
+ */
+export const KEYFRAME_CACHE_LIMIT = 500;
+export const SANITIZE_CACHE_SIZE_LIMIT = 1000;
+/**
+ * Cookie defaults.
+ */
+export const DEFAULT_COOKIE_MAX_AGE = 31536000; // 1 year in seconds
+export const DEFAULT_COOKIE_PATH = "/";
+/**
+ * Approved theme scales - only these scales are allowed in theme objects.
+ */
+export const APPROVED_THEME_SCALES = [
+    "colors",
+    "opacities",
+    "space",
+    "radii",
+    "sizes",
+    "fonts",
+    "fontWeights",
+    "fontSizes",
+    "lineHeights",
+    "letterSpacings",
+    "shadows",
+    "zIndices",
+    "transitions",
+];
+/**
+ * Default themeMap mapping CSS properties to theme scales.
+ * Covers common CSS properties for zero-config experience.
+ * Missing properties gracefully fallback to pattern-based auto-detection.
+ */
+export const DEFAULT_THEME_MAP = {
+    accentColor: "colors",
+    animation: "transitions",
+    animationDelay: "transitions",
+    animationDuration: "transitions",
+    animationTimingFunction: "transitions",
+    backdropFilter: "shadows",
+    background: "colors",
+    backgroundColor: "colors",
+    blockSize: "sizes",
+    border: "colors",
+    borderBlockColor: "colors",
+    borderBlockEndColor: "colors",
+    borderBlockStartColor: "colors",
+    borderBottomColor: "colors",
+    borderBottomLeftRadius: "radii",
+    borderBottomRightRadius: "radii",
+    borderColor: "colors",
+    borderEndEndRadius: "radii",
+    borderEndStartRadius: "radii",
+    borderInlineColor: "colors",
+    borderInlineEndColor: "colors",
+    borderInlineStartColor: "colors",
+    borderLeftColor: "colors",
+    borderRadius: "radii",
+    borderRightColor: "colors",
+    borderStartEndRadius: "radii",
+    borderStartStartRadius: "radii",
+    borderTopColor: "colors",
+    borderTopLeftRadius: "radii",
+    borderTopRightRadius: "radii",
+    bottom: "space",
+    boxShadow: "shadows",
+    caretColor: "colors",
+    color: "colors",
+    columnGap: "space",
+    columnRuleColor: "colors",
+    fill: "colors",
+    filter: "shadows",
+    flexBasis: "sizes",
+    floodColor: "colors",
+    font: "fontSizes",
+    fontFamily: "fonts",
+    fontSize: "fontSizes",
+    fontWeight: "fontWeights",
+    gap: "space",
+    gridColumnGap: "space",
+    gridGap: "space",
+    gridRowGap: "space",
+    height: "sizes",
+    inlineSize: "sizes",
+    inset: "space",
+    insetBlock: "space",
+    insetBlockEnd: "space",
+    insetBlockStart: "space",
+    insetInline: "space",
+    insetInlineEnd: "space",
+    insetInlineStart: "space",
+    left: "space",
+    letterSpacing: "letterSpacings",
+    lightingColor: "colors",
+    lineHeight: "lineHeights",
+    margin: "space",
+    marginBlock: "space",
+    marginBlockEnd: "space",
+    marginBlockStart: "space",
+    marginBottom: "space",
+    marginInline: "space",
+    marginInlineEnd: "space",
+    marginInlineStart: "space",
+    marginLeft: "space",
+    marginRight: "space",
+    marginTop: "space",
+    maxBlockSize: "sizes",
+    maxHeight: "sizes",
+    maxInlineSize: "sizes",
+    maxWidth: "sizes",
+    minBlockSize: "sizes",
+    minHeight: "sizes",
+    minInlineSize: "sizes",
+    minWidth: "sizes",
+    opacity: "opacities",
+    outline: "colors",
+    outlineColor: "colors",
+    padding: "space",
+    paddingBlock: "space",
+    paddingBlockEnd: "space",
+    paddingBlockStart: "space",
+    paddingBottom: "space",
+    paddingInline: "space",
+    paddingInlineEnd: "space",
+    paddingInlineStart: "space",
+    paddingLeft: "space",
+    paddingRight: "space",
+    paddingTop: "space",
+    right: "space",
+    rowGap: "space",
+    size: "sizes",
+    stopColor: "colors",
+    stroke: "colors",
+    textDecorationColor: "colors",
+    textEmphasisColor: "colors",
+    textShadow: "shadows",
+    top: "space",
+    transition: "transitions",
+    transitionDelay: "transitions",
+    transitionDuration: "transitions",
+    transitionProperty: "transitions",
+    transitionTimingFunction: "transitions",
+    width: "sizes",
+    zIndex: "zIndices",
+};
+export const STOOP_COMPONENT_SYMBOL = Symbol.for("stoop.component");

package/dist/core/cache.d.ts

@@ -7,7 +7,7 @@
  * LRU Cache implementation for class names and CSS strings.
  * Automatically evicts least recently used entries when size limit is exceeded.
  */
-declare class LRUCache<K, V> extends Map<K, V> {
+export declare class LRUCache<K, V> extends Map<K, V> {
     private readonly maxSize;
     constructor(maxSize: number);
     get(key: K): V | undefined;
@@ -16,24 +16,20 @@ declare class LRUCache<K, V> extends Map<K, V> {
 export declare const classNameCache: LRUCache<string, string>;
 export declare const cssStringCache: LRUCache<string, string>;
 /**
- * Checks if a CSS string is cached.
+ * Checks if a CSS string has been injected.
+ * Uses a Set for O(1) lookup.
  *
  * @param css - CSS string to check
- * @returns True if CSS is cached
+ * @returns True if CSS has been injected
  */
 export declare function isCachedStyle(css: string): boolean;
 /**
- * Marks a CSS string as cached.
+ * Marks a CSS string as injected.
  *
  * @param css - CSS string to cache
  */
 export declare function markStyleAsCached(css: string): void;
-/**
- * Limits cache size by evicting least recently used entries.
- */
-export declare function limitCacheSize(): void;
 /**
  * Clears all cached styles.
  */
 export declare function clearStyleCache(): void;
-export {};

package/dist/core/cache.js

@@ -0,0 +1,68 @@
+/**
+ * CSS compilation caching system.
+ * Tracks compiled CSS strings and class names to prevent duplicate work.
+ * Implements LRU (Least Recently Used) eviction when cache size limits are exceeded.
+ */
+import { MAX_CLASS_NAME_CACHE_SIZE, MAX_CSS_CACHE_SIZE } from "../constants";
+/**
+ * LRU Cache implementation for class names and CSS strings.
+ * Automatically evicts least recently used entries when size limit is exceeded.
+ */
+export class LRUCache extends Map {
+    maxSize;
+    constructor(maxSize) {
+        super();
+        this.maxSize = maxSize;
+    }
+    get(key) {
+        const value = super.get(key);
+        if (value !== undefined) {
+            super.delete(key);
+            super.set(key, value);
+        }
+        return value;
+    }
+    set(key, value) {
+        if (super.has(key)) {
+            super.delete(key);
+        }
+        else if (this.size >= this.maxSize) {
+            const firstKey = this.keys().next().value;
+            if (firstKey !== undefined) {
+                super.delete(firstKey);
+            }
+        }
+        super.set(key, value);
+        return this;
+    }
+}
+export const classNameCache = new LRUCache(MAX_CLASS_NAME_CACHE_SIZE);
+export const cssStringCache = new LRUCache(MAX_CSS_CACHE_SIZE);
+// Separate cache for tracking injected CSS strings (used by browser injection)
+const injectedStylesCache = new Set();
+/**
+ * Checks if a CSS string has been injected.
+ * Uses a Set for O(1) lookup.
+ *
+ * @param css - CSS string to check
+ * @returns True if CSS has been injected
+ */
+export function isCachedStyle(css) {
+    return injectedStylesCache.has(css);
+}
+/**
+ * Marks a CSS string as injected.
+ *
+ * @param css - CSS string to cache
+ */
+export function markStyleAsCached(css) {
+    injectedStylesCache.add(css);
+}
+/**
+ * Clears all cached styles.
+ */
+export function clearStyleCache() {
+    classNameCache.clear();
+    cssStringCache.clear();
+    injectedStylesCache.clear();
+}

package/dist/core/compiler.d.ts

@@ -4,6 +4,17 @@
  * Handles nested selectors, media queries, styled component targeting, and theme tokens.
  */
 import type { CSS, Theme, ThemeScale, UtilityFunction } from "../types";
+/**
+ * Converts a CSS object to a CSS string with proper nesting and selectors.
+ * Handles pseudo-selectors, media queries, combinators, and styled component targeting.
+ *
+ * @param obj - CSS object to convert
+ * @param selector - Current selector context
+ * @param depth - Current nesting depth
+ * @param media - Media query breakpoints
+ * @returns CSS string
+ */
+export declare function cssObjectToString(obj: CSS, selector?: string, depth?: number, media?: Record<string, string>): string;
 /**
  * Compiles CSS objects into CSS strings and generates unique class names.
  * Handles nested selectors, media queries, styled component targeting, and theme tokens.

package/dist/core/compiler.js

@@ -0,0 +1,206 @@
+/**
+ * CSS compilation engine.
+ * Converts CSS objects to CSS strings and generates unique class names.
+ * Handles nested selectors, media queries, styled component targeting, and theme tokens.
+ */
+import { MAX_CSS_NESTING_DEPTH, STOOP_COMPONENT_SYMBOL } from "../constants";
+import { injectCSS } from "../inject";
+import { isValidCSSObject, applyUtilities, isStyledComponentRef } from "../utils/helpers";
+import { replaceThemeTokensWithVars } from "../utils/theme";
+import { escapeCSSValue, hash, sanitizeCSSPropertyName, sanitizeCSSSelector, sanitizeMediaQuery, sanitizePrefix, } from "../utils/theme-utils";
+import { classNameCache, cssStringCache } from "./cache";
+/**
+ * Checks if a key/value pair represents a styled component reference.
+ * Uses shared isStyledComponentRef helper for consistency.
+ *
+ * @param key - Property key to check
+ * @param value - Property value to check
+ * @returns True if key/value represents a styled component reference
+ */
+function isStyledComponentKey(key, value) {
+    // Check symbol key
+    if (typeof key === "symbol" && key === STOOP_COMPONENT_SYMBOL) {
+        return true;
+    }
+    // Check if value is a styled component ref (consolidated check)
+    if (isStyledComponentRef(value)) {
+        return true;
+    }
+    // Check string key prefix
+    if (typeof key === "string" && key.startsWith("__STOOP_COMPONENT_")) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Extracts the class name from a styled component reference.
+ *
+ * @param key - Property key
+ * @param value - Property value
+ * @returns Extracted class name or empty string
+ */
+function getClassNameFromKeyOrValue(key, value) {
+    if (typeof value === "object" &&
+        value !== null &&
+        "__stoopClassName" in value &&
+        typeof value.__stoopClassName === "string") {
+        return value.__stoopClassName;
+    }
+    if (typeof key === "string" && key.startsWith("__STOOP_COMPONENT_")) {
+        return key.replace("__STOOP_COMPONENT_", "");
+    }
+    return "";
+}
+/**
+ * Converts a CSS object to a CSS string with proper nesting and selectors.
+ * Handles pseudo-selectors, media queries, combinators, and styled component targeting.
+ *
+ * @param obj - CSS object to convert
+ * @param selector - Current selector context
+ * @param depth - Current nesting depth
+ * @param media - Media query breakpoints
+ * @returns CSS string
+ */
+export function cssObjectToString(obj, selector = "", depth = 0, media) {
+    if (!obj || typeof obj !== "object") {
+        return "";
+    }
+    if (depth > MAX_CSS_NESTING_DEPTH) {
+        return "";
+    }
+    const cssProperties = [];
+    const nestedRulesList = [];
+    const keys = Object.keys(obj).sort();
+    for (const key of keys) {
+        const value = obj[key];
+        if (isStyledComponentKey(key, value)) {
+            const componentClassName = getClassNameFromKeyOrValue(key, value);
+            if (!componentClassName) {
+                continue;
+            }
+            const sanitizedClassName = sanitizeCSSSelector(componentClassName);
+            if (!sanitizedClassName) {
+                continue;
+            }
+            const componentSelector = selector
+                ? `${selector} .${sanitizedClassName}`
+                : `.${sanitizedClassName}`;
+            const nestedCss = isValidCSSObject(value)
+                ? cssObjectToString(value, componentSelector, depth + 1, media)
+                : "";
+            if (nestedCss) {
+                nestedRulesList.push(nestedCss);
+            }
+            continue;
+        }
+        if (isValidCSSObject(value)) {
+            if (media && key in media) {
+                const mediaQuery = sanitizeMediaQuery(media[key]);
+                if (mediaQuery) {
+                    const nestedCss = cssObjectToString(value, selector, depth + 1, media);
+                    if (nestedCss) {
+                        nestedRulesList.push(`${mediaQuery} { ${nestedCss} }`);
+                    }
+                }
+            }
+            else if (key.startsWith("@")) {
+                const sanitizedKey = sanitizeCSSSelector(key);
+                if (sanitizedKey) {
+                    const nestedCss = cssObjectToString(value, selector, depth + 1, media);
+                    if (nestedCss) {
+                        nestedRulesList.push(`${sanitizedKey} { ${nestedCss} }`);
+                    }
+                }
+            }
+            else if (key.includes("&")) {
+                const sanitizedKey = sanitizeCSSSelector(key);
+                if (sanitizedKey) {
+                    const parts = sanitizedKey.split("&");
+                    const nestedSelector = parts.join(selector);
+                    const nestedCss = cssObjectToString(value, nestedSelector, depth + 1, media);
+                    if (nestedCss) {
+                        nestedRulesList.push(nestedCss);
+                    }
+                }
+            }
+            else if (key.startsWith(":")) {
+                const sanitizedKey = sanitizeCSSSelector(key);
+                if (sanitizedKey) {
+                    const nestedSelector = `${selector}${sanitizedKey}`;
+                    const nestedCss = cssObjectToString(value, nestedSelector, depth + 1, media);
+                    if (nestedCss) {
+                        nestedRulesList.push(nestedCss);
+                    }
+                }
+            }
+            else if (key.includes(" ") || key.includes(">") || key.includes("+") || key.includes("~")) {
+                const sanitizedKey = sanitizeCSSSelector(key);
+                if (sanitizedKey) {
+                    const startsWithCombinator = /^[\s>+~]/.test(sanitizedKey.trim());
+                    const nestedSelector = startsWithCombinator
+                        ? `${selector}${sanitizedKey}`
+                        : `${selector} ${sanitizedKey}`;
+                    const nestedCss = cssObjectToString(value, nestedSelector, depth + 1, media);
+                    if (nestedCss) {
+                        nestedRulesList.push(nestedCss);
+                    }
+                }
+            }
+            else {
+                const sanitizedKey = sanitizeCSSSelector(key);
+                if (sanitizedKey) {
+                    const nestedSelector = selector ? `${selector} ${sanitizedKey}` : sanitizedKey;
+                    const nestedCss = cssObjectToString(value, nestedSelector, depth + 1, media);
+                    if (nestedCss) {
+                        nestedRulesList.push(nestedCss);
+                    }
+                }
+            }
+        }
+        else if (value !== undefined) {
+            const property = sanitizeCSSPropertyName(key);
+            if (property && (typeof value === "string" || typeof value === "number")) {
+                const escapedValue = escapeCSSValue(value);
+                cssProperties.push(`${property}: ${escapedValue};`);
+            }
+        }
+    }
+    // Use array join pattern for better performance with large stylesheets
+    const parts = [];
+    if (cssProperties.length > 0) {
+        parts.push(`${selector} { ${cssProperties.join(" ")} }`);
+    }
+    parts.push(...nestedRulesList);
+    return parts.join("");
+}
+/**
+ * Compiles CSS objects into CSS strings and generates unique class names.
+ * Handles nested selectors, media queries, styled component targeting, and theme tokens.
+ *
+ * @param styles - CSS object to compile
+ * @param currentTheme - Theme for token resolution
+ * @param prefix - Optional prefix for generated class names
+ * @param media - Optional media query breakpoints
+ * @param utils - Optional utility functions
+ * @param themeMap - Optional theme scale mappings
+ * @returns Generated class name
+ */
+export function compileCSS(styles, currentTheme, prefix = "stoop", media, utils, themeMap) {
+    const sanitizedPrefix = sanitizePrefix(prefix);
+    const stylesWithUtils = applyUtilities(styles, utils);
+    const themedStyles = replaceThemeTokensWithVars(stylesWithUtils, currentTheme, themeMap);
+    const cssString = cssObjectToString(themedStyles, "", 0, media);
+    const stylesHash = hash(cssString);
+    const className = sanitizedPrefix ? `${sanitizedPrefix}-${stylesHash}` : `css-${stylesHash}`;
+    const cacheKey = `${sanitizedPrefix}:${className}`;
+    const cachedCSS = cssStringCache.get(cacheKey);
+    if (cachedCSS) {
+        injectCSS(cachedCSS, sanitizedPrefix, cacheKey);
+        return className;
+    }
+    const fullCSS = cssObjectToString(themedStyles, `.${className}`, 0, media);
+    cssStringCache.set(cacheKey, fullCSS);
+    classNameCache.set(cacheKey, className);
+    injectCSS(fullCSS, sanitizedPrefix, cacheKey);
+    return className;
+}

package/dist/core/theme-manager.d.ts

@@ -21,10 +21,33 @@ export declare function registerDefaultTheme(theme: Theme, prefix?: string): voi
  */
 export declare function getDefaultTheme(prefix?: string): Theme | null;
 /**
- * Updates CSS custom properties when theme changes.
- * Automatically merges the theme with the default theme to ensure all properties are present.
+ * Core theme merging logic.
+ * Merges source theme into target theme, handling nested objects.
+ * Shared implementation used by both mergeWithDefaultTheme and createTheme.
+ *
+ * @param target - Target theme to merge into
+ * @param source - Source theme to merge from
+ * @returns Merged theme
+ */
+export declare function mergeThemes(target: Theme, source: Theme | Partial<Theme>): Theme;
+/**
+ * Merges a theme with the default theme if it's not already the default theme.
+ * This ensures all themes extend the default theme, keeping all original properties.
+ * Uses caching to avoid repeated merging of the same theme objects.
+ *
+ * @param theme - Theme to merge
+ * @param prefix - Optional prefix for theme scoping
+ * @returns Merged theme (or original if it's the default theme)
+ */
+export declare function mergeWithDefaultTheme(theme: Theme, prefix?: string): Theme;
+/**
+ * Injects CSS variables for all themes using attribute selectors.
+ * This allows all themes to be available simultaneously, with theme switching
+ * handled by changing the data-theme attribute. This prevents layout shifts
+ * and eliminates the need to replace CSS variables on theme change.
  *
- * @param theme - Theme object to generate CSS variables from
+ * @param themes - Map of theme names to theme objects
  * @param prefix - Optional prefix for CSS variable names
+ * @param attribute - Attribute name for theme selection (defaults to 'data-theme')
  */
-export declare function updateThemeVariables(theme: Theme, prefix?: string): void;
+export declare function injectAllThemes(themes: Record<string, Theme>, prefix?: string, attribute?: string): void;

package/dist/core/theme-manager.js

@@ -0,0 +1,107 @@
+/**
+ * Theme variable management.
+ * Updates CSS custom properties when theme changes.
+ * Ensures CSS variables are injected and kept in sync with theme updates.
+ * Automatically merges themes with the default theme when applied.
+ */
+import { injectAllThemeVariables } from "../inject";
+import { isBrowser } from "../utils/helpers";
+import { generateAllThemeVariables, themesAreEqual } from "../utils/theme";
+const defaultThemes = new Map();
+/**
+ * Registers the default theme for a given prefix.
+ * Called automatically by createStoop.
+ *
+ * @param theme - Default theme from createStoop
+ * @param prefix - Optional prefix for theme scoping
+ */
+export function registerDefaultTheme(theme, prefix = "stoop") {
+    const sanitizedPrefix = prefix || "";
+    defaultThemes.set(sanitizedPrefix, theme);
+}
+/**
+ * Gets the default theme for a given prefix.
+ *
+ * @param prefix - Optional prefix for theme scoping
+ * @returns Default theme or null if not registered
+ */
+export function getDefaultTheme(prefix = "stoop") {
+    const sanitizedPrefix = prefix || "";
+    return defaultThemes.get(sanitizedPrefix) || null;
+}
+/**
+ * Core theme merging logic.
+ * Merges source theme into target theme, handling nested objects.
+ * Shared implementation used by both mergeWithDefaultTheme and createTheme.
+ *
+ * @param target - Target theme to merge into
+ * @param source - Source theme to merge from
+ * @returns Merged theme
+ */
+export function mergeThemes(target, source) {
+    const merged = { ...target };
+    const sourceKeys = Object.keys(source);
+    for (const key of sourceKeys) {
+        if (key === "media") {
+            continue;
+        }
+        const sourceValue = source[key];
+        const targetValue = target[key];
+        if (sourceValue &&
+            typeof sourceValue === "object" &&
+            !Array.isArray(sourceValue) &&
+            targetValue &&
+            typeof targetValue === "object" &&
+            !Array.isArray(targetValue)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            merged[key] = { ...targetValue, ...sourceValue };
+        }
+        else if (sourceValue !== undefined) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            merged[key] = sourceValue;
+        }
+    }
+    return merged;
+}
+/**
+ * Merges a theme with the default theme if it's not already the default theme.
+ * This ensures all themes extend the default theme, keeping all original properties.
+ * Uses caching to avoid repeated merging of the same theme objects.
+ *
+ * @param theme - Theme to merge
+ * @param prefix - Optional prefix for theme scoping
+ * @returns Merged theme (or original if it's the default theme)
+ */
+export function mergeWithDefaultTheme(theme, prefix = "stoop") {
+    const defaultTheme = getDefaultTheme(prefix);
+    if (!defaultTheme) {
+        return theme;
+    }
+    if (themesAreEqual(theme, defaultTheme)) {
+        return theme;
+    }
+    // Merge theme with default theme
+    return mergeThemes(defaultTheme, theme);
+}
+/**
+ * Injects CSS variables for all themes using attribute selectors.
+ * This allows all themes to be available simultaneously, with theme switching
+ * handled by changing the data-theme attribute. This prevents layout shifts
+ * and eliminates the need to replace CSS variables on theme change.
+ *
+ * @param themes - Map of theme names to theme objects
+ * @param prefix - Optional prefix for CSS variable names
+ * @param attribute - Attribute name for theme selection (defaults to 'data-theme')
+ */
+export function injectAllThemes(themes, prefix = "stoop", attribute = "data-theme") {
+    if (!isBrowser()) {
+        return;
+    }
+    // Merge all themes with default theme
+    const mergedThemes = {};
+    for (const [themeName, theme] of Object.entries(themes)) {
+        mergedThemes[themeName] = mergeWithDefaultTheme(theme, prefix);
+    }
+    const allThemeVars = generateAllThemeVariables(mergedThemes, prefix, attribute);
+    injectAllThemeVariables(allThemeVars, prefix);
+}