stoop 0.4.0 → 0.4.1

package/dist/constants.js

@@ -1,154 +0,0 @@
-/**
- * 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.js

@@ -1,68 +0,0 @@
-/**
- * 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.js

@@ -1,206 +0,0 @@
-/**
- * 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.js

@@ -1,107 +0,0 @@
-/**
- * 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);
-}

package/dist/core/variants.js

@@ -1,38 +0,0 @@
-/**
- * Variant application logic.
- * Merges variant styles with base styles based on component props.
- * Optimized to avoid unnecessary object spreads when no variants are applied.
- */
-/**
- * Applies variant styles to base styles based on component props.
- *
- * @param variants - Variant configuration object
- * @param props - Component props containing variant values
- * @param baseStyles - Base styles to merge with variant styles
- * @returns Merged CSS object
- */
-export function applyVariants(variants, props, baseStyles) {
-    let hasVariants = false;
-    const appliedVariantStyles = [];
-    for (const variantName in variants) {
-        const propValue = props[variantName];
-        if (propValue === undefined) {
-            continue;
-        }
-        const variantOptions = variants[variantName];
-        const key = propValue === true ? "true" : propValue === false ? "false" : String(propValue);
-        if (variantOptions[key]) {
-            appliedVariantStyles.push(variantOptions[key]);
-            hasVariants = true;
-        }
-    }
-    if (!hasVariants) {
-        return baseStyles;
-    }
-    // Merge all variant styles into a single object using spread for consistency
-    const mergedVariants = { ...appliedVariantStyles[0] };
-    for (let i = 1; i < appliedVariantStyles.length; i++) {
-        Object.assign(mergedVariants, appliedVariantStyles[i]);
-    }
-    return { ...baseStyles, ...mergedVariants };
-}