@tenphi/tasty 2.0.3 → 2.1.0

package/dist/hooks/useProperty.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useProperty.js","names":[],"sources":["../../src/hooks/useProperty.ts"],"sourcesContent":["import { getGlobalInjector } from '../config';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport { formatPropertyCSS } from '../ssr/format-property';\n\nexport interface UsePropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').\n   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property.\n   * For color tokens (#name), this defaults to 'transparent' if not specified.\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Register a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * The function ensures the property is only registered once per root.\n *\n * Accepts tasty token syntax for the property name:\n * - `$name` → defines `--name`\n * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')\n * - `--name` → defines `--name` (legacy format)\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * @param name - The property token ($name, #name) or CSS property name (--name)\n * @param options - Property configuration\n *\n * @example Basic property with token syntax\n * ```tsx\n * function Spinner() {\n *   useProperty('$rotation', {\n *     syntax: '<angle>',\n *     inherits: false,\n *     initialValue: '0deg',\n *   });\n *\n *   return <div className=\"spinner\" />;\n * }\n * ```\n *\n * @example Color property with token syntax (auto-sets syntax)\n * ```tsx\n * function MyComponent() {\n *   useProperty('#theme', {\n *     initialValue: 'red', // syntax: '<color>' is auto-set\n *   });\n *\n *   // Now --theme-color can be animated with CSS transitions\n *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;\n * }\n * ```\n *\n * @example Legacy format (still supported)\n * ```tsx\n * function ResizableBox() {\n *   useProperty('--box-size', {\n *     syntax: '<length>',\n *     initialValue: '100px',\n *   });\n *\n *   return <div style={{ width: 'var(--box-size)' }} />;\n * }\n * ```\n */\nexport function useProperty(name: string, options?: UsePropertyOptions): void {\n  if (!name) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(`[Tasty] useProperty: property name is required`);\n    }\n    return;\n  }\n\n  const target = getStyleTarget();\n\n  if (target.mode === 'ssr') {\n    target.collector.collectInternals();\n\n    const css = formatPropertyCSS(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    });\n    if (css) {\n      target.collector.collectProperty(name, css);\n    }\n    return;\n  }\n\n  if (target.mode === 'rsc') {\n    const css = formatPropertyCSS(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    });\n    if (css) {\n      pushRSCCSS(target.cache, `__prop:${name}`, css);\n    }\n    return;\n  }\n\n  const injector = getGlobalInjector();\n\n  if (injector.isPropertyDefined(name, { root: options?.root })) {\n    return;\n  }\n\n  injector.property(name, {\n    syntax: options?.syntax,\n    inherits: options?.inherits,\n    initialValue: options?.initialValue,\n    root: options?.root,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAgB,YAAY,MAAc,SAAoC;AAC5E,KAAI,CAAC,MAAM;AAEP,UAAQ,KAAK,iDAAiD;AAEhE;;CAGF,MAAM,SAAS,gBAAgB;AAE/B,KAAI,OAAO,SAAS,OAAO;AACzB,SAAO,UAAU,kBAAkB;EAEnC,MAAM,MAAM,kBAAkB,MAAM;GAClC,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACxB,CAAC;AACF,MAAI,IACF,QAAO,UAAU,gBAAgB,MAAM,IAAI;AAE7C;;AAGF,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,kBAAkB,MAAM;GAClC,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACxB,CAAC;AACF,MAAI,IACF,YAAW,OAAO,OAAO,UAAU,QAAQ,IAAI;AAEjD;;CAGF,MAAM,WAAW,mBAAmB;AAEpC,KAAI,SAAS,kBAAkB,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC,CAC3D;AAGF,UAAS,SAAS,MAAM;EACtB,QAAQ,SAAS;EACjB,UAAU,SAAS;EACnB,cAAc,SAAS;EACvB,MAAM,SAAS;EAChB,CAAC"}

package/dist/hooks/useRawCSS.d.ts

@@ -1,22 +0,0 @@
-//#region src/hooks/useRawCSS.d.ts
-interface UseRawCSSOptions {
-  /**
-   * Shadow root or document to inject into.
-   * Note: `root` is not part of the update-tracking comparison — changing
-   * only the root for the same id/content will not re-inject.
-   */
-  root?: Document | ShadowRoot;
-  /**
-   * Stable identifier for update tracking (client-only). When provided,
-   * changing the CSS content will dispose the previous injection and inject
-   * the new one. Without an id, deduplication is purely content-based (same
-   * CSS is injected only once). In RSC mode, renders are single-pass so
-   * update tracking does not apply.
-   */
-  id?: string;
-}
-declare function useRawCSS(css: string, options?: UseRawCSSOptions): void;
-declare function useRawCSS(factory: () => string, deps: readonly unknown[], options?: UseRawCSSOptions): void;
-//#endregion
-export { useRawCSS };
-//# sourceMappingURL=useRawCSS.d.ts.map

package/dist/hooks/useRawCSS.js

@@ -1,103 +0,0 @@
-import { hashString } from "../utils/hash.js";
-import { injectRawCSS } from "../injector/index.js";
-import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
-import { depsEqual } from "../utils/deps-equal.js";
-//#region src/hooks/useRawCSS.ts
-const clientEntries = /* @__PURE__ */ new Map();
-const clientContentDedup = /* @__PURE__ */ new Set();
-const factoryDepsCache = /* @__PURE__ */ new Map();
-/**
-* Inject raw CSS text directly without parsing.
-* This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.
-*
-* The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts
-* with tasty's chunked style sheets.
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* Injected styles are permanent — they are not cleaned up on component unmount.
-* Use the `id` option for update tracking when styles change over the
-* component lifecycle.
-*
-* @example Static CSS string
-* ```tsx
-* function GlobalStyles() {
-*   useRawCSS(`
-*     body {
-*       margin: 0;
-*       padding: 0;
-*       font-family: sans-serif;
-*     }
-*   `);
-*
-*   return null;
-* }
-* ```
-*
-* @example Factory function with dependencies
-* ```tsx
-* function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
-*   useRawCSS(() => `
-*     :root {
-*       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
-*       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
-*     }
-*   `, [theme], { id: 'theme-vars' });
-*
-*   return null;
-* }
-* ```
-*
-* @example With options
-* ```tsx
-* function ShadowStyles({ shadowRoot }) {
-*   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
-*   return null;
-* }
-* ```
-*/
-function useRawCSS(cssOrFactory, depsOrOptions, options) {
-	const isFactory = typeof cssOrFactory === "function";
-	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
-	const opts = isFactory ? options : depsOrOptions;
-	const target = getStyleTarget();
-	if (isFactory && deps && opts?.id && target.mode === "client") {
-		const cachedDeps = factoryDepsCache.get(opts.id);
-		if (cachedDeps && depsEqual(cachedDeps, deps)) return;
-	}
-	const css = isFactory ? cssOrFactory() : cssOrFactory;
-	if (!css.trim()) return;
-	if (target.mode === "ssr") {
-		const key = opts?.id ? `raw:${opts.id}` : `raw:${hashString(css)}`;
-		target.collector.collectRawCSS(key, css);
-		return;
-	}
-	if (target.mode === "rsc") {
-		const key = opts?.id ? `__raw:${opts.id}` : `__raw:${hashString(css)}`;
-		pushRSCCSS(target.cache, key, css);
-		return;
-	}
-	const id = opts?.id;
-	if (id) {
-		const existing = clientEntries.get(id);
-		if (existing) {
-			if (existing.contentKey === css) return;
-			existing.dispose();
-		}
-		const { dispose } = injectRawCSS(css, opts);
-		clientEntries.set(id, {
-			contentKey: css,
-			dispose
-		});
-		if (deps) factoryDepsCache.set(id, deps);
-	} else {
-		const contentKey = hashString(css);
-		if (clientContentDedup.has(contentKey)) return;
-		clientContentDedup.add(contentKey);
-		injectRawCSS(css, opts);
-	}
-}
-//#endregion
-export { useRawCSS };
-
-//# sourceMappingURL=useRawCSS.js.map

package/dist/hooks/useRawCSS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { injectRawCSS } from '../injector';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport { depsEqual } from '../utils/deps-equal';\nimport { hashString } from '../utils/hash';\n\ninterface UseRawCSSOptions {\n  /**\n   * Shadow root or document to inject into.\n   * Note: `root` is not part of the update-tracking comparison — changing\n   * only the root for the same id/content will not re-inject.\n   */\n  root?: Document | ShadowRoot;\n  /**\n   * Stable identifier for update tracking (client-only). When provided,\n   * changing the CSS content will dispose the previous injection and inject\n   * the new one. Without an id, deduplication is purely content-based (same\n   * CSS is injected only once). In RSC mode, renders are single-pass so\n   * update tracking does not apply.\n   */\n  id?: string;\n}\n\ninterface ClientEntry {\n  contentKey: string;\n  dispose: () => void;\n}\n\nconst clientEntries = new Map<string, ClientEntry>();\nconst clientContentDedup = new Set<string>();\nconst factoryDepsCache = new Map<string, readonly unknown[]>();\n\n/* @internal — used only for tests */\nexport function _resetRawCSSCache(): void {\n  clientEntries.clear();\n  clientContentDedup.clear();\n  factoryDepsCache.clear();\n}\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n  factory: () => string,\n  deps: readonly unknown[],\n  options?: UseRawCSSOptions,\n): void;\n\n/**\n * Inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * Injected styles are permanent — they are not cleaned up on component unmount.\n * Use the `id` option for update tracking when styles change over the\n * component lifecycle.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n *   useRawCSS(`\n *     body {\n *       margin: 0;\n *       padding: 0;\n *       font-family: sans-serif;\n *     }\n *   `);\n *\n *   return null;\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n *   useRawCSS(() => `\n *     :root {\n *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n *     }\n *   `, [theme], { id: 'theme-vars' });\n *\n *   return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n *   return null;\n * }\n * ```\n */\nexport function useRawCSS(\n  cssOrFactory: string | (() => string),\n  depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n  options?: UseRawCSSOptions,\n): void {\n  const isFactory = typeof cssOrFactory === 'function';\n\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseRawCSSOptions | undefined);\n\n  const target = getStyleTarget();\n\n  // Client deps cache: skip factory re-evaluation when deps haven't changed\n  if (isFactory && deps && opts?.id && target.mode === 'client') {\n    const cachedDeps = factoryDepsCache.get(opts.id);\n    if (cachedDeps && depsEqual(cachedDeps, deps)) {\n      return;\n    }\n  }\n\n  const css = isFactory\n    ? (cssOrFactory as () => string)()\n    : (cssOrFactory as string);\n\n  if (!css.trim()) return;\n\n  if (target.mode === 'ssr') {\n    const key = opts?.id ? `raw:${opts.id}` : `raw:${hashString(css)}`;\n    target.collector.collectRawCSS(key, css);\n    return;\n  }\n\n  if (target.mode === 'rsc') {\n    const key = opts?.id ? `__raw:${opts.id}` : `__raw:${hashString(css)}`;\n    pushRSCCSS(target.cache, key, css);\n    return;\n  }\n\n  // Client path\n  const id = opts?.id;\n\n  if (id) {\n    const existing = clientEntries.get(id);\n    if (existing) {\n      if (existing.contentKey === css) return;\n      existing.dispose();\n    }\n\n    const { dispose } = injectRawCSS(css, opts);\n    clientEntries.set(id, { contentKey: css, dispose });\n    if (deps) factoryDepsCache.set(id, deps);\n  } else {\n    const contentKey = hashString(css);\n    if (clientContentDedup.has(contentKey)) return;\n    clientContentDedup.add(contentKey);\n    injectRawCSS(css, opts);\n  }\n}\n"],"mappings":";;;;;AA2BA,MAAM,gCAAgB,IAAI,KAA0B;AACpD,MAAM,qCAAqB,IAAI,KAAa;AAC5C,MAAM,mCAAmB,IAAI,KAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqE9D,SAAgB,UACd,cACA,eACA,SACM;CACN,MAAM,YAAY,OAAO,iBAAiB;CAE1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAEL,MAAM,SAAS,gBAAgB;AAG/B,KAAI,aAAa,QAAQ,MAAM,MAAM,OAAO,SAAS,UAAU;EAC7D,MAAM,aAAa,iBAAiB,IAAI,KAAK,GAAG;AAChD,MAAI,cAAc,UAAU,YAAY,KAAK,CAC3C;;CAIJ,MAAM,MAAM,YACP,cAA+B,GAC/B;AAEL,KAAI,CAAC,IAAI,MAAM,CAAE;AAEjB,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,MAAM,KAAK,OAAO,KAAK,OAAO,OAAO,WAAW,IAAI;AAChE,SAAO,UAAU,cAAc,KAAK,IAAI;AACxC;;AAGF,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,MAAM,KAAK,SAAS,KAAK,OAAO,SAAS,WAAW,IAAI;AACpE,aAAW,OAAO,OAAO,KAAK,IAAI;AAClC;;CAIF,MAAM,KAAK,MAAM;AAEjB,KAAI,IAAI;EACN,MAAM,WAAW,cAAc,IAAI,GAAG;AACtC,MAAI,UAAU;AACZ,OAAI,SAAS,eAAe,IAAK;AACjC,YAAS,SAAS;;EAGpB,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,gBAAc,IAAI,IAAI;GAAE,YAAY;GAAK;GAAS,CAAC;AACnD,MAAI,KAAM,kBAAiB,IAAI,IAAI,KAAK;QACnC;EACL,MAAM,aAAa,WAAW,IAAI;AAClC,MAAI,mBAAmB,IAAI,WAAW,CAAE;AACxC,qBAAmB,IAAI,WAAW;AAClC,eAAa,KAAK,KAAK"}

