stoop 0.3.0 → 0.4.0

package/dist/create-stoop-server.js

@@ -1,130 +0,0 @@
-/**
- * Server-safe factory function that creates a Stoop instance.
- * Only includes APIs that work without React: css, globalCss, keyframes, getCssText, etc.
- * Does NOT include: styled, Provider, useTheme
- *
- * This is the entry point for Server Components in Next.js App Router.
- */
-import { createTheme as createThemeFactory } from "./api/create-theme";
-import { createCSSFunction } from "./api/css";
-import { createGlobalCSSFunction } from "./api/global-css";
-import { createKeyframesFunction } from "./api/keyframes";
-import { DEFAULT_THEME_MAP } from "./constants";
-import { compileCSS } from "./core/compiler";
-import { registerDefaultTheme, updateThemeVariables } from "./core/theme-manager";
-import { getCssText as getCssTextBase, registerTheme } from "./inject";
-import { getRootRegex, sanitizePrefix } from "./utils/string";
-import { generateCSSVariables } from "./utils/theme";
-import { validateTheme } from "./utils/theme-validation";
-/**
- * Creates a server-safe Stoop instance with the provided configuration.
- * Only includes APIs that work without React: css, globalCss, keyframes, getCssText, etc.
- *
- * @param config - Configuration object containing theme, media queries, utilities, and optional prefix/themeMap
- * @returns StoopServerInstance with server-safe API functions
- */
-export function createStoop(config) {
-    const { media: configMedia, prefix = "stoop", theme, themeMap: userThemeMap, utils } = config;
-    const sanitizedPrefix = sanitizePrefix(prefix);
-    const validatedTheme = validateTheme(theme);
-    const media = validatedTheme.media || configMedia;
-    const mergedThemeMap = {
-        ...DEFAULT_THEME_MAP,
-        ...userThemeMap,
-    };
-    registerDefaultTheme(validatedTheme, sanitizedPrefix);
-    registerTheme(validatedTheme, sanitizedPrefix);
-    const css = createCSSFunction(validatedTheme, sanitizedPrefix, media, utils, mergedThemeMap);
-    const createTheme = createThemeFactory(validatedTheme);
-    const globalCss = createGlobalCSSFunction(validatedTheme, sanitizedPrefix, media, utils, mergedThemeMap);
-    const keyframes = createKeyframesFunction(sanitizedPrefix, validatedTheme, mergedThemeMap);
-    const themeObject = Object.freeze({ ...validatedTheme });
-    /**
-     * Pre-compiles CSS objects to warm the cache.
-     * Useful for eliminating FOUC by pre-compiling common styles.
-     *
-     * @param styles - Array of CSS objects to pre-compile
-     */
-    function warmCache(styles) {
-        for (const style of styles) {
-            try {
-                compileCSS(style, validatedTheme, sanitizedPrefix, media, utils, mergedThemeMap);
-            }
-            catch {
-                // Skip invalid styles
-            }
-        }
-    }
-    /**
-     * Preloads a theme by injecting its CSS variables before React renders.
-     * Useful for preventing FOUC when loading a non-default theme from localStorage.
-     *
-     * @param theme - Theme to preload (can be theme name string or Theme object)
-     */
-    function preloadTheme(theme) {
-        let themeToInject;
-        if (typeof theme === "string") {
-            if (config.themes && config.themes[theme]) {
-                themeToInject = config.themes[theme];
-            }
-            else {
-                if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
-                    // eslint-disable-next-line no-console
-                    console.warn(`[Stoop] Theme "${theme}" not found. Available themes: ${config.themes ? Object.keys(config.themes).join(", ") : "none"}`);
-                }
-                return;
-            }
-        }
-        else {
-            themeToInject = theme;
-        }
-        updateThemeVariables(themeToInject, sanitizedPrefix);
-    }
-    /**
-     * Gets all injected CSS text for server-side rendering.
-     * Always includes theme CSS variables.
-     *
-     * @param theme - Optional theme (name or object) to include vars for (defaults to default theme)
-     * @returns CSS text string with theme variables and component styles
-     */
-    function getCssText(theme) {
-        let themeToUse = validatedTheme;
-        if (theme) {
-            if (typeof theme === "string") {
-                if (config.themes && config.themes[theme]) {
-                    themeToUse = config.themes[theme];
-                }
-                else if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
-                    // eslint-disable-next-line no-console
-                    console.warn(`[Stoop] Theme "${theme}" not found. Using default theme. Available: ${config.themes ? Object.keys(config.themes).join(", ") : "none"}`);
-                }
-            }
-            else {
-                themeToUse = theme;
-            }
-        }
-        let result = "";
-        const themeVars = generateCSSVariables(themeToUse, sanitizedPrefix);
-        if (themeVars) {
-            result += themeVars + "\n";
-        }
-        const baseCss = getCssTextBase();
-        const rootRegex = getRootRegex(sanitizedPrefix);
-        const cssWithoutThemeVars = baseCss.replace(rootRegex, "").trim();
-        if (cssWithoutThemeVars) {
-            result += (result ? "\n" : "") + cssWithoutThemeVars;
-        }
-        return result;
-    }
-    return {
-        config: { ...config, prefix: sanitizedPrefix },
-        createTheme,
-        css,
-        getCssText,
-        globalCss,
-        keyframes,
-        preloadTheme,
-        theme: themeObject,
-        warmCache,
-    };
-}