package/dist/hooks/useStyles.d.ts

@@ -1,40 +0,0 @@
-import { Styles } from "../styles/types.js";
-
-//#region src/hooks/useStyles.d.ts
-/**
- * Tasty styles object to generate CSS classes for.
- * Can be undefined or empty object for no styles.
- */
-type UseStylesOptions = Styles | undefined;
-interface UseStylesResult {
-  /**
-   * Generated className(s) to apply to the element.
-   * Can be empty string if no styles are provided.
-   * With chunking enabled, may contain multiple space-separated class names.
-   */
-  className: string;
-}
-/**
- * Hook to generate CSS classes from Tasty styles.
- * Thin wrapper around `computeStyles()` that adds React context-based
- * SSR collector discovery for backward compatibility with TastyRegistry.
- *
- * For hook-free usage (e.g. in server components), use `computeStyles()` directly.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { className } = useStyles({
- *     padding: '2x',
- *     fill: '#purple',
- *     radius: '1r',
- *   });
- *
- *   return <div className={className}>Styled content</div>;
- * }
- * ```
- */
-declare function useStyles(styles: UseStylesOptions): UseStylesResult;
-//#endregion
-export { UseStylesOptions, UseStylesResult, useStyles };
-//# sourceMappingURL=useStyles.d.ts.map