package/dist/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Main entry point for Stoop CSS-in-JS library.
- * Exports the createStoop factory function and essential public types.
- */
-export { createStoop } from "./create-stoop";
-export type { CSS, StoopConfig, StoopInstance, StyledComponentProps, Theme, UtilityFunction, Variants, } from "./types";

package/dist/index.js

@@ -1,5 +0,0 @@
-/**
- * Main entry point for Stoop CSS-in-JS library.
- * Exports the createStoop factory function and essential public types.
- */
-export { createStoop } from "./create-stoop";

package/dist/inject/browser.d.ts

@@ -1,58 +0,0 @@
-/**
- * Browser-specific CSS injection.
- * Manages a single stylesheet element that gets updated with new CSS rules.
- * Handles theme variable injection, deduplication, and stylesheet lifecycle.
- */
-import type { Theme } from "../types";
-/**
- * Gets or creates the stylesheet element for CSS injection.
- * Reuses the SSR stylesheet if it exists to prevent FOUC.
- *
- * @param prefix - Optional prefix for stylesheet identification
- * @returns HTMLStyleElement
- * @throws Error if called in SSR context
- */
-export declare function getStylesheet(prefix?: string): HTMLStyleElement;
-/**
- * Injects theme CSS variables into the stylesheet.
- * Automatically ensures stylesheet exists before injection.
- *
- * @param cssVars - CSS variables string
- * @param theme - Theme object
- * @param prefix - Optional prefix for CSS variables
- */
-export declare function injectThemeVariables(cssVars: string, theme: Theme, prefix?: string): void;
-/**
- * Registers a theme for injection (browser-specific).
- * Automatically ensures stylesheet exists and injects theme variables.
- *
- * @param theme - Theme object to register
- * @param prefix - Optional prefix for CSS variables
- */
-export declare function registerTheme(theme: Theme, prefix?: string): void;
-/**
- * Updates the stylesheet with new CSS rules.
- *
- * @param css - CSS string to inject
- * @param ruleKey - Unique key for deduplication
- * @param prefix - Optional prefix for CSS rules
- */
-export declare function updateStylesheet(css: string, ruleKey: string, prefix?: string): void;
-/**
- * Injects CSS into the browser stylesheet with deduplication.
- *
- * @param css - CSS string to inject
- * @param ruleKey - Unique key for deduplication
- * @param prefix - Optional prefix for CSS rules
- */
-export declare function injectBrowserCSS(css: string, ruleKey: string, prefix?: string): void;
-/**
- * Gets the current stylesheet element.
- *
- * @returns HTMLStyleElement or null if not created
- */
-export declare function getStylesheetElement(): HTMLStyleElement | null;
-/**
- * Clears the stylesheet and all caches.
- */
-export declare function clearStylesheet(): void;

package/dist/inject/browser.js

@@ -1,149 +0,0 @@
-/**
- * Browser-specific CSS injection.
- * Manages a single stylesheet element that gets updated with new CSS rules.
- * Handles theme variable injection, deduplication, and stylesheet lifecycle.
- */
-import { isBrowser } from "../utils/environment";
-import { getRootRegex, sanitizePrefix } from "../utils/string";
-import { generateCSSVariables } from "../utils/theme";
-import * as dedup from "./dedup";
-import * as ssr from "./ssr";
-let stylesheetElement = null;
-const lastInjectedThemes = new Map();
-const lastInjectedCSSVars = new Map();
-/**
- * Gets or creates the stylesheet element for CSS injection.
- * Reuses the SSR stylesheet if it exists to prevent FOUC.
- *
- * @param prefix - Optional prefix for stylesheet identification
- * @returns HTMLStyleElement
- * @throws Error if called in SSR context
- */
-export function getStylesheet(prefix = "stoop") {
-    if (!isBrowser()) {
-        throw new Error("Cannot access document in SSR context");
-    }
-    const sanitizedPrefix = sanitizePrefix(prefix);
-    if (!stylesheetElement || !stylesheetElement.parentNode) {
-        const ssrStylesheet = document.getElementById("stoop-ssr");
-        if (ssrStylesheet) {
-            stylesheetElement = ssrStylesheet;
-            stylesheetElement.setAttribute("data-stoop", sanitizedPrefix || "stoop");
-        }
-        else {
-            stylesheetElement = document.createElement("style");
-            stylesheetElement.setAttribute("data-stoop", sanitizedPrefix || "stoop");
-            document.head.appendChild(stylesheetElement);
-        }
-    }
-    return stylesheetElement;
-}
-/**
- * Injects theme CSS variables into the stylesheet.
- * Automatically ensures stylesheet exists before injection.
- *
- * @param cssVars - CSS variables string
- * @param theme - Theme object
- * @param prefix - Optional prefix for CSS variables
- */
-export function injectThemeVariables(cssVars, theme, prefix = "stoop") {
-    if (!cssVars) {
-        return;
-    }
-    const sanitizedPrefix = sanitizePrefix(prefix);
-    const key = `__theme_vars_${sanitizedPrefix}`;
-    const lastCSSVars = lastInjectedCSSVars.get(key) ?? null;
-    if (lastCSSVars === cssVars) {
-        const lastTheme = lastInjectedThemes.get(key) ?? null;
-        if (lastTheme !== theme) {
-            lastInjectedThemes.set(key, theme);
-        }
-        return;
-    }
-    lastInjectedThemes.set(key, theme);
-    lastInjectedCSSVars.set(key, cssVars);
-    if (!isBrowser()) {
-        ssr.addToSSRCache(cssVars);
-        return;
-    }
-    const sheet = getStylesheet(sanitizedPrefix);
-    const currentCSS = sheet.textContent || "";
-    if (dedup.isInjectedRule(key)) {
-        const rootRegex = getRootRegex(sanitizedPrefix);
-        const withoutVars = currentCSS.replace(rootRegex, "").trim();
-        sheet.textContent = cssVars + (withoutVars ? "\n" + withoutVars : "");
-        dedup.markRuleAsInjected(key, cssVars);
-    }
-    else {
-        sheet.textContent = cssVars + (currentCSS ? "\n" + currentCSS : "");
-        dedup.markRuleAsInjected(key, cssVars);
-    }
-}
-/**
- * Registers a theme for injection (browser-specific).
- * Automatically ensures stylesheet exists and injects theme variables.
- *
- * @param theme - Theme object to register
- * @param prefix - Optional prefix for CSS variables
- */
-export function registerTheme(theme, prefix = "stoop") {
-    const sanitizedPrefix = sanitizePrefix(prefix);
-    if (isBrowser()) {
-        getStylesheet(sanitizedPrefix);
-        const cssVars = generateCSSVariables(theme, sanitizedPrefix);
-        injectThemeVariables(cssVars, theme, sanitizedPrefix);
-    }
-}
-/**
- * Updates the stylesheet with new CSS rules.
- *
- * @param css - CSS string to inject
- * @param ruleKey - Unique key for deduplication
- * @param prefix - Optional prefix for CSS rules
- */
-export function updateStylesheet(css, ruleKey, prefix = "stoop") {
-    if (!isBrowser()) {
-        return;
-    }
-    const sanitizedPrefix = sanitizePrefix(prefix);
-    if (dedup.isInjectedRule(ruleKey)) {
-        return;
-    }
-    const sheet = getStylesheet(sanitizedPrefix);
-    const currentCSS = sheet.textContent || "";
-    sheet.textContent = currentCSS + (currentCSS ? "\n" : "") + css;
-    dedup.markRuleAsInjected(ruleKey, css);
-}
-/**
- * Injects CSS into the browser stylesheet with deduplication.
- *
- * @param css - CSS string to inject
- * @param ruleKey - Unique key for deduplication
- * @param prefix - Optional prefix for CSS rules
- */
-export function injectBrowserCSS(css, ruleKey, prefix = "stoop") {
-    if (dedup.isInjectedRule(ruleKey)) {
-        return;
-    }
-    const sanitizedPrefix = sanitizePrefix(prefix);
-    updateStylesheet(css, ruleKey, sanitizedPrefix);
-}
-/**
- * Gets the current stylesheet element.
- *
- * @returns HTMLStyleElement or null if not created
- */
-export function getStylesheetElement() {
-    return stylesheetElement;
-}
-/**
- * Clears the stylesheet and all caches.
- */
-export function clearStylesheet() {
-    if (stylesheetElement && stylesheetElement.parentNode) {
-        stylesheetElement.parentNode.removeChild(stylesheetElement);
-    }
-    stylesheetElement = null;
-    lastInjectedThemes.clear();
-    lastInjectedCSSVars.clear();
-}