package/dist/hooks/useStyles.js

@@ -1,31 +0,0 @@
-import { computeStyles } from "../compute-styles.js";
-import { TastySSRContext } from "../ssr/context.js";
-import { useContext } from "react";
-//#region src/hooks/useStyles.ts
-/**
-* Hook to generate CSS classes from Tasty styles.
-* Thin wrapper around `computeStyles()` that adds React context-based
-* SSR collector discovery for backward compatibility with TastyRegistry.
-*
-* For hook-free usage (e.g. in server components), use `computeStyles()` directly.
-*
-* @example
-* ```tsx
-* function MyComponent() {
-*   const { className } = useStyles({
-*     padding: '2x',
-*     fill: '#purple',
-*     radius: '1r',
-*   });
-*
-*   return <div className={className}>Styled content</div>;
-* }
-* ```
-*/
-function useStyles(styles) {
-	return computeStyles(styles, { ssrCollector: useContext(TastySSRContext) });
-}
-//#endregion
-export { useStyles };
-
-//# sourceMappingURL=useStyles.js.map

package/dist/hooks/useStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { computeStyles } from '../compute-styles';\nimport { TastySSRContext } from '../ssr/context';\nimport type { Styles } from '../styles/types';\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Hook to generate CSS classes from Tasty styles.\n * Thin wrapper around `computeStyles()` that adds React context-based\n * SSR collector discovery for backward compatibility with TastyRegistry.\n *\n * For hook-free usage (e.g. in server components), use `computeStyles()` directly.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  return computeStyles(styles, { ssrCollector: useContext(TastySSRContext) });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,UAAU,QAA2C;AACnE,QAAO,cAAc,QAAQ,EAAE,cAAc,WAAW,gBAAgB,EAAE,CAAC"}