package/dist/inject/dedup.d.ts

@@ -1,29 +0,0 @@
-/**
- * CSS injection deduplication.
- * Tracks which CSS rules have been injected to prevent duplicates.
- * Used by both browser and SSR injection systems.
- */
-/**
- * Checks if a CSS rule has already been injected.
- *
- * @param key - Rule key to check
- * @returns True if rule is already injected
- */
-export declare function isInjectedRule(key: string): boolean;
-/**
- * Marks a CSS rule as injected.
- *
- * @param key - Rule key
- * @param css - CSS string
- */
-export declare function markRuleAsInjected(key: string, css: string): void;
-/**
- * Gets all injected rules as a new Map.
- *
- * @returns Map of all injected rules
- */
-export declare function getAllInjectedRules(): Map<string, string>;
-/**
- * Clears all injected rule tracking.
- */
-export declare function clearInjectedRules(): void;

package/dist/inject/dedup.js

@@ -1,38 +0,0 @@
-/**
- * CSS injection deduplication.
- * Tracks which CSS rules have been injected to prevent duplicates.
- * Used by both browser and SSR injection systems.
- */
-const injectedRules = new Map();
-/**
- * Checks if a CSS rule has already been injected.
- *
- * @param key - Rule key to check
- * @returns True if rule is already injected
- */
-export function isInjectedRule(key) {
-    return injectedRules.has(key);
-}
-/**
- * Marks a CSS rule as injected.
- *
- * @param key - Rule key
- * @param css - CSS string
- */
-export function markRuleAsInjected(key, css) {
-    injectedRules.set(key, css);
-}
-/**
- * Gets all injected rules as a new Map.
- *
- * @returns Map of all injected rules
- */
-export function getAllInjectedRules() {
-    return new Map(injectedRules);
-}
-/**
- * Clears all injected rule tracking.
- */
-export function clearInjectedRules() {
-    injectedRules.clear();
-}

package/dist/inject/index.d.ts