package/dist/injector/index.d.ts

@@ -1,182 +0,0 @@
-import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, GlobalInjectResult, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule, StyleUsage } from "./types.js";
-import { StyleResult } from "../pipeline/index.js";
-import { SheetManager } from "./sheet-manager.js";
-import { StyleInjector } from "./injector.js";
-
-//#region src/injector/index.d.ts
-/**
- * Inject styles and return className with dispose function
- */
-declare function inject(rules: StyleResult[], options?: {
-  root?: Document | ShadowRoot;
-  cacheKey?: string;
-}): InjectResult;
-/**
- * Inject global rules that should not reserve tasty class names
- */
-declare function injectGlobal(rules: StyleResult[], options?: {
-  root?: Document | ShadowRoot;
-}): GlobalInjectResult;
-/**
- * Inject raw CSS text directly without parsing
- * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
- * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
- *
- * @example
- * ```tsx
- * // Inject raw CSS
- * const { dispose } = injectRawCSS(`
- *   body { margin: 0; padding: 0; }
- *   .my-class { color: red; }
- * `);
- *
- * // Later, remove the injected CSS
- * dispose();
- * ```
- */
-declare function injectRawCSS(css: string, options?: {
-  root?: Document | ShadowRoot;
-}): {
-  dispose: () => void;
-};
-/**
- * Get raw CSS text for SSR
- */
-declare function getRawCSSText(options?: {
-  root?: Document | ShadowRoot;
-}): string;
-/**
- * Inject keyframes and return object with toString() and dispose()
- */
-declare function keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
-  root?: Document | ShadowRoot;
-  name?: string;
-}): KeyframesResult;
-interface PropertyOptions {
-  /**
-   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
-   */
-  syntax?: string;
-  /**
-   * Whether the property inherits from parent elements
-   * @default true
-   */
-  inherits?: boolean;
-  /**
-   * Initial value for the property
-   */
-  initialValue?: string | number;
-  /**
-   * Shadow root or document to inject into
-   */
-  root?: Document | ShadowRoot;
-}
-/**
- * Define a CSS @property custom property.
- * This enables advanced features like animating custom properties.
- *
- * Note: @property rules are global and persistent once defined.
- * Re-registering the same property name is a no-op.
- *
- * @param name - The custom property name (must start with --)
- * @param options - Property configuration
- *
- * @example
- * ```ts
- * // Define a color property that can be animated
- * property('--my-color', {
- *   syntax: '<color>',
- *   initialValue: 'red',
- * });
- *
- * // Define an angle property
- * property('--rotation', {
- *   syntax: '<angle>',
- *   inherits: false,
- *   initialValue: '0deg',
- * });
- * ```
- */
-declare function property(name: string, options?: PropertyOptions): void;
-/**
- * Check if a CSS @property has already been defined
- *
- * @param name - The custom property name to check
- * @param options - Options including root
- */
-declare function isPropertyDefined(name: string, options?: {
-  root?: Document | ShadowRoot;
-}): boolean;
-/**
- * Inject a CSS @font-face rule.
- *
- * Permanent and global — no dispose or ref-counting.
- * Deduplicates by content hash (family + descriptors).
- */
-declare function fontFace(family: string, descriptors: FontFaceDescriptors, options?: {
-  root?: Document | ShadowRoot;
-}): void;
-/**
- * Inject a CSS @counter-style rule.
- *
- * Permanent and global — no dispose or ref-counting.
- * Deduplicates by name (first definition wins).
- */
-declare function counterStyle(name: string, descriptors: CounterStyleDescriptors, options?: {
-  root?: Document | ShadowRoot;
-}): void;
-/**
- * Get CSS text from all sheets (for SSR)
- */
-declare function getCssText(options?: {
-  root?: Document | ShadowRoot;
-}): string;
-/**
- * Collect only CSS used by a rendered subtree (like jest-styled-components).
- * Pass the container returned by render(...).
- */
-declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment, options?: {
-  root?: Document | ShadowRoot;
-}): string;
-/**
- * Force cleanup of unused rules
- */
-declare function cleanup(root?: Document | ShadowRoot): void;
-/**
- * Record a render-time usage hit for one or more classNames.
- * Used internally by computeStyles and tasty() to track usage for GC.
- * When the global touch counter reaches `touchInterval`, schedules GC.
- */
-declare function touch(className: string, options?: {
-  root?: Document | ShadowRoot;
-}): void;
-/**
- * Synchronous garbage collection of unused styles.
- * Evicts the oldest unused styles when usageMap exceeds capacity.
- * With `{ force: true }`, removes ALL unused styles regardless of capacity.
- *
- * @returns Number of styles evicted.
- */
-declare function gc(options?: GCOptions): number;
-/**
- * Check if we're currently running in a test environment
- */
-declare function getIsTestEnvironment(): boolean;
-/**
- * Get the global injector instance for debugging
- */
-declare const injector: {
-  readonly instance: StyleInjector;
-};
-/**
- * Destroy all resources and clean up
- */
-declare function destroy(root?: Document | ShadowRoot): void;
-/**
- * Create a new isolated injector instance
- */
-declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
-//#endregion
-export { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, touch };
-//# sourceMappingURL=index.d.ts.map