@@ -1,40 +0,0 @@
-/**
- * CSS injection public API.
- * Composes browser, SSR, and deduplication modules into a unified interface.
- * Provides single stylesheet injection with automatic SSR support.
- */
-import type { Theme } from "../types";
-export { isInjectedRule } from "./dedup";
-/**
- * Injects CSS into the document with automatic SSR support.
- *
- * @param css - CSS string to inject
- * @param prefix - Optional prefix for CSS rules
- * @param ruleKey - Optional unique key for deduplication
- */
-export declare function injectCSS(css: string, prefix?: string, ruleKey?: string): void;
-/**
- * Injects theme CSS variables into the document.
- *
- * @param cssVars - CSS variables string
- * @param theme - Theme object
- * @param prefix - Optional prefix for CSS variables
- */
-export declare function injectThemeVariables(cssVars: string, theme: Theme, prefix?: string): void;
-/**
- * Registers a theme for injection.
- *
- * @param theme - Theme object to register
- * @param prefix - Optional prefix for CSS variables
- */
-export declare function registerTheme(theme: Theme, prefix?: string): void;
-/**
- * Gets all injected CSS text (browser or SSR).
- *
- * @returns CSS text string
- */
-export declare function getCssText(): string;
-/**
- * Clears all injected CSS and caches.
- */
-export declare function clearStylesheet(): void;

package/dist/inject/index.js

@@ -1,75 +0,0 @@
-/**
- * CSS injection public API.
- * Composes browser, SSR, and deduplication modules into a unified interface.
- * Provides single stylesheet injection with automatic SSR support.
- */
-import { clearStyleCache } from "../core/cache";
-import { isBrowser } from "../utils/environment";
-import * as browser from "./browser";
-import * as dedup from "./dedup";
-import * as ssr from "./ssr";
-export { isInjectedRule } from "./dedup";
-/**
- * Injects CSS into the document with automatic SSR support.
- *
- * @param css - CSS string to inject
- * @param prefix - Optional prefix for CSS rules
- * @param ruleKey - Optional unique key for deduplication
- */
-export function injectCSS(css, prefix = "stoop", ruleKey) {
-    const key = ruleKey || css;
-    if (!isBrowser()) {
-        if (!dedup.isInjectedRule(key)) {
-            dedup.markRuleAsInjected(key, css);
-        }
-        ssr.addToSSRCache(css);
-        return;
-    }
-    browser.injectBrowserCSS(css, key, prefix);
-}
-/**
- * Injects theme CSS variables into the document.
- *
- * @param cssVars - CSS variables string
- * @param theme - Theme object
- * @param prefix - Optional prefix for CSS variables
- */
-export function injectThemeVariables(cssVars, theme, prefix = "stoop") {
-    browser.injectThemeVariables(cssVars, theme, prefix);
-}
-/**
- * Registers a theme for injection.
- *
- * @param theme - Theme object to register
- * @param prefix - Optional prefix for CSS variables
- */
-export function registerTheme(theme, prefix = "stoop") {
-    browser.registerTheme(theme, prefix);
-}
-/**
- * Gets all injected CSS text (browser or SSR).
- *
- * @returns CSS text string
- */
-export function getCssText() {
-    if (isBrowser()) {
-        const sheetElement = browser.getStylesheetElement();
-        if (sheetElement && sheetElement.parentNode) {
-            const sheetCSS = sheetElement.textContent || "";
-            if (!sheetCSS && dedup.getAllInjectedRules().size > 0) {
-                return ssr.getSSRCacheText();
-            }
-            return sheetCSS;
-        }
-    }
-    return ssr.getSSRCacheText();
-}
-/**
- * Clears all injected CSS and caches.
- */
-export function clearStylesheet() {
-    browser.clearStylesheet();
-    dedup.clearInjectedRules();
-    ssr.clearSSRCache();
-    clearStyleCache();
-}

package/dist/inject/ssr.d.ts