package/dist/injector/index.js

@@ -1,185 +0,0 @@
-import "./sheet-manager.js";
-import { StyleInjector } from "./injector.js";
-import { getConfig, getGlobalInjector, isTestEnvironment, markStylesGenerated } from "../config.js";
-//#region src/injector/index.ts
-/**
-* Inject styles and return className with dispose function
-*/
-function inject(rules, options) {
-	const injector = getGlobalInjector();
-	markStylesGenerated();
-	return injector.inject(rules, options);
-}
-/**
-* Inject global rules that should not reserve tasty class names
-*/
-function injectGlobal(rules, options) {
-	return getGlobalInjector().injectGlobal(rules, options);
-}
-/**
-* Inject raw CSS text directly without parsing
-* This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
-* The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
-*
-* @example
-* ```tsx
-* // Inject raw CSS
-* const { dispose } = injectRawCSS(`
-*   body { margin: 0; padding: 0; }
-*   .my-class { color: red; }
-* `);
-*
-* // Later, remove the injected CSS
-* dispose();
-* ```
-*/
-function injectRawCSS(css, options) {
-	return getGlobalInjector().injectRawCSS(css, options);
-}
-/**
-* Get raw CSS text for SSR
-*/
-function getRawCSSText(options) {
-	return getGlobalInjector().getRawCSSText(options);
-}
-/**
-* Inject keyframes and return object with toString() and dispose()
-*/
-function keyframes(steps, nameOrOptions) {
-	return getGlobalInjector().keyframes(steps, nameOrOptions);
-}
-/**
-* Define a CSS @property custom property.
-* This enables advanced features like animating custom properties.
-*
-* Note: @property rules are global and persistent once defined.
-* Re-registering the same property name is a no-op.
-*
-* @param name - The custom property name (must start with --)
-* @param options - Property configuration
-*
-* @example
-* ```ts
-* // Define a color property that can be animated
-* property('--my-color', {
-*   syntax: '<color>',
-*   initialValue: 'red',
-* });
-*
-* // Define an angle property
-* property('--rotation', {
-*   syntax: '<angle>',
-*   inherits: false,
-*   initialValue: '0deg',
-* });
-* ```
-*/
-function property(name, options) {
-	return getGlobalInjector().property(name, options);
-}
-/**
-* Check if a CSS @property has already been defined
-*
-* @param name - The custom property name to check
-* @param options - Options including root
-*/
-function isPropertyDefined(name, options) {
-	return getGlobalInjector().isPropertyDefined(name, options);
-}
-/**
-* Inject a CSS @font-face rule.
-*
-* Permanent and global — no dispose or ref-counting.
-* Deduplicates by content hash (family + descriptors).
-*/
-function fontFace(family, descriptors, options) {
-	return getGlobalInjector().fontFace(family, descriptors, options);
-}
-/**
-* Inject a CSS @counter-style rule.
-*
-* Permanent and global — no dispose or ref-counting.
-* Deduplicates by name (first definition wins).
-*/
-function counterStyle(name, descriptors, options) {
-	return getGlobalInjector().counterStyle(name, descriptors, options);
-}
-/**
-* Get CSS text from all sheets (for SSR)
-*/
-function getCssText(options) {
-	return getGlobalInjector().getCssText(options);
-}
-/**
-* Collect only CSS used by a rendered subtree (like jest-styled-components).
-* Pass the container returned by render(...).
-*/
-function getCssTextForNode(node, options) {
-	const classSet = /* @__PURE__ */ new Set();
-	const readClasses = (el) => {
-		const cls = el.getAttribute("class");
-		if (!cls) return;
-		for (const token of cls.split(/\s+/)) if (/^t[a-z0-9]+$/.test(token)) classSet.add(token);
-	};
-	if (node.getAttribute) readClasses(node);
-	const elements = node.querySelectorAll ? node.querySelectorAll("[class]") : [];
-	if (elements) elements.forEach(readClasses);
-	return getGlobalInjector().getCssTextForClasses(classSet, options);
-}
-/**
-* Force cleanup of unused rules
-*/
-function cleanup(root) {
-	return getGlobalInjector().cleanup(root);
-}
-/**
-* Record a render-time usage hit for one or more classNames.
-* Used internally by computeStyles and tasty() to track usage for GC.
-* When the global touch counter reaches `touchInterval`, schedules GC.
-*/
-function touch(className, options) {
-	if (!getConfig().gc) return;
-	getGlobalInjector().touch(className, options);
-}
-/**
-* Synchronous garbage collection of unused styles.
-* Evicts the oldest unused styles when usageMap exceeds capacity.
-* With `{ force: true }`, removes ALL unused styles regardless of capacity.
-*
-* @returns Number of styles evicted.
-*/
-function gc(options) {
-	return getGlobalInjector().gc(options);
-}
-/**
-* Check if we're currently running in a test environment
-*/
-function getIsTestEnvironment() {
-	return isTestEnvironment();
-}
-/**
-* Get the global injector instance for debugging
-*/
-const injector = { get instance() {
-	return getGlobalInjector();
-} };
-/**
-* Destroy all resources and clean up
-*/
-function destroy(root) {
-	return getGlobalInjector().destroy(root);
-}
-/**
-* Create a new isolated injector instance
-*/
-function createInjector(config = {}) {
-	return new StyleInjector({
-		...getConfig(),
-		forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),
-		...config
-	});
-}
-//#endregion
-export { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, touch };
-
-//# sourceMappingURL=index.js.map

package/dist/injector/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/injector/index.ts"],"sourcesContent":["import {\n  getConfig,\n  getGlobalInjector,\n  isTestEnvironment,\n  markStylesGenerated,\n} from '../config';\nimport type { StyleResult } from '../pipeline';\n\nimport { StyleInjector } from './injector';\nimport type {\n  CounterStyleDescriptors,\n  FontFaceDescriptors,\n  GCOptions,\n  GlobalInjectResult,\n  InjectResult,\n  KeyframesResult,\n  KeyframesSteps,\n  StyleInjectorConfig,\n} from './types';\n\n/**\n * Inject styles and return className with dispose function\n */\nexport function inject(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot; cacheKey?: string },\n): InjectResult {\n  const injector = getGlobalInjector();\n\n  markStylesGenerated();\n\n  return injector.inject(rules, options);\n}\n\n/**\n * Inject global rules that should not reserve tasty class names\n */\nexport function injectGlobal(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot },\n): GlobalInjectResult {\n  return getGlobalInjector().injectGlobal(rules, options);\n}\n\n/**\n * Inject raw CSS text directly without parsing\n * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.\n * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.\n *\n * @example\n * ```tsx\n * // Inject raw CSS\n * const { dispose } = injectRawCSS(`\n *   body { margin: 0; padding: 0; }\n *   .my-class { color: red; }\n * `);\n *\n * // Later, remove the injected CSS\n * dispose();\n * ```\n */\nexport function injectRawCSS(\n  css: string,\n  options?: { root?: Document | ShadowRoot },\n): { dispose: () => void } {\n  return getGlobalInjector().injectRawCSS(css, options);\n}\n\n/**\n * Get raw CSS text for SSR\n */\nexport function getRawCSSText(options?: {\n  root?: Document | ShadowRoot;\n}): string {\n  return getGlobalInjector().getRawCSSText(options);\n}\n\n/**\n * Inject keyframes and return object with toString() and dispose()\n */\nexport function keyframes(\n  steps: KeyframesSteps,\n  nameOrOptions?: string | { root?: Document | ShadowRoot; name?: string },\n): KeyframesResult {\n  return getGlobalInjector().keyframes(steps, nameOrOptions);\n}\n\nexport interface PropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Define a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * Re-registering the same property name is a no-op.\n *\n * @param name - The custom property name (must start with --)\n * @param options - Property configuration\n *\n * @example\n * ```ts\n * // Define a color property that can be animated\n * property('--my-color', {\n *   syntax: '<color>',\n *   initialValue: 'red',\n * });\n *\n * // Define an angle property\n * property('--rotation', {\n *   syntax: '<angle>',\n *   inherits: false,\n *   initialValue: '0deg',\n * });\n * ```\n */\nexport function property(name: string, options?: PropertyOptions): void {\n  return getGlobalInjector().property(name, options);\n}\n\n/**\n * Check if a CSS @property has already been defined\n *\n * @param name - The custom property name to check\n * @param options - Options including root\n */\nexport function isPropertyDefined(\n  name: string,\n  options?: { root?: Document | ShadowRoot },\n): boolean {\n  return getGlobalInjector().isPropertyDefined(name, options);\n}\n\n/**\n * Inject a CSS @font-face rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by content hash (family + descriptors).\n */\nexport function fontFace(\n  family: string,\n  descriptors: FontFaceDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().fontFace(family, descriptors, options);\n}\n\n/**\n * Inject a CSS @counter-style rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by name (first definition wins).\n */\nexport function counterStyle(\n  name: string,\n  descriptors: CounterStyleDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().counterStyle(name, descriptors, options);\n}\n\n/**\n * Get CSS text from all sheets (for SSR)\n */\nexport function getCssText(options?: { root?: Document | ShadowRoot }): string {\n  return getGlobalInjector().getCssText(options);\n}\n\n/**\n * Collect only CSS used by a rendered subtree (like jest-styled-components).\n * Pass the container returned by render(...).\n */\nexport function getCssTextForNode(\n  node: ParentNode | Element | DocumentFragment,\n  options?: { root?: Document | ShadowRoot },\n): string {\n  // Collect tasty-generated class names (t<number>) from the subtree\n  const classSet = new Set<string>();\n\n  const readClasses = (el: Element) => {\n    const cls = el.getAttribute('class');\n    if (!cls) return;\n    for (const token of cls.split(/\\s+/)) {\n      if (/^t[a-z0-9]+$/.test(token)) classSet.add(token);\n    }\n  };\n\n  // Include node itself if it's an Element\n  if ((node as Element).getAttribute) {\n    readClasses(node as Element);\n  }\n  // Walk descendants\n  const elements = (node as ParentNode).querySelectorAll\n    ? (node as ParentNode).querySelectorAll('[class]')\n    : ([] as unknown as NodeListOf<Element>);\n  if (elements) elements.forEach(readClasses);\n\n  return getGlobalInjector().getCssTextForClasses(classSet, options);\n}\n\n/**\n * Force cleanup of unused rules\n */\nexport function cleanup(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().cleanup(root);\n}\n\n/**\n * Record a render-time usage hit for one or more classNames.\n * Used internally by computeStyles and tasty() to track usage for GC.\n * When the global touch counter reaches `touchInterval`, schedules GC.\n */\nexport function touch(\n  className: string,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  if (!getConfig().gc) return;\n  getGlobalInjector().touch(className, options);\n}\n\n/**\n * Synchronous garbage collection of unused styles.\n * Evicts the oldest unused styles when usageMap exceeds capacity.\n * With `{ force: true }`, removes ALL unused styles regardless of capacity.\n *\n * @returns Number of styles evicted.\n */\nexport function gc(options?: GCOptions): number {\n  return getGlobalInjector().gc(options);\n}\n\n/**\n * Check if we're currently running in a test environment\n */\nexport function getIsTestEnvironment(): boolean {\n  return isTestEnvironment();\n}\n\n/**\n * Get the global injector instance for debugging\n */\nexport const injector = {\n  get instance() {\n    return getGlobalInjector();\n  },\n};\n\n/**\n * Destroy all resources and clean up\n */\nexport function destroy(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().destroy(root);\n}\n\n/**\n * Create a new isolated injector instance\n */\nexport function createInjector(\n  config: Partial<StyleInjectorConfig> = {},\n): StyleInjector {\n  const defaultConfig = getConfig();\n\n  const fullConfig: StyleInjectorConfig = {\n    ...defaultConfig,\n    // Auto-enable forceTextInjection in test environments\n    forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),\n    ...config,\n  };\n\n  return new StyleInjector(fullConfig);\n}\n\n// Re-export types\nexport type {\n  StyleInjectorConfig,\n  InjectResult,\n  DisposeFunction,\n  RuleInfo,\n  SheetInfo,\n  RootRegistry,\n  StyleRule,\n  KeyframesInfo,\n  KeyframesResult,\n  KeyframesSteps,\n  KeyframesCacheEntry,\n  CacheMetrics,\n  RawCSSResult,\n  PropertyDefinition,\n  FontFaceDescriptors,\n  FontFaceInput,\n  CounterStyleDescriptors,\n  StyleUsage,\n  GCConfig,\n  GCOptions,\n} from './types';\n\nexport { StyleInjector } from './injector';\nexport { SheetManager } from './sheet-manager';\n"],"mappings":";;;;;;;AAuBA,SAAgB,OACd,OACA,SACc;CACd,MAAM,WAAW,mBAAmB;AAEpC,sBAAqB;AAErB,QAAO,SAAS,OAAO,OAAO,QAAQ;;;;;AAMxC,SAAgB,aACd,OACA,SACoB;AACpB,QAAO,mBAAmB,CAAC,aAAa,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;AAoBzD,SAAgB,aACd,KACA,SACyB;AACzB,QAAO,mBAAmB,CAAC,aAAa,KAAK,QAAQ;;;;;AAMvD,SAAgB,cAAc,SAEnB;AACT,QAAO,mBAAmB,CAAC,cAAc,QAAQ;;;;;AAMnD,SAAgB,UACd,OACA,eACiB;AACjB,QAAO,mBAAmB,CAAC,UAAU,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkD5D,SAAgB,SAAS,MAAc,SAAiC;AACtE,QAAO,mBAAmB,CAAC,SAAS,MAAM,QAAQ;;;;;;;;AASpD,SAAgB,kBACd,MACA,SACS;AACT,QAAO,mBAAmB,CAAC,kBAAkB,MAAM,QAAQ;;;;;;;;AAS7D,SAAgB,SACd,QACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,SAAS,QAAQ,aAAa,QAAQ;;;;;;;;AASnE,SAAgB,aACd,MACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,aAAa,MAAM,aAAa,QAAQ;;;;;AAMrE,SAAgB,WAAW,SAAoD;AAC7E,QAAO,mBAAmB,CAAC,WAAW,QAAQ;;;;;;AAOhD,SAAgB,kBACd,MACA,SACQ;CAER,MAAM,2BAAW,IAAI,KAAa;CAElC,MAAM,eAAe,OAAgB;EACnC,MAAM,MAAM,GAAG,aAAa,QAAQ;AACpC,MAAI,CAAC,IAAK;AACV,OAAK,MAAM,SAAS,IAAI,MAAM,MAAM,CAClC,KAAI,eAAe,KAAK,MAAM,CAAE,UAAS,IAAI,MAAM;;AAKvD,KAAK,KAAiB,aACpB,aAAY,KAAgB;CAG9B,MAAM,WAAY,KAAoB,mBACjC,KAAoB,iBAAiB,UAAU,GAC/C,EAAE;AACP,KAAI,SAAU,UAAS,QAAQ,YAAY;AAE3C,QAAO,mBAAmB,CAAC,qBAAqB,UAAU,QAAQ;;;;;AAMpE,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;;;AAQ1C,SAAgB,MACd,WACA,SACM;AACN,KAAI,CAAC,WAAW,CAAC,GAAI;AACrB,oBAAmB,CAAC,MAAM,WAAW,QAAQ;;;;;;;;;AAU/C,SAAgB,GAAG,SAA6B;AAC9C,QAAO,mBAAmB,CAAC,GAAG,QAAQ;;;;;AAMxC,SAAgB,uBAAgC;AAC9C,QAAO,mBAAmB;;;;;AAM5B,MAAa,WAAW,EACtB,IAAI,WAAW;AACb,QAAO,mBAAmB;GAE7B;;;;AAKD,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,eACd,SAAuC,EAAE,EAC1B;AAUf,QAAO,IAAI,cAP6B;EACtC,GAHoB,WAAW;EAK/B,oBAAoB,OAAO,sBAAsB,mBAAmB;EACpE,GAAG;EACJ,CAEmC"}