@@ -1,27 +0,0 @@
-/**
- * SSR cache management for CSS injection.
- * Maintains a cache of CSS text for server-side rendering.
- */
-/**
- * Adds CSS to the SSR cache with FIFO eviction.
- *
- * @param css - CSS string to cache
- */
-export declare function addToSSRCache(css: string): void;
-/**
- * Gets all cached CSS text for SSR.
- *
- * @returns Joined CSS text string
- */
-export declare function getSSRCacheText(): string;
-/**
- * Clears the SSR cache.
- */
-export declare function clearSSRCache(): void;
-/**
- * Checks if CSS is already in the SSR cache.
- *
- * @param css - CSS string to check
- * @returns True if CSS is cached
- */
-export declare function isInSSRCache(css: string): boolean;

package/dist/inject/ssr.js

@@ -1,46 +0,0 @@
-/**
- * SSR cache management for CSS injection.
- * Maintains a cache of CSS text for server-side rendering.
- */
-import { MAX_CSS_CACHE_SIZE } from "../constants";
-const cssTextCache = new Map();
-/**
- * Adds CSS to the SSR cache with FIFO eviction.
- *
- * @param css - CSS string to cache
- */
-export function addToSSRCache(css) {
-    if (cssTextCache.has(css)) {
-        return;
-    }
-    if (cssTextCache.size >= MAX_CSS_CACHE_SIZE) {
-        const firstKey = cssTextCache.keys().next().value;
-        if (firstKey !== undefined) {
-            cssTextCache.delete(firstKey);
-        }
-    }
-    cssTextCache.set(css, true);
-}
-/**
- * Gets all cached CSS text for SSR.
- *
- * @returns Joined CSS text string
- */
-export function getSSRCacheText() {
-    return Array.from(cssTextCache.keys()).join("\n");
-}
-/**
- * Clears the SSR cache.
- */
-export function clearSSRCache() {
-    cssTextCache.clear();
-}
-/**
- * Checks if CSS is already in the SSR cache.
- *
- * @param css - CSS string to check
- * @returns True if CSS is cached
- */
-export function isInSSRCache(css) {
-    return cssTextCache.has(css);
-}

package/dist/ssr.d.ts

@@ -1,21 +0,0 @@
-/**
- * Server-safe entry point for Stoop.
- * Exports only functions that work in Server Components.
- * NO React dependencies, NO "use client" directive.
- *
- * Use this entry point when importing Stoop in Next.js Server Components.
- *
- * @example
- * ```typescript
- * // In a Server Component (layout.tsx)
- * import { createStoop } from 'stoop/ssr';
- *
- * const { getCssText } = createStoop(config);
- * const cssText = getCssText();
- * ```
- */
-export { createStoop } from "./create-stoop-server";
-export type { StoopServerInstance } from "./create-stoop-server";
-export { getCssText, clearStylesheet } from "./inject";
-export { generateCSSVariables } from "./utils/theme";
-export type { Theme, CSS, StoopConfig, UtilityFunction, Variants } from "./types";

package/dist/ssr.js

@@ -1,19 +0,0 @@
-/**
- * Server-safe entry point for Stoop.
- * Exports only functions that work in Server Components.
- * NO React dependencies, NO "use client" directive.
- *
- * Use this entry point when importing Stoop in Next.js Server Components.
- *
- * @example
- * ```typescript
- * // In a Server Component (layout.tsx)
- * import { createStoop } from 'stoop/ssr';
- *
- * const { getCssText } = createStoop(config);
- * const cssText = getCssText();
- * ```
- */
-export { createStoop } from "./create-stoop-server";
-export { getCssText, clearStylesheet } from "./inject";
-export { generateCSSVariables } from "./utils/theme";

package/dist/utils/environment.d.ts

@@ -1,6 +0,0 @@
-/**
- * Checks if code is running in a browser environment.
- *
- * @returns True if running in browser, false if in SSR/Node environment
- */
-export declare function isBrowser(): boolean;

package/dist/utils/environment.js

@@ -1,12 +0,0 @@
-/**
- * Checks if code is running in a browser environment.
- *
- * @returns True if running in browser, false if in SSR/Node environment
- */
-export function isBrowser() {
-    return (typeof window !== "undefined" &&
-        typeof document !== "undefined" &&
-        typeof window.document === "object" &&
-        // Ensure we're not in React Server Component or SSR context
-        typeof window.requestAnimationFrame === "function");
-}