@tenphi/tasty 1.1.0 → 1.3.0

package/dist/utils/process-tokens.d.ts

@@ -12,10 +12,6 @@ import { Tokens } from "../types.js";
  * @returns CSSProperties object or undefined if no tokens to process
  */
 declare function processTokens(tokens: Tokens | undefined): CSSProperties | undefined;
-/**
- * Stringify tokens for memoization key.
- */
-declare function stringifyTokens(tokens: Tokens | undefined): string;
 //#endregion
-export { processTokens, stringifyTokens };
+export { processTokens };
 //# sourceMappingURL=process-tokens.d.ts.map

package/dist/utils/process-tokens.js

@@ -1,7 +1,6 @@
-import { hslToRgbValues } from "./color-math.js";
+import "./color-math.js";
 import { getColorSpaceComponents, getColorSpaceSuffix } from "./color-space.js";
 import { normalizeColorTokenValue, parseStyle } from "./styles.js";
-
 //#region src/utils/process-tokens.ts
 /**
 * Extract color components in the configured color space.
@@ -78,14 +77,7 @@ function processTokens(tokens) {
 	}
 	return result;
 }
-/**
-* Stringify tokens for memoization key.
-*/
-function stringifyTokens(tokens) {
-	if (!tokens) return "";
-	return JSON.stringify(tokens);
-}
-
 //#endregion
-export { processTokens, stringifyTokens };
+export { processTokens };
+
 //# sourceMappingURL=process-tokens.js.map

package/dist/utils/process-tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"process-tokens.js","names":[],"sources":["../../src/utils/process-tokens.ts"],"sourcesContent":["import type { Tokens, TokenValue } from '../types';\n\nimport type { CSSProperties } from './css-types';\n\nimport { getColorSpaceComponents, getColorSpaceSuffix } from './color-space';\nimport { normalizeColorTokenValue, parseStyle } from './styles';\n\nexport { hslToRgbValues } from './color-math';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Extract color components in the configured color space.\n * Returns a CSS variable reference for token colors, or decomposed\n * components as a space-separated string.\n */\nfunction extractColorSpaceValue(\n  colorValue: string,\n  parsedOutput: string,\n): string {\n  const suffix = getColorSpaceSuffix();\n\n  // If the parsed output references a color variable, use the companion variant\n  const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n  if (varMatch) {\n    return `var(--${varMatch[1]}-color-${suffix})`;\n  }\n\n  // Try the original color value first, then parsed output\n  const components = getColorSpaceComponents(colorValue);\n  if (components !== colorValue) return components;\n\n  const componentsFromParsed = getColorSpaceComponents(parsedOutput);\n  if (componentsFromParsed !== parsedOutput) return componentsFromParsed;\n\n  // Fallback: return the parsed output\n  return parsedOutput;\n}\n\n/**\n * Check if a value is a valid token value (string, number, or boolean - not object).\n * Returns false for `false` values (they mean \"skip this token\").\n */\nfunction isValidTokenValue(\n  value: unknown,\n): value is Exclude<TokenValue, undefined | null | false> {\n  if (value === undefined || value === null || value === false) {\n    return false;\n  }\n\n  if (typeof value === 'object') {\n    if (devMode) {\n      console.warn(\n        'Tasty: Object values are not allowed in tokens prop. ' +\n          'Tokens do not support state-based styling. Use a primitive value instead.',\n      );\n    }\n    return false;\n  }\n\n  return (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    typeof value === 'boolean'\n  );\n}\n\n/**\n * Process a single token value through the tasty parser.\n * Numbers are converted to strings; 0 stays as \"0\".\n */\nfunction processTokenValue(value: string | number): string {\n  if (typeof value === 'number') {\n    // 0 should remain as \"0\", not converted to any unit\n    if (value === 0) {\n      return '0';\n    }\n    return parseStyle(String(value)).output;\n  }\n  return parseStyle(value).output;\n}\n\n/**\n * Process tokens object into inline style properties.\n * - $name -> --name with parsed value\n * - #name -> --name-color AND --name-color-{colorSpace} with parsed values\n *\n * @param tokens - The tokens object to process\n * @returns CSSProperties object or undefined if no tokens to process\n */\nexport function processTokens(\n  tokens: Tokens | undefined,\n): CSSProperties | undefined {\n  if (!tokens) {\n    return undefined;\n  }\n\n  const keys = Object.keys(tokens);\n  if (keys.length === 0) {\n    return undefined;\n  }\n\n  let result: Record<string, string> | undefined;\n\n  for (const key of keys) {\n    const value = tokens[key as keyof Tokens];\n\n    // Skip undefined/null values\n    if (!isValidTokenValue(value)) {\n      continue;\n    }\n\n    if (key.startsWith('$')) {\n      // Custom property token: $name -> --name\n      const propName = `--${key.slice(1)}`;\n      // Boolean true for custom properties converts to empty string (valid CSS value)\n      const effectiveValue = value === true ? '' : value;\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[propName] = processedValue;\n    } else if (key.startsWith('#')) {\n      const colorName = key.slice(1);\n      const suffix = getColorSpaceSuffix();\n\n      // Normalize color token value (true → 'transparent', false is already filtered by isValidTokenValue)\n      const effectiveValue = normalizeColorTokenValue(value);\n      // Skip if normalized to null (shouldn't happen since false is filtered by isValidTokenValue)\n      if (effectiveValue === null) continue;\n\n      const originalValue =\n        typeof effectiveValue === 'number'\n          ? String(effectiveValue)\n          : effectiveValue;\n      const lowerValue = originalValue.toLowerCase();\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[`--${colorName}-color`] = processedValue;\n\n      // Skip component generation for #current values (currentcolor is dynamic, cannot decompose)\n      if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n        continue;\n      }\n\n      result[`--${colorName}-color-${suffix}`] = extractColorSpaceValue(\n        originalValue,\n        processedValue,\n      );\n    }\n  }\n\n  return result as CSSProperties | undefined;\n}\n\n/**\n * Stringify tokens for memoization key.\n */\nexport function stringifyTokens(tokens: Tokens | undefined): string {\n  if (!tokens) return '';\n  return JSON.stringify(tokens);\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAS,uBACP,YACA,cACQ;CACR,MAAM,SAAS,qBAAqB;CAGpC,MAAM,WAAW,aAAa,MAAM,8BAA8B;AAClE,KAAI,SACF,QAAO,SAAS,SAAS,GAAG,SAAS,OAAO;CAI9C,MAAM,aAAa,wBAAwB,WAAW;AACtD,KAAI,eAAe,WAAY,QAAO;CAEtC,MAAM,uBAAuB,wBAAwB,aAAa;AAClE,KAAI,yBAAyB,aAAc,QAAO;AAGlD,QAAO;;;;;;AAOT,SAAS,kBACP,OACwD;AACxD,KAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,MACrD,QAAO;AAGT,KAAI,OAAO,UAAU,UAAU;AAE3B,UAAQ,KACN,iIAED;AAEH,SAAO;;AAGT,QACE,OAAO,UAAU,YACjB,OAAO,UAAU,YACjB,OAAO,UAAU;;;;;;AAQrB,SAAS,kBAAkB,OAAgC;AACzD,KAAI,OAAO,UAAU,UAAU;AAE7B,MAAI,UAAU,EACZ,QAAO;AAET,SAAO,WAAW,OAAO,MAAM,CAAC,CAAC;;AAEnC,QAAO,WAAW,MAAM,CAAC;;;;;;;;;;AAW3B,SAAgB,cACd,QAC2B;AAC3B,KAAI,CAAC,OACH;CAGF,MAAM,OAAO,OAAO,KAAK,OAAO;AAChC,KAAI,KAAK,WAAW,EAClB;CAGF,IAAI;AAEJ,MAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,OAAO;AAGrB,MAAI,CAAC,kBAAkB,MAAM,CAC3B;AAGF,MAAI,IAAI,WAAW,IAAI,EAAE;GAEvB,MAAM,WAAW,KAAK,IAAI,MAAM,EAAE;GAGlC,MAAM,iBAAiB,kBADA,UAAU,OAAO,KAAK,MACW;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,YAAY;aACV,IAAI,WAAW,IAAI,EAAE;GAC9B,MAAM,YAAY,IAAI,MAAM,EAAE;GAC9B,MAAM,SAAS,qBAAqB;GAGpC,MAAM,iBAAiB,yBAAyB,MAAM;AAEtD,OAAI,mBAAmB,KAAM;GAE7B,MAAM,gBACJ,OAAO,mBAAmB,WACtB,OAAO,eAAe,GACtB;GACN,MAAM,aAAa,cAAc,aAAa;GAC9C,MAAM,iBAAiB,kBAAkB,eAAe;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,KAAK,UAAU,WAAW;AAGjC,OAAI,qBAAqB,KAAK,WAAW,CACvC;AAGF,UAAO,KAAK,UAAU,SAAS,YAAY,uBACzC,eACA,eACD;;;AAIL,QAAO;;;;;AAMT,SAAgB,gBAAgB,QAAoC;AAClE,KAAI,CAAC,OAAQ,QAAO;AACpB,QAAO,KAAK,UAAU,OAAO"}
+{"version":3,"file":"process-tokens.js","names":[],"sources":["../../src/utils/process-tokens.ts"],"sourcesContent":["import type { Tokens, TokenValue } from '../types';\n\nimport type { CSSProperties } from './css-types';\n\nimport { getColorSpaceComponents, getColorSpaceSuffix } from './color-space';\nimport { normalizeColorTokenValue, parseStyle } from './styles';\n\nexport { hslToRgbValues } from './color-math';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Extract color components in the configured color space.\n * Returns a CSS variable reference for token colors, or decomposed\n * components as a space-separated string.\n */\nfunction extractColorSpaceValue(\n  colorValue: string,\n  parsedOutput: string,\n): string {\n  const suffix = getColorSpaceSuffix();\n\n  // If the parsed output references a color variable, use the companion variant\n  const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n  if (varMatch) {\n    return `var(--${varMatch[1]}-color-${suffix})`;\n  }\n\n  // Try the original color value first, then parsed output\n  const components = getColorSpaceComponents(colorValue);\n  if (components !== colorValue) return components;\n\n  const componentsFromParsed = getColorSpaceComponents(parsedOutput);\n  if (componentsFromParsed !== parsedOutput) return componentsFromParsed;\n\n  // Fallback: return the parsed output\n  return parsedOutput;\n}\n\n/**\n * Check if a value is a valid token value (string, number, or boolean - not object).\n * Returns false for `false` values (they mean \"skip this token\").\n */\nfunction isValidTokenValue(\n  value: unknown,\n): value is Exclude<TokenValue, undefined | null | false> {\n  if (value === undefined || value === null || value === false) {\n    return false;\n  }\n\n  if (typeof value === 'object') {\n    if (devMode) {\n      console.warn(\n        'Tasty: Object values are not allowed in tokens prop. ' +\n          'Tokens do not support state-based styling. Use a primitive value instead.',\n      );\n    }\n    return false;\n  }\n\n  return (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    typeof value === 'boolean'\n  );\n}\n\n/**\n * Process a single token value through the tasty parser.\n * Numbers are converted to strings; 0 stays as \"0\".\n */\nfunction processTokenValue(value: string | number): string {\n  if (typeof value === 'number') {\n    // 0 should remain as \"0\", not converted to any unit\n    if (value === 0) {\n      return '0';\n    }\n    return parseStyle(String(value)).output;\n  }\n  return parseStyle(value).output;\n}\n\n/**\n * Process tokens object into inline style properties.\n * - $name -> --name with parsed value\n * - #name -> --name-color AND --name-color-{colorSpace} with parsed values\n *\n * @param tokens - The tokens object to process\n * @returns CSSProperties object or undefined if no tokens to process\n */\nexport function processTokens(\n  tokens: Tokens | undefined,\n): CSSProperties | undefined {\n  if (!tokens) {\n    return undefined;\n  }\n\n  const keys = Object.keys(tokens);\n  if (keys.length === 0) {\n    return undefined;\n  }\n\n  let result: Record<string, string> | undefined;\n\n  for (const key of keys) {\n    const value = tokens[key as keyof Tokens];\n\n    // Skip undefined/null values\n    if (!isValidTokenValue(value)) {\n      continue;\n    }\n\n    if (key.startsWith('$')) {\n      // Custom property token: $name -> --name\n      const propName = `--${key.slice(1)}`;\n      // Boolean true for custom properties converts to empty string (valid CSS value)\n      const effectiveValue = value === true ? '' : value;\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[propName] = processedValue;\n    } else if (key.startsWith('#')) {\n      const colorName = key.slice(1);\n      const suffix = getColorSpaceSuffix();\n\n      // Normalize color token value (true → 'transparent', false is already filtered by isValidTokenValue)\n      const effectiveValue = normalizeColorTokenValue(value);\n      // Skip if normalized to null (shouldn't happen since false is filtered by isValidTokenValue)\n      if (effectiveValue === null) continue;\n\n      const originalValue =\n        typeof effectiveValue === 'number'\n          ? String(effectiveValue)\n          : effectiveValue;\n      const lowerValue = originalValue.toLowerCase();\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[`--${colorName}-color`] = processedValue;\n\n      // Skip component generation for #current values (currentcolor is dynamic, cannot decompose)\n      if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n        continue;\n      }\n\n      result[`--${colorName}-color-${suffix}`] = extractColorSpaceValue(\n        originalValue,\n        processedValue,\n      );\n    }\n  }\n\n  return result as CSSProperties | undefined;\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAS,uBACP,YACA,cACQ;CACR,MAAM,SAAS,qBAAqB;CAGpC,MAAM,WAAW,aAAa,MAAM,8BAA8B;AAClE,KAAI,SACF,QAAO,SAAS,SAAS,GAAG,SAAS,OAAO;CAI9C,MAAM,aAAa,wBAAwB,WAAW;AACtD,KAAI,eAAe,WAAY,QAAO;CAEtC,MAAM,uBAAuB,wBAAwB,aAAa;AAClE,KAAI,yBAAyB,aAAc,QAAO;AAGlD,QAAO;;;;;;AAOT,SAAS,kBACP,OACwD;AACxD,KAAI,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,MACrD,QAAO;AAGT,KAAI,OAAO,UAAU,UAAU;AAE3B,UAAQ,KACN,iIAED;AAEH,SAAO;;AAGT,QACE,OAAO,UAAU,YACjB,OAAO,UAAU,YACjB,OAAO,UAAU;;;;;;AAQrB,SAAS,kBAAkB,OAAgC;AACzD,KAAI,OAAO,UAAU,UAAU;AAE7B,MAAI,UAAU,EACZ,QAAO;AAET,SAAO,WAAW,OAAO,MAAM,CAAC,CAAC;;AAEnC,QAAO,WAAW,MAAM,CAAC;;;;;;;;;;AAW3B,SAAgB,cACd,QAC2B;AAC3B,KAAI,CAAC,OACH;CAGF,MAAM,OAAO,OAAO,KAAK,OAAO;AAChC,KAAI,KAAK,WAAW,EAClB;CAGF,IAAI;AAEJ,MAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,OAAO;AAGrB,MAAI,CAAC,kBAAkB,MAAM,CAC3B;AAGF,MAAI,IAAI,WAAW,IAAI,EAAE;GAEvB,MAAM,WAAW,KAAK,IAAI,MAAM,EAAE;GAGlC,MAAM,iBAAiB,kBADA,UAAU,OAAO,KAAK,MACW;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,YAAY;aACV,IAAI,WAAW,IAAI,EAAE;GAC9B,MAAM,YAAY,IAAI,MAAM,EAAE;GAC9B,MAAM,SAAS,qBAAqB;GAGpC,MAAM,iBAAiB,yBAAyB,MAAM;AAEtD,OAAI,mBAAmB,KAAM;GAE7B,MAAM,gBACJ,OAAO,mBAAmB,WACtB,OAAO,eAAe,GACtB;GACN,MAAM,aAAa,cAAc,aAAa;GAC9C,MAAM,iBAAiB,kBAAkB,eAAe;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,KAAK,UAAU,WAAW;AAGjC,OAAI,qBAAqB,KAAK,WAAW,CACvC;AAGF,UAAO,KAAK,UAAU,SAAS,YAAY,uBACzC,eACA,eACD;;;AAIL,QAAO"}

package/dist/utils/resolve-recipes.js

@@ -2,7 +2,6 @@ import { isDevEnv } from "./is-dev-env.js";
 import { isSelector } from "../pipeline/index.js";
 import { getGlobalRecipes } from "../config.js";
 import { mergeStyles } from "./merge-styles.js";
-
 //#region src/utils/resolve-recipes.ts
 /**
 * Recipe resolution utility.
@@ -141,7 +140,7 @@ function resolveRecipes(styles) {
 	}
 	return changed ? result : styles;
 }
-
 //#endregion
 export { resolveRecipes };
+
 //# sourceMappingURL=resolve-recipes.js.map

package/dist/utils/resolve-recipes.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolve-recipes.js","names":[],"sources":["../../src/utils/resolve-recipes.ts"],"sourcesContent":["/**\n * Recipe resolution utility.\n *\n * Resolves `recipe` style properties by looking up predefined recipe styles\n * from global configuration and merging them with the component's own styles.\n *\n * Resolution order per level (top-level and each sub-element independently):\n * base_recipe_1 base_recipe_2 → component styles → post_recipe_1 post_recipe_2\n *\n * The `/` separator splits base recipes (before component styles)\n * from post recipes (after component styles). All merges use mergeStyles\n * semantics: primitives and state maps with '' key fully replace;\n * state maps without '' key extend the existing value.\n *\n * Returns the same object reference if no recipes are present (zero overhead).\n */\n\nimport { getGlobalRecipes } from '../config';\nimport { isSelector } from '../pipeline';\nimport type { RecipeStyles, Styles } from '../styles/types';\n\nimport { isDevEnv } from './is-dev-env';\nimport { mergeStyles } from './merge-styles';\n\nconst devMode = isDevEnv();\n\ninterface ParsedRecipeGroups {\n  base: string[] | null;\n  post: string[] | null;\n}\n\n/**\n * Parse a recipe string into base and post recipe name groups.\n *\n * Syntax: `'base1 base2 / post1 post2'`\n * - Names are space-separated within each group\n * - `/` separates base (before component) from post (after component) groups\n * - `/` is optional; if absent, all names are base\n * - `none` as the sole base value means \"no base recipes\"\n *\n * Returns `{ base: null, post: null }` if the string is empty or invalid.\n */\nfunction parseRecipeNames(value: unknown): ParsedRecipeGroups {\n  const empty: ParsedRecipeGroups = { base: null, post: null };\n\n  if (typeof value !== 'string') return empty;\n  const trimmed = value.trim();\n  if (trimmed === '') return empty;\n\n  const slashIndex = trimmed.indexOf('/');\n\n  if (slashIndex === -1) {\n    if (trimmed === 'none') return empty;\n    const names = splitNames(trimmed);\n    return { base: names, post: null };\n  }\n\n  const basePart = trimmed.slice(0, slashIndex);\n  const postPart = trimmed.slice(slashIndex + 1);\n\n  return {\n    base: basePart.trim() === 'none' ? null : splitNames(basePart),\n    post: splitNames(postPart),\n  };\n}\n\nfunction splitNames(s: string): string[] | null {\n  const names = s.split(/\\s+/).filter(Boolean);\n  return names.length > 0 ? names : null;\n}\n\n/**\n * Collect merged styles for a list of recipe names.\n * Each recipe is flat-spread on top of the previous.\n */\nfunction collectRecipeStyles(\n  names: string[],\n  recipes: Record<string, RecipeStyles>,\n): Record<string, unknown> {\n  let merged: Record<string, unknown> = {};\n\n  for (const name of names) {\n    const recipeStyles = recipes[name];\n\n    if (!recipeStyles) {\n      if (devMode) {\n        console.warn(\n          `[Tasty] Recipe \"${name}\" not found. ` +\n            `Make sure it is defined in configure({ recipes: { ... } }).`,\n        );\n      }\n      continue;\n    }\n\n    merged = { ...merged, ...(recipeStyles as Record<string, unknown>) };\n  }\n\n  return merged;\n}\n\n/**\n * Resolve recipe references in a flat styles object (no sub-elements).\n * Returns null if no `recipe` key is present.\n *\n * Resolution: base recipes → component styles → post recipes (all via mergeStyles)\n */\nfunction resolveRecipesForLevel(\n  styles: Record<string, unknown>,\n  recipes: Record<string, RecipeStyles>,\n): Record<string, unknown> | null {\n  if (!('recipe' in styles)) return null;\n\n  const { base, post } = parseRecipeNames(styles.recipe);\n\n  // Separate selector keys (sub-elements) from flat style properties.\n  // mergeStyles handles selectors with its own semantics (e.g. false = delete),\n  // but at this level we only want recipe merging on flat properties.\n\n  const { recipe: _recipe, ...allRest } = styles;\n  const flatStyles: Record<string, unknown> = {};\n  const selectorStyles: Record<string, unknown> = {};\n\n  for (const key of Object.keys(allRest)) {\n    if (isSelector(key)) {\n      selectorStyles[key] = allRest[key];\n    } else {\n      flatStyles[key] = allRest[key];\n    }\n  }\n\n  if (!base && !post) {\n    return allRest;\n  }\n\n  // 1. Merge base recipes, then component styles on top (via mergeStyles)\n  let result: Record<string, unknown>;\n\n  if (base) {\n    const baseStyles = collectRecipeStyles(base, recipes);\n    result = mergeStyles(baseStyles as Styles, flatStyles as Styles) as Record<\n      string,\n      unknown\n    >;\n  } else {\n    result = { ...flatStyles };\n  }\n\n  // 2. Apply post recipes via mergeStyles (state map extend semantics)\n  if (post) {\n    const postStyles = collectRecipeStyles(post, recipes);\n    result = mergeStyles(result as Styles, postStyles as Styles) as Record<\n      string,\n      unknown\n    >;\n  }\n\n  // Re-attach selector keys unchanged\n  for (const key of Object.keys(selectorStyles)) {\n    result[key] = selectorStyles[key];\n  }\n\n  return result;\n}\n\n/**\n * Resolve all `recipe` style properties in a styles object.\n *\n * Handles both top-level and sub-element recipe references.\n * Returns the same object reference if no recipes are present anywhere\n * (zero overhead for the common case).\n *\n * @param styles - The styles object potentially containing `recipe` keys\n * @returns Resolved styles with recipe values merged in, or the original object if unchanged\n */\nexport function resolveRecipes(styles: Styles): Styles {\n  const recipes = getGlobalRecipes();\n\n  // Fast path: no recipes configured globally\n  if (!recipes) return styles;\n\n  let changed = false;\n\n  // Resolve top-level recipe\n  const topResolved = resolveRecipesForLevel(\n    styles as Record<string, unknown>,\n    recipes,\n  );\n\n  let result: Record<string, unknown>;\n\n  if (topResolved) {\n    changed = true;\n    result = topResolved;\n  } else {\n    // Keep reference; a shallow copy is deferred until a sub-element actually changes\n    result = styles as Record<string, unknown>;\n  }\n\n  // Resolve sub-element recipes\n  const keys = Object.keys(result);\n\n  for (const key of keys) {\n    if (!isSelector(key)) continue;\n\n    const subStyles = result[key];\n\n    if (\n      !subStyles ||\n      typeof subStyles !== 'object' ||\n      Array.isArray(subStyles)\n    ) {\n      continue;\n    }\n\n    const subRecord = subStyles as Record<string, unknown>;\n\n    if (!('recipe' in subRecord)) continue;\n\n    const subResolved = resolveRecipesForLevel(subRecord, recipes);\n\n    if (subResolved) {\n      if (!changed) {\n        // First change in sub-elements -- need to shallow-copy the top level\n        changed = true;\n        result = { ...(styles as Record<string, unknown>) };\n      }\n      result[key] = subResolved;\n    }\n  }\n\n  return changed ? (result as Styles) : styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,UAAU;;;;;;;;;;;;AAkB1B,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,QAA4B;EAAE,MAAM;EAAM,MAAM;EAAM;AAE5D,KAAI,OAAO,UAAU,SAAU,QAAO;CACtC,MAAM,UAAU,MAAM,MAAM;AAC5B,KAAI,YAAY,GAAI,QAAO;CAE3B,MAAM,aAAa,QAAQ,QAAQ,IAAI;AAEvC,KAAI,eAAe,IAAI;AACrB,MAAI,YAAY,OAAQ,QAAO;AAE/B,SAAO;GAAE,MADK,WAAW,QAAQ;GACX,MAAM;GAAM;;CAGpC,MAAM,WAAW,QAAQ,MAAM,GAAG,WAAW;CAC7C,MAAM,WAAW,QAAQ,MAAM,aAAa,EAAE;AAE9C,QAAO;EACL,MAAM,SAAS,MAAM,KAAK,SAAS,OAAO,WAAW,SAAS;EAC9D,MAAM,WAAW,SAAS;EAC3B;;AAGH,SAAS,WAAW,GAA4B;CAC9C,MAAM,QAAQ,EAAE,MAAM,MAAM,CAAC,OAAO,QAAQ;AAC5C,QAAO,MAAM,SAAS,IAAI,QAAQ;;;;;;AAOpC,SAAS,oBACP,OACA,SACyB;CACzB,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,eAAe,QAAQ;AAE7B,MAAI,CAAC,cAAc;AACjB,OAAI,QACF,SAAQ,KACN,mBAAmB,KAAK,0EAEzB;AAEH;;AAGF,WAAS;GAAE,GAAG;GAAQ,GAAI;GAA0C;;AAGtE,QAAO;;;;;;;;AAST,SAAS,uBACP,QACA,SACgC;AAChC,KAAI,EAAE,YAAY,QAAS,QAAO;CAElC,MAAM,EAAE,MAAM,SAAS,iBAAiB,OAAO,OAAO;CAMtD,MAAM,EAAE,QAAQ,SAAS,GAAG,YAAY;CACxC,MAAM,aAAsC,EAAE;CAC9C,MAAM,iBAA0C,EAAE;AAElD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,KAAI,WAAW,IAAI,CACjB,gBAAe,OAAO,QAAQ;KAE9B,YAAW,OAAO,QAAQ;AAI9B,KAAI,CAAC,QAAQ,CAAC,KACZ,QAAO;CAIT,IAAI;AAEJ,KAAI,KAEF,UAAS,YADU,oBAAoB,MAAM,QAAQ,EACV,WAAqB;KAKhE,UAAS,EAAE,GAAG,YAAY;AAI5B,KAAI,MAAM;EACR,MAAM,aAAa,oBAAoB,MAAM,QAAQ;AACrD,WAAS,YAAY,QAAkB,WAAqB;;AAO9D,MAAK,MAAM,OAAO,OAAO,KAAK,eAAe,CAC3C,QAAO,OAAO,eAAe;AAG/B,QAAO;;;;;;;;;;;;AAaT,SAAgB,eAAe,QAAwB;CACrD,MAAM,UAAU,kBAAkB;AAGlC,KAAI,CAAC,QAAS,QAAO;CAErB,IAAI,UAAU;CAGd,MAAM,cAAc,uBAClB,QACA,QACD;CAED,IAAI;AAEJ,KAAI,aAAa;AACf,YAAU;AACV,WAAS;OAGT,UAAS;CAIX,MAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAK,MAAM,OAAO,MAAM;AACtB,MAAI,CAAC,WAAW,IAAI,CAAE;EAEtB,MAAM,YAAY,OAAO;AAEzB,MACE,CAAC,aACD,OAAO,cAAc,YACrB,MAAM,QAAQ,UAAU,CAExB;EAGF,MAAM,YAAY;AAElB,MAAI,EAAE,YAAY,WAAY;EAE9B,MAAM,cAAc,uBAAuB,WAAW,QAAQ;AAE9D,MAAI,aAAa;AACf,OAAI,CAAC,SAAS;AAEZ,cAAU;AACV,aAAS,EAAE,GAAI,QAAoC;;AAErD,UAAO,OAAO;;;AAIlB,QAAO,UAAW,SAAoB"}
+{"version":3,"file":"resolve-recipes.js","names":[],"sources":["../../src/utils/resolve-recipes.ts"],"sourcesContent":["/**\n * Recipe resolution utility.\n *\n * Resolves `recipe` style properties by looking up predefined recipe styles\n * from global configuration and merging them with the component's own styles.\n *\n * Resolution order per level (top-level and each sub-element independently):\n * base_recipe_1 base_recipe_2 → component styles → post_recipe_1 post_recipe_2\n *\n * The `/` separator splits base recipes (before component styles)\n * from post recipes (after component styles). All merges use mergeStyles\n * semantics: primitives and state maps with '' key fully replace;\n * state maps without '' key extend the existing value.\n *\n * Returns the same object reference if no recipes are present (zero overhead).\n */\n\nimport { getGlobalRecipes } from '../config';\nimport { isSelector } from '../pipeline';\nimport type { RecipeStyles, Styles } from '../styles/types';\n\nimport { isDevEnv } from './is-dev-env';\nimport { mergeStyles } from './merge-styles';\n\nconst devMode = isDevEnv();\n\ninterface ParsedRecipeGroups {\n  base: string[] | null;\n  post: string[] | null;\n}\n\n/**\n * Parse a recipe string into base and post recipe name groups.\n *\n * Syntax: `'base1 base2 / post1 post2'`\n * - Names are space-separated within each group\n * - `/` separates base (before component) from post (after component) groups\n * - `/` is optional; if absent, all names are base\n * - `none` as the sole base value means \"no base recipes\"\n *\n * Returns `{ base: null, post: null }` if the string is empty or invalid.\n */\nfunction parseRecipeNames(value: unknown): ParsedRecipeGroups {\n  const empty: ParsedRecipeGroups = { base: null, post: null };\n\n  if (typeof value !== 'string') return empty;\n  const trimmed = value.trim();\n  if (trimmed === '') return empty;\n\n  const slashIndex = trimmed.indexOf('/');\n\n  if (slashIndex === -1) {\n    if (trimmed === 'none') return empty;\n    const names = splitNames(trimmed);\n    return { base: names, post: null };\n  }\n\n  const basePart = trimmed.slice(0, slashIndex);\n  const postPart = trimmed.slice(slashIndex + 1);\n\n  return {\n    base: basePart.trim() === 'none' ? null : splitNames(basePart),\n    post: splitNames(postPart),\n  };\n}\n\nfunction splitNames(s: string): string[] | null {\n  const names = s.split(/\\s+/).filter(Boolean);\n  return names.length > 0 ? names : null;\n}\n\n/**\n * Collect merged styles for a list of recipe names.\n * Each recipe is flat-spread on top of the previous.\n */\nfunction collectRecipeStyles(\n  names: string[],\n  recipes: Record<string, RecipeStyles>,\n): Record<string, unknown> {\n  let merged: Record<string, unknown> = {};\n\n  for (const name of names) {\n    const recipeStyles = recipes[name];\n\n    if (!recipeStyles) {\n      if (devMode) {\n        console.warn(\n          `[Tasty] Recipe \"${name}\" not found. ` +\n            `Make sure it is defined in configure({ recipes: { ... } }).`,\n        );\n      }\n      continue;\n    }\n\n    merged = { ...merged, ...(recipeStyles as Record<string, unknown>) };\n  }\n\n  return merged;\n}\n\n/**\n * Resolve recipe references in a flat styles object (no sub-elements).\n * Returns null if no `recipe` key is present.\n *\n * Resolution: base recipes → component styles → post recipes (all via mergeStyles)\n */\nfunction resolveRecipesForLevel(\n  styles: Record<string, unknown>,\n  recipes: Record<string, RecipeStyles>,\n): Record<string, unknown> | null {\n  if (!('recipe' in styles)) return null;\n\n  const { base, post } = parseRecipeNames(styles.recipe);\n\n  // Separate selector keys (sub-elements) from flat style properties.\n  // mergeStyles handles selectors with its own semantics (e.g. false = delete),\n  // but at this level we only want recipe merging on flat properties.\n\n  const { recipe: _recipe, ...allRest } = styles;\n  const flatStyles: Record<string, unknown> = {};\n  const selectorStyles: Record<string, unknown> = {};\n\n  for (const key of Object.keys(allRest)) {\n    if (isSelector(key)) {\n      selectorStyles[key] = allRest[key];\n    } else {\n      flatStyles[key] = allRest[key];\n    }\n  }\n\n  if (!base && !post) {\n    return allRest;\n  }\n\n  // 1. Merge base recipes, then component styles on top (via mergeStyles)\n  let result: Record<string, unknown>;\n\n  if (base) {\n    const baseStyles = collectRecipeStyles(base, recipes);\n    result = mergeStyles(baseStyles as Styles, flatStyles as Styles) as Record<\n      string,\n      unknown\n    >;\n  } else {\n    result = { ...flatStyles };\n  }\n\n  // 2. Apply post recipes via mergeStyles (state map extend semantics)\n  if (post) {\n    const postStyles = collectRecipeStyles(post, recipes);\n    result = mergeStyles(result as Styles, postStyles as Styles) as Record<\n      string,\n      unknown\n    >;\n  }\n\n  // Re-attach selector keys unchanged\n  for (const key of Object.keys(selectorStyles)) {\n    result[key] = selectorStyles[key];\n  }\n\n  return result;\n}\n\n/**\n * Resolve all `recipe` style properties in a styles object.\n *\n * Handles both top-level and sub-element recipe references.\n * Returns the same object reference if no recipes are present anywhere\n * (zero overhead for the common case).\n *\n * @param styles - The styles object potentially containing `recipe` keys\n * @returns Resolved styles with recipe values merged in, or the original object if unchanged\n */\nexport function resolveRecipes(styles: Styles): Styles {\n  const recipes = getGlobalRecipes();\n\n  // Fast path: no recipes configured globally\n  if (!recipes) return styles;\n\n  let changed = false;\n\n  // Resolve top-level recipe\n  const topResolved = resolveRecipesForLevel(\n    styles as Record<string, unknown>,\n    recipes,\n  );\n\n  let result: Record<string, unknown>;\n\n  if (topResolved) {\n    changed = true;\n    result = topResolved;\n  } else {\n    // Keep reference; a shallow copy is deferred until a sub-element actually changes\n    result = styles as Record<string, unknown>;\n  }\n\n  // Resolve sub-element recipes\n  const keys = Object.keys(result);\n\n  for (const key of keys) {\n    if (!isSelector(key)) continue;\n\n    const subStyles = result[key];\n\n    if (\n      !subStyles ||\n      typeof subStyles !== 'object' ||\n      Array.isArray(subStyles)\n    ) {\n      continue;\n    }\n\n    const subRecord = subStyles as Record<string, unknown>;\n\n    if (!('recipe' in subRecord)) continue;\n\n    const subResolved = resolveRecipesForLevel(subRecord, recipes);\n\n    if (subResolved) {\n      if (!changed) {\n        // First change in sub-elements -- need to shallow-copy the top level\n        changed = true;\n        result = { ...(styles as Record<string, unknown>) };\n      }\n      result[key] = subResolved;\n    }\n  }\n\n  return changed ? (result as Styles) : styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,UAAU;;;;;;;;;;;;AAkB1B,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,QAA4B;EAAE,MAAM;EAAM,MAAM;EAAM;AAE5D,KAAI,OAAO,UAAU,SAAU,QAAO;CACtC,MAAM,UAAU,MAAM,MAAM;AAC5B,KAAI,YAAY,GAAI,QAAO;CAE3B,MAAM,aAAa,QAAQ,QAAQ,IAAI;AAEvC,KAAI,eAAe,IAAI;AACrB,MAAI,YAAY,OAAQ,QAAO;AAE/B,SAAO;GAAE,MADK,WAAW,QAAQ;GACX,MAAM;GAAM;;CAGpC,MAAM,WAAW,QAAQ,MAAM,GAAG,WAAW;CAC7C,MAAM,WAAW,QAAQ,MAAM,aAAa,EAAE;AAE9C,QAAO;EACL,MAAM,SAAS,MAAM,KAAK,SAAS,OAAO,WAAW,SAAS;EAC9D,MAAM,WAAW,SAAS;EAC3B;;AAGH,SAAS,WAAW,GAA4B;CAC9C,MAAM,QAAQ,EAAE,MAAM,MAAM,CAAC,OAAO,QAAQ;AAC5C,QAAO,MAAM,SAAS,IAAI,QAAQ;;;;;;AAOpC,SAAS,oBACP,OACA,SACyB;CACzB,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,eAAe,QAAQ;AAE7B,MAAI,CAAC,cAAc;AACjB,OAAI,QACF,SAAQ,KACN,mBAAmB,KAAK,0EAEzB;AAEH;;AAGF,WAAS;GAAE,GAAG;GAAQ,GAAI;GAA0C;;AAGtE,QAAO;;;;;;;;AAST,SAAS,uBACP,QACA,SACgC;AAChC,KAAI,EAAE,YAAY,QAAS,QAAO;CAElC,MAAM,EAAE,MAAM,SAAS,iBAAiB,OAAO,OAAO;CAMtD,MAAM,EAAE,QAAQ,SAAS,GAAG,YAAY;CACxC,MAAM,aAAsC,EAAE;CAC9C,MAAM,iBAA0C,EAAE;AAElD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,KAAI,WAAW,IAAI,CACjB,gBAAe,OAAO,QAAQ;KAE9B,YAAW,OAAO,QAAQ;AAI9B,KAAI,CAAC,QAAQ,CAAC,KACZ,QAAO;CAIT,IAAI;AAEJ,KAAI,KAEF,UAAS,YADU,oBAAoB,MAAM,QAAQ,EACV,WAAqB;KAKhE,UAAS,EAAE,GAAG,YAAY;AAI5B,KAAI,MAAM;EACR,MAAM,aAAa,oBAAoB,MAAM,QAAQ;AACrD,WAAS,YAAY,QAAkB,WAAqB;;AAO9D,MAAK,MAAM,OAAO,OAAO,KAAK,eAAe,CAC3C,QAAO,OAAO,eAAe;AAG/B,QAAO;;;;;;;;;;;;AAaT,SAAgB,eAAe,QAAwB;CACrD,MAAM,UAAU,kBAAkB;AAGlC,KAAI,CAAC,QAAS,QAAO;CAErB,IAAI,UAAU;CAGd,MAAM,cAAc,uBAClB,QACA,QACD;CAED,IAAI;AAEJ,KAAI,aAAa;AACf,YAAU;AACV,WAAS;OAGT,UAAS;CAIX,MAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAK,MAAM,OAAO,MAAM;AACtB,MAAI,CAAC,WAAW,IAAI,CAAE;EAEtB,MAAM,YAAY,OAAO;AAEzB,MACE,CAAC,aACD,OAAO,cAAc,YACrB,MAAM,QAAQ,UAAU,CAExB;EAGF,MAAM,YAAY;AAElB,MAAI,EAAE,YAAY,WAAY;EAE9B,MAAM,cAAc,uBAAuB,WAAW,QAAQ;AAE9D,MAAI,aAAa;AACf,OAAI,CAAC,SAAS;AAEZ,cAAU;AACV,aAAS,EAAE,GAAI,QAAoC;;AAErD,UAAO,OAAO;;;AAIlB,QAAO,UAAW,SAAoB"}

package/dist/utils/selector-transform.js

@@ -26,7 +26,7 @@ const ELEMENT_NAME_RE = /(^|[\s>+~,(])([A-Z][a-zA-Z0-9]*)/g;
 function transformSelectorContent(content) {
 	return content.replace(ELEMENT_NAME_RE, (_, prefix, name) => `${prefix}[data-element="${name}"]`);
 }
-
 //#endregion
 export { transformSelectorContent };
+
 //# sourceMappingURL=selector-transform.js.map

package/dist/utils/string.js

@@ -2,7 +2,7 @@
 function toSnakeCase(str) {
 	return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
 }
-
 //#endregion
 export { toSnakeCase };
+
 //# sourceMappingURL=string.js.map

package/dist/utils/styles.d.ts

@@ -23,7 +23,7 @@ type StylePropValue<T = string> = StyleValue<T> | StyleValueStateMap<T>;
 type CSSMap = {
   $?: string | string[];
 } & Record<string, string | string[]>;
-type StyleHandlerResult = CSSMap | CSSMap[] | void;
+type StyleHandlerResult = CSSMap | CSSMap[] | null | void;
 type RawStyleHandler = (value: StyleValueStateMap) => StyleHandlerResult;
 type StyleHandler = RawStyleHandler & {
   __lookupStyles: string[];

package/dist/utils/styles.js

@@ -1,7 +1,6 @@
-import { getNamedColorHex, getRgbValuesFromRgbaString, hexToRgb, strToRgb } from "./color-math.js";
+import { getNamedColorHex } from "./color-math.js";
 import { StyleParser } from "../parser/parser.js";
 import { okhslFunc } from "../plugins/okhsl-plugin.js";
-
 //#region src/utils/styles.ts
 /**
 * Normalize a color token value.
@@ -215,7 +214,7 @@ function stringifyStyles(styles) {
 	_topLevelCache.set(styles, result);
 	return result;
 }
-
 //#endregion
 export { CUSTOM_UNITS, DIRECTIONS, customFunc, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, normalizeColorTokenValue, parseColor, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, stringifyStyles };
+
 //# sourceMappingURL=styles.js.map

package/dist/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import { StyleParser } from '../parser/parser';\nimport { okhslFunc } from '../plugins/okhsl-plugin';\n\nimport type { ProcessedStyle, StyleDetails } from '../parser/types';\n\nimport { getNamedColorHex } from './color-math';\n\nexport {\n  getNamedColorHex,\n  getRgbValuesFromRgbaString,\n  hexToRgb,\n  strToRgb,\n} from './color-math';\n\nexport type StyleValue<T = string> = T | boolean | number | null | undefined;\n\n/**\n * Normalize a color token value.\n * - Boolean `true` is converted to `'transparent'`\n * - Boolean `false` returns `null` (signals the token should be skipped)\n * - Other values are returned as-is\n *\n * @param value - The raw token value\n * @returns Normalized value or null if the token should be skipped\n */\nexport function normalizeColorTokenValue<T>(\n  value: T | boolean,\n): T | 'transparent' | null {\n  if (value === true) {\n    return 'transparent';\n  }\n  if (value === false) {\n    return null;\n  }\n  return value as T;\n}\n\nexport type StyleValueStateMap<T = string> = Record<\n  string,\n  StyleValue<T> | '@inherit'\n>;\n\n/**\n * Combined type for style values that can be either a direct value or a state map.\n * Use this for component props that accept style values.\n */\nexport type StylePropValue<T = string> = StyleValue<T> | StyleValueStateMap<T>;\n\nexport type CSSMap = { $?: string | string[] } & Record<\n  string,\n  string | string[]\n>;\n\nexport type StyleHandlerResult = CSSMap | CSSMap[] | void;\n\nexport type RawStyleHandler = (value: StyleValueStateMap) => StyleHandlerResult;\n\nexport type StyleHandler = RawStyleHandler & {\n  __lookupStyles: string[];\n};\n\n/**\n * Handler definition forms for configure() and plugins.\n * - Function only: lookup styles inferred from key name\n * - Single property tuple: ['styleName', handler]\n * - Multi-property tuple: [['style1', 'style2'], handler]\n */\nexport type StyleHandlerDefinition =\n  | RawStyleHandler\n  | [string, RawStyleHandler]\n  | [string[], RawStyleHandler];\n\nexport interface ParsedColor {\n  color?: string;\n  name?: string;\n  opacity?: number;\n}\n\nexport type StyleMap = Record<string, StyleValue | StyleValueStateMap>;\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n// Precompiled regex patterns for parseColor optimization\n// Match var(--name-color...) and extract the name, regardless of fallbacks\nconst COLOR_VAR_PATTERN = /var\\(--([a-z0-9-]+)-color/;\nconst COLOR_VAR_COMPONENTS_PATTERN =\n  /var\\(--([a-z0-9-]+)-color-(?:rgb|hsl|oklch)/;\nconst RGB_ALPHA_PATTERN = /\\/\\s*([0-9.]+)\\)/;\nconst RE_HEX_COLOR = /^#[0-9a-fA-F]{3,8}$/;\nconst RE_VAR_COLOR = /^var\\(--[a-z0-9-]+-color/;\n\nfunction isSimpleColorFast(val: string): boolean {\n  const c0 = val.charCodeAt(0);\n\n  switch (c0) {\n    case 35: // '#'\n      return RE_HEX_COLOR.test(val);\n    case 114: // 'r'\n      return val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98; // 'rgb'\n    case 104: // 'h'\n      return val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108; // 'hsl'\n    case 108: // 'l'\n      return val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104; // 'lch'\n    case 111: // 'o'\n      return val.startsWith('oklch(') || val.startsWith('okhsl(');\n    case 118: // 'v'\n      return RE_VAR_COLOR.test(val);\n    case 99: // 'c'\n      return val === 'currentColor' || val === 'currentcolor';\n    case 116: // 't'\n      return val === 'transparent';\n    default:\n      return getNamedColorHex().has(val.toLowerCase());\n  }\n}\n\n// Rate limiting for dev warnings to avoid spam\nlet colorWarningCount = 0;\nconst MAX_COLOR_WARNINGS = 10;\n\nexport const CUSTOM_UNITS = {\n  r: '6px',\n  cr: '10px',\n  bw: '1px',\n  ow: '3px',\n  x: '8px',\n  sf: function sf(num: number) {\n    return `minmax(0, ${num}fr)`;\n  },\n};\n\nexport const DIRECTIONS = ['top', 'right', 'bottom', 'left'];\n\n// Lazy-initialized to break the circular dependency:\n// parser.ts → classify.ts → utils/styles.ts → parser.ts\nlet __tastyParser: StyleParser | null = null;\n\nfunction getOrCreateParser(): StyleParser {\n  if (!__tastyParser) {\n    __tastyParser = new StyleParser({ units: CUSTOM_UNITS });\n    __tastyParser.setFuncs(__tastyFuncs);\n  }\n  return __tastyParser;\n}\n\n// Registry for user-provided custom functions that the parser can call.\n// It is updated through the `customFunc` helper exported below.\n// okhsl is registered as a built-in function so it works regardless of\n// tree-shaking or module initialization order.\nconst __tastyFuncs: Record<string, (groups: StyleDetails[]) => string> = {\n  okhsl: okhslFunc,\n};\n\nexport function customFunc(\n  name: string,\n  fn: (groups: StyleDetails[]) => string,\n) {\n  __tastyFuncs[name] = fn;\n  getOrCreateParser().setFuncs(__tastyFuncs);\n}\n\n/**\n * Get the global StyleParser instance.\n * Used by configure() to apply parser configuration.\n */\nexport function getGlobalParser(): StyleParser {\n  return getOrCreateParser();\n}\n\n/**\n * Get the current custom functions registry.\n * Used by configure() to merge with new functions.\n */\nexport function getGlobalFuncs(): Record<\n  string,\n  (groups: StyleDetails[]) => string\n> {\n  return __tastyFuncs;\n}\n\n// ============================================================================\n// Global Predefined Tokens\n// ============================================================================\n\n/**\n * Storage for predefined tokens that are replaced during style parsing.\n * Keys are token names (with $ or # prefix), values are pre-processed CSS values.\n */\nlet __globalPredefinedTokens: Record<string, string> | null = null;\n\n/**\n * Set global predefined tokens.\n * Called from configure() after processing token values.\n * Merges with existing tokens (new tokens override existing ones with same key).\n * Keys are normalized to lowercase (parser lowercases input before classification).\n * @internal\n */\nexport function setGlobalPredefinedTokens(\n  tokens: Record<string, string>,\n): void {\n  // Normalize keys to lowercase for case-insensitive matching\n  const normalizedTokens: Record<string, string> = {};\n  for (const [key, value] of Object.entries(tokens)) {\n    const lowerKey = key.toLowerCase();\n    const lowerValue = value.toLowerCase();\n\n    // Warn if trying to use bare #current to define other color tokens\n    // #current represents currentcolor which cannot be used as a base for recursive token resolution\n    // Note: #current.5 (with opacity) is allowed since it resolves to a concrete color-mix value\n    if (lowerKey.startsWith('#') && lowerValue === '#current') {\n      console.warn(\n        `Tasty: Using #current to define color token \"${key}\" is not supported. ` +\n          `The #current token represents currentcolor which cannot be used as a base for other tokens.`,\n      );\n      continue; // Skip this token\n    }\n\n    normalizedTokens[lowerKey] = value;\n  }\n  // Merge with existing tokens (consistent with how states, units, funcs are handled)\n  __globalPredefinedTokens = __globalPredefinedTokens\n    ? { ...__globalPredefinedTokens, ...normalizedTokens }\n    : normalizedTokens;\n  // Clear parser cache since token values affect parsing\n  getOrCreateParser().clearCache();\n}\n\n/**\n * Get the current global predefined tokens.\n * Returns null if no tokens are configured.\n */\nexport function getGlobalPredefinedTokens(): Record<string, string> | null {\n  return __globalPredefinedTokens;\n}\n\n/**\n * Reset global predefined tokens.\n * Used for testing.\n * @internal\n */\nexport function resetGlobalPredefinedTokens(): void {\n  __globalPredefinedTokens = null;\n  // Clear parser cache since token availability affects parsing\n  getOrCreateParser().clearCache();\n}\n\n/**\n *\n * @param {String} value\n * @param {Number} mode\n * @returns {Object<String,String|Array>}\n */\nexport function parseStyle(value: StyleValue): ProcessedStyle {\n  let str: string;\n\n  if (typeof value === 'string') {\n    str = value;\n  } else if (typeof value === 'number') {\n    str = String(value);\n  } else {\n    // boolean, null, undefined, objects etc. → empty string\n    str = '';\n  }\n\n  return getOrCreateParser().process(str);\n}\n\n/**\n * Parse color. Find it value, name and opacity.\n * Optimized to avoid heavy parseStyle calls for simple color patterns.\n */\nexport function parseColor(val: string, ignoreError = false): ParsedColor {\n  // Early return for non-strings or empty values\n  if (typeof val !== 'string') {\n    val = String(val ?? '');\n  }\n\n  val = val.trim();\n  if (!val) return {};\n\n  // Fast path: Check if it's a simple color pattern that doesn't need full parsing\n  const isSimpleColor = isSimpleColorFast(val);\n\n  let firstColor: string;\n  if (isSimpleColor) {\n    // For simple colors, use the value directly without parsing\n    firstColor = val;\n  } else {\n    const processed = parseStyle(val);\n    const extractedColor = processed.groups.find((g) => g.colors.length)\n      ?.colors[0];\n\n    if (!extractedColor) {\n      // Rate-limited warning to avoid spam\n      if (!ignoreError && devMode && colorWarningCount < MAX_COLOR_WARNINGS) {\n        console.warn('Tasty: unable to parse color:', val);\n        colorWarningCount++;\n        if (colorWarningCount === MAX_COLOR_WARNINGS) {\n          console.warn(\n            'Tasty: color parsing warnings will be suppressed from now on',\n          );\n        }\n      }\n      return {};\n    }\n\n    firstColor = extractedColor;\n  }\n\n  // Extract color name (if present) from variable pattern using precompiled regex\n  let nameMatch = firstColor.match(COLOR_VAR_PATTERN);\n  if (!nameMatch) {\n    nameMatch = firstColor.match(COLOR_VAR_COMPONENTS_PATTERN);\n  }\n\n  let opacity: number | undefined;\n  if (\n    firstColor.startsWith('rgb') ||\n    firstColor.startsWith('hsl') ||\n    firstColor.startsWith('lch') ||\n    firstColor.startsWith('oklch') ||\n    firstColor.startsWith('okhsl')\n  ) {\n    const alphaMatch = firstColor.match(RGB_ALPHA_PATTERN);\n    if (alphaMatch) {\n      const v = parseFloat(alphaMatch[1]);\n      if (!isNaN(v)) opacity = v * 100;\n    }\n  }\n\n  return {\n    color: firstColor,\n    name: nameMatch ? nameMatch[1] : undefined,\n    opacity,\n  };\n}\n\nexport function filterMods(mods: string[], allowedMods: string[]): string[] {\n  return mods.filter((mod) => allowedMods.includes(mod));\n}\n\n// ============================================================================\n// Style Stringification\n// ============================================================================\n\nconst _innerCache = new WeakMap();\nconst _topLevelCache = new WeakMap<object, string>();\n\nexport function stringifyStyles(styles: unknown): string {\n  if (styles == null || typeof styles !== 'object') return '';\n\n  const cached = _topLevelCache.get(styles as object);\n  if (cached !== undefined) return cached;\n\n  const obj = styles as Record<string, unknown>;\n  const keys = Object.keys(obj).sort();\n  const parts: string[] = [];\n  for (const k of keys) {\n    const v = obj[k];\n    if (v === undefined || typeof v === 'function' || typeof v === 'symbol')\n      continue;\n\n    const c0 = k.charCodeAt(0);\n    const needsInnerSort =\n      ((c0 >= 65 && c0 <= 90) || c0 === 38) &&\n      v &&\n      typeof v === 'object' &&\n      !Array.isArray(v);\n\n    let sv: string;\n    if (needsInnerSort) {\n      sv = _innerCache.get(v);\n      if (sv === undefined) {\n        const innerObj = v as Record<string, unknown>;\n        const innerKeys = Object.keys(innerObj).sort();\n        const innerParts: string[] = [];\n        for (const ik of innerKeys) {\n          const ivs = JSON.stringify(innerObj[ik]);\n          if (ivs !== undefined)\n            innerParts.push(JSON.stringify(ik) + ':' + ivs);\n        }\n        sv = '{' + innerParts.join(',') + '}';\n        _innerCache.set(v, sv);\n      }\n    } else {\n      sv = JSON.stringify(v);\n    }\n    parts.push(JSON.stringify(k) + ':' + sv);\n  }\n  const result = '{' + parts.join(',') + '}';\n  _topLevelCache.set(styles as object, result);\n  return result;\n}\n"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":[],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import { StyleParser } from '../parser/parser';\nimport { okhslFunc } from '../plugins/okhsl-plugin';\n\nimport type { ProcessedStyle, StyleDetails } from '../parser/types';\n\nimport { getNamedColorHex } from './color-math';\n\nexport {\n  getNamedColorHex,\n  getRgbValuesFromRgbaString,\n  hexToRgb,\n  strToRgb,\n} from './color-math';\n\nexport type StyleValue<T = string> = T | boolean | number | null | undefined;\n\n/**\n * Normalize a color token value.\n * - Boolean `true` is converted to `'transparent'`\n * - Boolean `false` returns `null` (signals the token should be skipped)\n * - Other values are returned as-is\n *\n * @param value - The raw token value\n * @returns Normalized value or null if the token should be skipped\n */\nexport function normalizeColorTokenValue<T>(\n  value: T | boolean,\n): T | 'transparent' | null {\n  if (value === true) {\n    return 'transparent';\n  }\n  if (value === false) {\n    return null;\n  }\n  return value as T;\n}\n\nexport type StyleValueStateMap<T = string> = Record<\n  string,\n  StyleValue<T> | '@inherit'\n>;\n\n/**\n * Combined type for style values that can be either a direct value or a state map.\n * Use this for component props that accept style values.\n */\nexport type StylePropValue<T = string> = StyleValue<T> | StyleValueStateMap<T>;\n\nexport type CSSMap = { $?: string | string[] } & Record<\n  string,\n  string | string[]\n>;\n\nexport type StyleHandlerResult = CSSMap | CSSMap[] | null | void;\n\nexport type RawStyleHandler = (value: StyleValueStateMap) => StyleHandlerResult;\n\nexport type StyleHandler = RawStyleHandler & {\n  __lookupStyles: string[];\n};\n\n/**\n * Handler definition forms for configure() and plugins.\n * - Function only: lookup styles inferred from key name\n * - Single property tuple: ['styleName', handler]\n * - Multi-property tuple: [['style1', 'style2'], handler]\n */\nexport type StyleHandlerDefinition =\n  | RawStyleHandler\n  | [string, RawStyleHandler]\n  | [string[], RawStyleHandler];\n\nexport interface ParsedColor {\n  color?: string;\n  name?: string;\n  opacity?: number;\n}\n\nexport type StyleMap = Record<string, StyleValue | StyleValueStateMap>;\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n// Precompiled regex patterns for parseColor optimization\n// Match var(--name-color...) and extract the name, regardless of fallbacks\nconst COLOR_VAR_PATTERN = /var\\(--([a-z0-9-]+)-color/;\nconst COLOR_VAR_COMPONENTS_PATTERN =\n  /var\\(--([a-z0-9-]+)-color-(?:rgb|hsl|oklch)/;\nconst RGB_ALPHA_PATTERN = /\\/\\s*([0-9.]+)\\)/;\nconst RE_HEX_COLOR = /^#[0-9a-fA-F]{3,8}$/;\nconst RE_VAR_COLOR = /^var\\(--[a-z0-9-]+-color/;\n\nfunction isSimpleColorFast(val: string): boolean {\n  const c0 = val.charCodeAt(0);\n\n  switch (c0) {\n    case 35: // '#'\n      return RE_HEX_COLOR.test(val);\n    case 114: // 'r'\n      return val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98; // 'rgb'\n    case 104: // 'h'\n      return val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108; // 'hsl'\n    case 108: // 'l'\n      return val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104; // 'lch'\n    case 111: // 'o'\n      return val.startsWith('oklch(') || val.startsWith('okhsl(');\n    case 118: // 'v'\n      return RE_VAR_COLOR.test(val);\n    case 99: // 'c'\n      return val === 'currentColor' || val === 'currentcolor';\n    case 116: // 't'\n      return val === 'transparent';\n    default:\n      return getNamedColorHex().has(val.toLowerCase());\n  }\n}\n\n// Rate limiting for dev warnings to avoid spam\nlet colorWarningCount = 0;\nconst MAX_COLOR_WARNINGS = 10;\n\nexport const CUSTOM_UNITS = {\n  r: '6px',\n  cr: '10px',\n  bw: '1px',\n  ow: '3px',\n  x: '8px',\n  sf: function sf(num: number) {\n    return `minmax(0, ${num}fr)`;\n  },\n};\n\nexport const DIRECTIONS = ['top', 'right', 'bottom', 'left'];\n\n// Lazy-initialized to break the circular dependency:\n// parser.ts → classify.ts → utils/styles.ts → parser.ts\nlet __tastyParser: StyleParser | null = null;\n\nfunction getOrCreateParser(): StyleParser {\n  if (!__tastyParser) {\n    __tastyParser = new StyleParser({ units: CUSTOM_UNITS });\n    __tastyParser.setFuncs(__tastyFuncs);\n  }\n  return __tastyParser;\n}\n\n// Registry for user-provided custom functions that the parser can call.\n// It is updated through the `customFunc` helper exported below.\n// okhsl is registered as a built-in function so it works regardless of\n// tree-shaking or module initialization order.\nconst __tastyFuncs: Record<string, (groups: StyleDetails[]) => string> = {\n  okhsl: okhslFunc,\n};\n\nexport function customFunc(\n  name: string,\n  fn: (groups: StyleDetails[]) => string,\n) {\n  __tastyFuncs[name] = fn;\n  getOrCreateParser().setFuncs(__tastyFuncs);\n}\n\n/**\n * Get the global StyleParser instance.\n * Used by configure() to apply parser configuration.\n */\nexport function getGlobalParser(): StyleParser {\n  return getOrCreateParser();\n}\n\n/**\n * Get the current custom functions registry.\n * Used by configure() to merge with new functions.\n */\nexport function getGlobalFuncs(): Record<\n  string,\n  (groups: StyleDetails[]) => string\n> {\n  return __tastyFuncs;\n}\n\n// ============================================================================\n// Global Predefined Tokens\n// ============================================================================\n\n/**\n * Storage for predefined tokens that are replaced during style parsing.\n * Keys are token names (with $ or # prefix), values are pre-processed CSS values.\n */\nlet __globalPredefinedTokens: Record<string, string> | null = null;\n\n/**\n * Set global predefined tokens.\n * Called from configure() after processing token values.\n * Merges with existing tokens (new tokens override existing ones with same key).\n * Keys are normalized to lowercase (parser lowercases input before classification).\n * @internal\n */\nexport function setGlobalPredefinedTokens(\n  tokens: Record<string, string>,\n): void {\n  // Normalize keys to lowercase for case-insensitive matching\n  const normalizedTokens: Record<string, string> = {};\n  for (const [key, value] of Object.entries(tokens)) {\n    const lowerKey = key.toLowerCase();\n    const lowerValue = value.toLowerCase();\n\n    // Warn if trying to use bare #current to define other color tokens\n    // #current represents currentcolor which cannot be used as a base for recursive token resolution\n    // Note: #current.5 (with opacity) is allowed since it resolves to a concrete color-mix value\n    if (lowerKey.startsWith('#') && lowerValue === '#current') {\n      console.warn(\n        `Tasty: Using #current to define color token \"${key}\" is not supported. ` +\n          `The #current token represents currentcolor which cannot be used as a base for other tokens.`,\n      );\n      continue; // Skip this token\n    }\n\n    normalizedTokens[lowerKey] = value;\n  }\n  // Merge with existing tokens (consistent with how states, units, funcs are handled)\n  __globalPredefinedTokens = __globalPredefinedTokens\n    ? { ...__globalPredefinedTokens, ...normalizedTokens }\n    : normalizedTokens;\n  // Clear parser cache since token values affect parsing\n  getOrCreateParser().clearCache();\n}\n\n/**\n * Get the current global predefined tokens.\n * Returns null if no tokens are configured.\n */\nexport function getGlobalPredefinedTokens(): Record<string, string> | null {\n  return __globalPredefinedTokens;\n}\n\n/**\n * Reset global predefined tokens.\n * Used for testing.\n * @internal\n */\nexport function resetGlobalPredefinedTokens(): void {\n  __globalPredefinedTokens = null;\n  // Clear parser cache since token availability affects parsing\n  getOrCreateParser().clearCache();\n}\n\n/**\n *\n * @param {String} value\n * @param {Number} mode\n * @returns {Object<String,String|Array>}\n */\nexport function parseStyle(value: StyleValue): ProcessedStyle {\n  let str: string;\n\n  if (typeof value === 'string') {\n    str = value;\n  } else if (typeof value === 'number') {\n    str = String(value);\n  } else {\n    // boolean, null, undefined, objects etc. → empty string\n    str = '';\n  }\n\n  return getOrCreateParser().process(str);\n}\n\n/**\n * Parse color. Find it value, name and opacity.\n * Optimized to avoid heavy parseStyle calls for simple color patterns.\n */\nexport function parseColor(val: string, ignoreError = false): ParsedColor {\n  // Early return for non-strings or empty values\n  if (typeof val !== 'string') {\n    val = String(val ?? '');\n  }\n\n  val = val.trim();\n  if (!val) return {};\n\n  // Fast path: Check if it's a simple color pattern that doesn't need full parsing\n  const isSimpleColor = isSimpleColorFast(val);\n\n  let firstColor: string;\n  if (isSimpleColor) {\n    // For simple colors, use the value directly without parsing\n    firstColor = val;\n  } else {\n    const processed = parseStyle(val);\n    const extractedColor = processed.groups.find((g) => g.colors.length)\n      ?.colors[0];\n\n    if (!extractedColor) {\n      // Rate-limited warning to avoid spam\n      if (!ignoreError && devMode && colorWarningCount < MAX_COLOR_WARNINGS) {\n        console.warn('Tasty: unable to parse color:', val);\n        colorWarningCount++;\n        if (colorWarningCount === MAX_COLOR_WARNINGS) {\n          console.warn(\n            'Tasty: color parsing warnings will be suppressed from now on',\n          );\n        }\n      }\n      return {};\n    }\n\n    firstColor = extractedColor;\n  }\n\n  // Extract color name (if present) from variable pattern using precompiled regex\n  let nameMatch = firstColor.match(COLOR_VAR_PATTERN);\n  if (!nameMatch) {\n    nameMatch = firstColor.match(COLOR_VAR_COMPONENTS_PATTERN);\n  }\n\n  let opacity: number | undefined;\n  if (\n    firstColor.startsWith('rgb') ||\n    firstColor.startsWith('hsl') ||\n    firstColor.startsWith('lch') ||\n    firstColor.startsWith('oklch') ||\n    firstColor.startsWith('okhsl')\n  ) {\n    const alphaMatch = firstColor.match(RGB_ALPHA_PATTERN);\n    if (alphaMatch) {\n      const v = parseFloat(alphaMatch[1]);\n      if (!isNaN(v)) opacity = v * 100;\n    }\n  }\n\n  return {\n    color: firstColor,\n    name: nameMatch ? nameMatch[1] : undefined,\n    opacity,\n  };\n}\n\nexport function filterMods(mods: string[], allowedMods: string[]): string[] {\n  return mods.filter((mod) => allowedMods.includes(mod));\n}\n\n// ============================================================================\n// Style Stringification\n// ============================================================================\n\nconst _innerCache = new WeakMap();\nconst _topLevelCache = new WeakMap<object, string>();\n\nexport function stringifyStyles(styles: unknown): string {\n  if (styles == null || typeof styles !== 'object') return '';\n\n  const cached = _topLevelCache.get(styles as object);\n  if (cached !== undefined) return cached;\n\n  const obj = styles as Record<string, unknown>;\n  const keys = Object.keys(obj).sort();\n  const parts: string[] = [];\n  for (const k of keys) {\n    const v = obj[k];\n    if (v === undefined || typeof v === 'function' || typeof v === 'symbol')\n      continue;\n\n    const c0 = k.charCodeAt(0);\n    const needsInnerSort =\n      ((c0 >= 65 && c0 <= 90) || c0 === 38) &&\n      v &&\n      typeof v === 'object' &&\n      !Array.isArray(v);\n\n    let sv: string;\n    if (needsInnerSort) {\n      sv = _innerCache.get(v);\n      if (sv === undefined) {\n        const innerObj = v as Record<string, unknown>;\n        const innerKeys = Object.keys(innerObj).sort();\n        const innerParts: string[] = [];\n        for (const ik of innerKeys) {\n          const ivs = JSON.stringify(innerObj[ik]);\n          if (ivs !== undefined)\n            innerParts.push(JSON.stringify(ik) + ':' + ivs);\n        }\n        sv = '{' + innerParts.join(',') + '}';\n        _innerCache.set(v, sv);\n      }\n    } else {\n      sv = JSON.stringify(v);\n    }\n    parts.push(JSON.stringify(k) + ':' + sv);\n  }\n  const result = '{' + parts.join(',') + '}';\n  _topLevelCache.set(styles as object, result);\n  return result;\n}\n"],"mappings":"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"}

package/dist/utils/typography.js

@@ -45,7 +45,7 @@ function generateTypographyTokens(presets) {
 	}
 	return tokens;
 }
-
 //#endregion
 export { generateTypographyTokens };
+
 //# sourceMappingURL=typography.js.map

package/dist/utils/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","names":[],"sources":["../../src/utils/typography.ts"],"sourcesContent":["import type { ConfigTokens } from '../styles/types';\n\nconst RESERVED_PRESET_NAMES = new Set([\n  'strong',\n  'bold',\n  'italic',\n  'icon',\n  'tight',\n]);\n\n/**\n * Typography preset configuration.\n * Each preset defines font properties that get expanded into CSS custom properties.\n *\n * Use with `generateTypographyTokens()` to create typography tokens for your design system.\n */\nexport interface TypographyPreset {\n  fontSize: string;\n  lineHeight: string;\n  letterSpacing?: string;\n  fontWeight: string | number;\n  boldFontWeight?: string | number;\n  iconSize?: string;\n  textTransform?: string;\n  fontFamily?: string;\n  fontStyle?: string;\n}\n\n/**\n * Generate typography tokens with $ prefix for CSS custom properties.\n *\n * Each preset generates the following CSS custom properties:\n * - `${name}-font-size`\n * - `${name}-line-height`\n * - `${name}-letter-spacing`\n * - `${name}-font-weight`\n * - `${name}-bold-font-weight` (if defined)\n * - `${name}-icon-size` (if defined)\n * - `${name}-text-transform` (if defined)\n * - `${name}-font-family` (if defined)\n * - `${name}-font-style` (if defined)\n *\n * @param presets - Typography presets object\n * @returns ConfigTokens object with $ prefixed keys\n *\n * @example\n * const customTokens = generateTypographyTokens({\n *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },\n *   body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },\n * });\n */\nexport function generateTypographyTokens(\n  presets: Record<string, TypographyPreset>,\n): ConfigTokens {\n  const tokens: Record<`$${string}`, string | number> = {};\n\n  for (const [name, preset] of Object.entries(presets)) {\n    if (RESERVED_PRESET_NAMES.has(name)) {\n      throw new Error(\n        `Invalid typography preset name \"${name}\". This name is reserved as a preset modifier.`,\n      );\n    }\n\n    tokens[`$${name}-font-size`] = preset.fontSize;\n    tokens[`$${name}-line-height`] = preset.lineHeight;\n    tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? '0';\n    tokens[`$${name}-font-weight`] = preset.fontWeight;\n\n    if (preset.boldFontWeight !== undefined) {\n      tokens[`$${name}-bold-font-weight`] = preset.boldFontWeight;\n    }\n\n    if (preset.iconSize !== undefined) {\n      tokens[`$${name}-icon-size`] = preset.iconSize;\n    }\n\n    if (preset.textTransform !== undefined) {\n      tokens[`$${name}-text-transform`] = preset.textTransform;\n    }\n\n    if (preset.fontFamily !== undefined) {\n      tokens[`$${name}-font-family`] = preset.fontFamily;\n    }\n\n    if (preset.fontStyle !== undefined) {\n      tokens[`$${name}-font-style`] = preset.fontStyle;\n    }\n  }\n\n  return tokens as ConfigTokens;\n}\n"],"mappings":";AAEA,MAAM,wBAAwB,IAAI,IAAI;CACpC;CACA;CACA;CACA;CACA;CACD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AA2CF,SAAgB,yBACd,SACc;CACd,MAAM,SAAgD,EAAE;AAExD,MAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,QAAQ,EAAE;AACpD,MAAI,sBAAsB,IAAI,KAAK,CACjC,OAAM,IAAI,MACR,mCAAmC,KAAK,gDACzC;AAGH,SAAO,IAAI,KAAK,eAAe,OAAO;AACtC,SAAO,IAAI,KAAK,iBAAiB,OAAO;AACxC,SAAO,IAAI,KAAK,oBAAoB,OAAO,iBAAiB;AAC5D,SAAO,IAAI,KAAK,iBAAiB,OAAO;AAExC,MAAI,OAAO,mBAAmB,OAC5B,QAAO,IAAI,KAAK,sBAAsB,OAAO;AAG/C,MAAI,OAAO,aAAa,OACtB,QAAO,IAAI,KAAK,eAAe,OAAO;AAGxC,MAAI,OAAO,kBAAkB,OAC3B,QAAO,IAAI,KAAK,oBAAoB,OAAO;AAG7C,MAAI,OAAO,eAAe,OACxB,QAAO,IAAI,KAAK,iBAAiB,OAAO;AAG1C,MAAI,OAAO,cAAc,OACvB,QAAO,IAAI,KAAK,gBAAgB,OAAO;;AAI3C,QAAO"}
+{"version":3,"file":"typography.js","names":[],"sources":["../../src/utils/typography.ts"],"sourcesContent":["import type { ConfigTokens } from '../styles/types';\n\nconst RESERVED_PRESET_NAMES = new Set([\n  'strong',\n  'bold',\n  'italic',\n  'icon',\n  'tight',\n]);\n\n/**\n * Typography preset configuration.\n * Each preset defines font properties that get expanded into CSS custom properties.\n *\n * Use with `generateTypographyTokens()` to create typography tokens for your design system.\n */\nexport interface TypographyPreset {\n  fontSize: string;\n  lineHeight: string;\n  letterSpacing?: string;\n  fontWeight: string | number;\n  boldFontWeight?: string | number;\n  iconSize?: string;\n  textTransform?: string;\n  fontFamily?: string;\n  fontStyle?: string;\n}\n\n/**\n * Generate typography tokens with $ prefix for CSS custom properties.\n *\n * Each preset generates the following CSS custom properties:\n * - `${name}-font-size`\n * - `${name}-line-height`\n * - `${name}-letter-spacing`\n * - `${name}-font-weight`\n * - `${name}-bold-font-weight` (if defined)\n * - `${name}-icon-size` (if defined)\n * - `${name}-text-transform` (if defined)\n * - `${name}-font-family` (if defined)\n * - `${name}-font-style` (if defined)\n *\n * @param presets - Typography presets object\n * @returns ConfigTokens object with $ prefixed keys\n *\n * @example\n * const customTokens = generateTypographyTokens({\n *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },\n *   body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },\n * });\n */\nexport function generateTypographyTokens(\n  presets: Record<string, TypographyPreset>,\n): ConfigTokens {\n  const tokens: Record<`$${string}`, string | number> = {};\n\n  for (const [name, preset] of Object.entries(presets)) {\n    if (RESERVED_PRESET_NAMES.has(name)) {\n      throw new Error(\n        `Invalid typography preset name \"${name}\". This name is reserved as a preset modifier.`,\n      );\n    }\n\n    tokens[`$${name}-font-size`] = preset.fontSize;\n    tokens[`$${name}-line-height`] = preset.lineHeight;\n    tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? '0';\n    tokens[`$${name}-font-weight`] = preset.fontWeight;\n\n    if (preset.boldFontWeight !== undefined) {\n      tokens[`$${name}-bold-font-weight`] = preset.boldFontWeight;\n    }\n\n    if (preset.iconSize !== undefined) {\n      tokens[`$${name}-icon-size`] = preset.iconSize;\n    }\n\n    if (preset.textTransform !== undefined) {\n      tokens[`$${name}-text-transform`] = preset.textTransform;\n    }\n\n    if (preset.fontFamily !== undefined) {\n      tokens[`$${name}-font-family`] = preset.fontFamily;\n    }\n\n    if (preset.fontStyle !== undefined) {\n      tokens[`$${name}-font-style`] = preset.fontStyle;\n    }\n  }\n\n  return tokens as ConfigTokens;\n}\n"],"mappings":";AAEA,MAAM,wBAAwB,IAAI,IAAI;CACpC;CACA;CACA;CACA;CACA;CACD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AA2CF,SAAgB,yBACd,SACc;CACd,MAAM,SAAgD,EAAE;AAExD,MAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,QAAQ,EAAE;AACpD,MAAI,sBAAsB,IAAI,KAAK,CACjC,OAAM,IAAI,MACR,mCAAmC,KAAK,gDACzC;AAGH,SAAO,IAAI,KAAK,eAAe,OAAO;AACtC,SAAO,IAAI,KAAK,iBAAiB,OAAO;AACxC,SAAO,IAAI,KAAK,oBAAoB,OAAO,iBAAiB;AAC5D,SAAO,IAAI,KAAK,iBAAiB,OAAO;AAExC,MAAI,OAAO,mBAAmB,KAAA,EAC5B,QAAO,IAAI,KAAK,sBAAsB,OAAO;AAG/C,MAAI,OAAO,aAAa,KAAA,EACtB,QAAO,IAAI,KAAK,eAAe,OAAO;AAGxC,MAAI,OAAO,kBAAkB,KAAA,EAC3B,QAAO,IAAI,KAAK,oBAAoB,OAAO;AAG7C,MAAI,OAAO,eAAe,KAAA,EACxB,QAAO,IAAI,KAAK,iBAAiB,OAAO;AAG1C,MAAI,OAAO,cAAc,KAAA,EACvB,QAAO,IAAI,KAAK,gBAAgB,OAAO;;AAI3C,QAAO"}

package/dist/utils/warnings.js

@@ -10,7 +10,7 @@ function deprecationWarning(condition, { property, name, betterAlternative, reas
 	if (reason) warn(`Reason: ${typeof reason === "function" ? reason() : reason}`);
 	console.groupEnd();
 }
-
 //#endregion
 export { deprecationWarning, warn };
+
 //# sourceMappingURL=warnings.js.map

package/dist/zero/babel.d.ts

@@ -3,7 +3,7 @@ import { StyleDetails, UnitHandler } from "../parser/types.js";
 import { StyleHandlerDefinition } from "../utils/styles.js";
 import { ConfigTokens, RecipeStyles } from "../styles/types.js";
 import { TastyPlugin } from "../plugins/types.js";
-import * as _babel_core0 from "@babel/core";
+import * as _$_babel_core0 from "@babel/core";
 import { PluginPass } from "@babel/core";
 
 //#region src/zero/babel.d.ts
@@ -158,10 +158,25 @@ interface TastyZeroBabelOptions {
    * @default true
    */
   injectImport?: boolean;
+  /**
+   * Output mode for extracted CSS.
+   *
+   * - `'file'` (default): CSS is written to a single output file and
+   *   the `@tenphi/tasty/static` import is rewritten to import that file.
+   * - `'inject'`: CSS is embedded inline in the JS output and injected
+   *   at runtime via a tiny injector from `@tenphi/tasty/static/inject`.
+   *   No CSS file is written. Each `tastyStatic` call becomes
+   *   self-contained. Best for reusable components and extensions.
+   *
+   * When `mode` is `'inject'`, `output` and `injectImport` are ignored.
+   *
+   * @default 'file'
+   */
+  mode?: 'file' | 'inject';
 }
 /** Clear the shared CSSWriter cache. Exposed for testing. */
 declare function clearWriterCache(): void;
-declare const _default: (api: object, options: TastyZeroBabelOptions | null | undefined, dirname: string) => _babel_core0.PluginObj<PluginPass>;
+declare const _default: (api: object, options: TastyZeroBabelOptions | null | undefined, dirname: string) => _$_babel_core0.PluginObj<PluginPass>;
 //#endregion
 export { TastyZeroBabelOptions, TastyZeroConfig, clearWriterCache, _default as default };
 //# sourceMappingURL=babel.d.ts.map

package/dist/zero/babel.js

@@ -9,7 +9,6 @@ import * as path from "path";
 import { declare } from "@babel/helper-plugin-utils";
 import * as t from "@babel/types";
 import { createJiti } from "jiti";
-
 //#region src/zero/babel.ts
 /**
 * Babel plugin for zero-runtime tasty static site generation.
@@ -58,10 +57,11 @@ function clearWriterCache() {
 }
 var babel_default = declare((api, options) => {
 	api.assertVersion(7);
+	const mode = options.mode ?? "file";
 	const outputPath = options.output || "tasty.css";
 	const resolvedOutputPath = path.resolve(outputPath);
 	const injectImport = options.injectImport ?? true;
-	if (injectImport) {
+	if (mode === "file" && injectImport) {
 		const dir = path.dirname(resolvedOutputPath);
 		if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
 		if (!fs.existsSync(resolvedOutputPath)) fs.writeFileSync(resolvedOutputPath, "/* Generated by @tenphi/tasty/zero - DO NOT EDIT */\n");
@@ -86,10 +86,12 @@ var babel_default = declare((api, options) => {
 		if (cached) resetConfig();
 		configure(resolvedConfig);
 		const newWriter = new CSSWriter(outputPath, { devMode });
-		const tokenStyles = getGlobalConfigTokens();
-		if (tokenStyles && Object.keys(tokenStyles).length > 0) {
-			const result = extractStylesForSelector(":root", tokenStyles);
-			if (result.css) newWriter.add(":root:tokens", result.css);
+		if (mode !== "inject") {
+			const tokenStyles = getGlobalConfigTokens();
+			if (tokenStyles && Object.keys(tokenStyles).length > 0) {
+				const result = extractStylesForSelector(":root", tokenStyles);
+				if (result.css) newWriter.add(":root:tokens", result.css);
+			}
 		}
 		writerCache.set(resolvedOutputPath, {
 			writer: newWriter,
@@ -103,6 +105,14 @@ var babel_default = declare((api, options) => {
 	const globalRegistry = entry.registry;
 	const config = entry.config;
 	const devMode = config.devMode ?? false;
+	let tokenCSS;
+	if (mode === "inject") {
+		const tokenStyles = getGlobalConfigTokens();
+		if (tokenStyles && Object.keys(tokenStyles).length > 0) {
+			const result = extractStylesForSelector(":root", tokenStyles);
+			if (result.css) tokenCSS = result.css;
+		}
+	}
 	return {
 		name: "tasty-zero",
 		pre() {
@@ -113,7 +123,8 @@ var babel_default = declare((api, options) => {
 		visitor: {
 			ImportDeclaration(nodePath, state) {
 				const source = nodePath.node.source.value;
-				if (source === "@tenphi/tasty/static" || source.endsWith("/tasty/static")) if (injectImport) {
+				if (source === "@tenphi/tasty/static" || source.endsWith("/tasty/static")) if (mode === "inject") nodePath.replaceWith(t.importDeclaration([t.importSpecifier(t.identifier("_$i"), t.identifier("injectCSS"))], t.stringLiteral("@tenphi/tasty/static/inject")));
+				else if (injectImport) {
 					let importPath = resolvedOutputPath;
 					if (state.filename) {
 						const sourceDir = path.dirname(state.filename);
@@ -130,9 +141,9 @@ var babel_default = declare((api, options) => {
 				const args = path.node.arguments;
 				if (args.length === 0) throw path.buildCodeFrameError("tastyStatic() requires at least one argument");
 				const firstArg = args[0];
-				if (t.isStringLiteral(firstArg)) handleSelectorMode(path, args, cssWriter, state.sourceFile, config.keyframes, config.autoPropertyTypes, config.fontFace, config.counterStyle);
-				else if (t.isObjectExpression(firstArg)) handleStylesMode(path, args, cssWriter, state, globalRegistry, config.keyframes, config.autoPropertyTypes, config.fontFace, config.counterStyle);
-				else if (t.isIdentifier(firstArg)) handleExtensionMode(path, args, cssWriter, state, globalRegistry, config.keyframes, config.autoPropertyTypes, config.fontFace, config.counterStyle);
+				if (t.isStringLiteral(firstArg)) handleSelectorMode(path, args, cssWriter, mode, state.sourceFile, config.keyframes, config.autoPropertyTypes, config.fontFace, config.counterStyle);
+				else if (t.isObjectExpression(firstArg)) handleStylesMode(path, args, cssWriter, state, globalRegistry, mode, config.keyframes, config.autoPropertyTypes, config.fontFace, config.counterStyle);
+				else if (t.isIdentifier(firstArg)) handleExtensionMode(path, args, cssWriter, state, globalRegistry, mode, config.keyframes, config.autoPropertyTypes, config.fontFace, config.counterStyle);
 				else throw path.buildCodeFrameError("tastyStatic() first argument must be an object (styles), identifier (base StaticStyle), or string (selector)");
 			},
 			VariableDeclarator(path, state) {
@@ -156,6 +167,16 @@ var babel_default = declare((api, options) => {
 			}
 		},
 		post() {
+			if (mode === "inject") {
+				if (this._fileAddedCSS && tokenCSS) {
+					const program = this.file.ast.program;
+					const injectCall = createInjectCallAST(":root", tokenCSS);
+					let insertIndex = 0;
+					for (let i = 0; i < program.body.length; i++) if (t.isImportDeclaration(program.body[i])) insertIndex = i + 1;
+					program.body.splice(insertIndex, 0, t.expressionStatement(injectCall));
+				}
+				return;
+			}
 			if (this._fileAddedCSS && cssWriter.size > 0) cssWriter.write();
 		}
 	};
@@ -185,30 +206,30 @@ function extractClassNameFromStaticStyleObject(node) {
 /**
 * Handle tastyStatic(styles) - returns StaticStyle object
 */
-function handleStylesMode(path, args, cssWriter, state, globalRegistry, globalKeyframes, autoPropertyTypes, globalFontFace, globalCounterStyle) {
+function handleStylesMode(path, args, cssWriter, state, globalRegistry, mode, globalKeyframes, autoPropertyTypes, globalFontFace, globalCounterStyle) {
 	const stylesArg = args[0];
 	if (!t.isObjectExpression(stylesArg)) throw path.buildCodeFrameError("tastyStatic(styles) argument must be a static object literal");
 	const styles = resolveRecipes(evaluateObjectExpression(stylesArg, path));
 	const { keyframes, nameMap } = extractKeyframesFromStyles(styles, globalKeyframes);
-	for (const kf of keyframes) cssWriter.add(kf.css, kf.css, state.sourceFile);
 	const properties = extractPropertiesFromStyles(styles, { autoPropertyTypes });
-	for (const prop of properties) cssWriter.add(prop.css, prop.css, state.sourceFile);
-	for (const ff of extractFontFaceFromStyles(styles, globalFontFace)) cssWriter.add(ff.css, ff.css, state.sourceFile);
-	for (const cs of extractCounterStyleFromStyles(styles, globalCounterStyle)) cssWriter.add(cs.css, cs.css, state.sourceFile);
+	const fontFaces = extractFontFaceFromStyles(styles, globalFontFace);
+	const counterStyles = extractCounterStyleFromStyles(styles, globalCounterStyle);
 	const chunks = extractStylesWithChunks(styles);
-	for (const chunk of chunks) {
-		const css = nameMap.size > 0 ? replaceAnimationNamesInCSS(chunk.css, nameMap) : chunk.css;
-		cssWriter.add(chunk.className, css, state.sourceFile);
-	}
 	const className = chunks.length > 0 ? chunks.map((c) => c.className).join(" ") : "";
 	const staticStyleObject = createStaticStyleAST(className, styles);
-	path.replaceWith(staticStyleObject);
+	if (mode === "inject") {
+		const injectCall = createInjectCallAST(className, collectAllCSS(keyframes, properties, fontFaces, counterStyles, chunks, nameMap));
+		path.replaceWith(t.sequenceExpression([injectCall, staticStyleObject]));
+	} else {
+		writeCSSToWriter(cssWriter, keyframes, properties, fontFaces, counterStyles, chunks, nameMap, state.sourceFile);
+		path.replaceWith(staticStyleObject);
+	}
 	registerIfVariableDeclaration(path, className, styles, state, globalRegistry);
 }
 /**
 * Handle tastyStatic(base, styles) - extends base with additional styles
 */
-function handleExtensionMode(path, args, cssWriter, state, globalRegistry, globalKeyframes, autoPropertyTypes, globalFontFace, globalCounterStyle) {
+function handleExtensionMode(path, args, cssWriter, state, globalRegistry, mode, globalKeyframes, autoPropertyTypes, globalFontFace, globalCounterStyle) {
 	if (args.length < 2) throw path.buildCodeFrameError("tastyStatic(base, styles) requires two arguments");
 	const baseArg = args[0];
 	const stylesArg = args[1];
@@ -220,25 +241,25 @@ function handleExtensionMode(path, args, cssWriter, state, globalRegistry, globa
 	const overrideStyles = evaluateObjectExpression(stylesArg, path);
 	const mergedStyles = resolveRecipes(mergeStyles(baseEntry.styles, overrideStyles));
 	const { keyframes, nameMap } = extractKeyframesFromStyles(mergedStyles, globalKeyframes);
-	for (const kf of keyframes) cssWriter.add(kf.css, kf.css, state.sourceFile);
 	const properties = extractPropertiesFromStyles(mergedStyles, { autoPropertyTypes });
-	for (const prop of properties) cssWriter.add(prop.css, prop.css, state.sourceFile);
-	for (const ff of extractFontFaceFromStyles(mergedStyles, globalFontFace)) cssWriter.add(ff.css, ff.css, state.sourceFile);
-	for (const cs of extractCounterStyleFromStyles(mergedStyles, globalCounterStyle)) cssWriter.add(cs.css, cs.css, state.sourceFile);
+	const fontFaces = extractFontFaceFromStyles(mergedStyles, globalFontFace);
+	const counterStyles = extractCounterStyleFromStyles(mergedStyles, globalCounterStyle);
 	const chunks = extractStylesWithChunks(mergedStyles);
-	for (const chunk of chunks) {
-		const css = nameMap.size > 0 ? replaceAnimationNamesInCSS(chunk.css, nameMap) : chunk.css;
-		cssWriter.add(chunk.className, css, state.sourceFile);
-	}
 	const className = chunks.length > 0 ? chunks.map((c) => c.className).join(" ") : "";
 	const staticStyleObject = createStaticStyleAST(className, mergedStyles);
-	path.replaceWith(staticStyleObject);
+	if (mode === "inject") {
+		const injectCall = createInjectCallAST(className, collectAllCSS(keyframes, properties, fontFaces, counterStyles, chunks, nameMap));
+		path.replaceWith(t.sequenceExpression([injectCall, staticStyleObject]));
+	} else {
+		writeCSSToWriter(cssWriter, keyframes, properties, fontFaces, counterStyles, chunks, nameMap, state.sourceFile);
+		path.replaceWith(staticStyleObject);
+	}
 	registerIfVariableDeclaration(path, className, mergedStyles, state, globalRegistry);
 }
 /**
 * Handle tastyStatic(selector, styles) - removes the call entirely
 */
-function handleSelectorMode(path, args, cssWriter, sourceFile, globalKeyframes, autoPropertyTypes, globalFontFace, globalCounterStyle) {
+function handleSelectorMode(path, args, cssWriter, mode, sourceFile, globalKeyframes, autoPropertyTypes, globalFontFace, globalCounterStyle) {
 	if (args.length < 2) throw path.buildCodeFrameError("tastyStatic(selector, styles) requires two arguments");
 	const selectorArg = args[0];
 	const stylesArg = args[1];
@@ -247,17 +268,60 @@ function handleSelectorMode(path, args, cssWriter, sourceFile, globalKeyframes,
 	const selector = selectorArg.value;
 	const styles = resolveRecipes(evaluateObjectExpression(stylesArg, path));
 	const { keyframes, nameMap } = extractKeyframesFromStyles(styles, globalKeyframes);
-	for (const kf of keyframes) cssWriter.add(kf.css, kf.css, sourceFile);
 	const properties = extractPropertiesFromStyles(styles, { autoPropertyTypes });
-	for (const prop of properties) cssWriter.add(prop.css, prop.css, sourceFile);
-	for (const ff of extractFontFaceFromStyles(styles, globalFontFace)) cssWriter.add(ff.css, ff.css, sourceFile);
-	for (const cs of extractCounterStyleFromStyles(styles, globalCounterStyle)) cssWriter.add(cs.css, cs.css, sourceFile);
+	const fontFaces = extractFontFaceFromStyles(styles, globalFontFace);
+	const counterStyles = extractCounterStyleFromStyles(styles, globalCounterStyle);
 	const result = extractStylesForSelector(selector, styles);
-	const css = nameMap.size > 0 ? replaceAnimationNamesInCSS(result.css, nameMap) : result.css;
-	cssWriter.add(selector, css, sourceFile);
-	const parent = path.parentPath;
-	if (parent && t.isExpressionStatement(parent.node)) parent.remove();
-	else path.replaceWith(t.identifier("undefined"));
+	const selectorCSS = nameMap.size > 0 ? replaceAnimationNamesInCSS(result.css, nameMap) : result.css;
+	if (mode === "inject") {
+		const cssParts = [];
+		for (const kf of keyframes) cssParts.push(kf.css);
+		for (const prop of properties) cssParts.push(prop.css);
+		for (const ff of fontFaces) cssParts.push(ff.css);
+		for (const cs of counterStyles) cssParts.push(cs.css);
+		cssParts.push(selectorCSS);
+		const injectCall = createInjectCallAST(selector, cssParts.join("\n"));
+		const parent = path.parentPath;
+		if (parent && t.isExpressionStatement(parent.node)) parent.replaceWith(t.expressionStatement(injectCall));
+		else path.replaceWith(injectCall);
+	} else {
+		writeCSSToWriter(cssWriter, keyframes, properties, fontFaces, counterStyles, [], nameMap, sourceFile);
+		cssWriter.add(selector, selectorCSS, sourceFile);
+		const parent = path.parentPath;
+		if (parent && t.isExpressionStatement(parent.node)) parent.remove();
+		else path.replaceWith(t.identifier("undefined"));
+	}
+}
+/**
+* Collect all extracted CSS parts into a single string (for inject mode).
+*/
+function collectAllCSS(keyframes, properties, fontFaces, counterStyles, chunks, nameMap) {
+	const parts = [];
+	for (const kf of keyframes) parts.push(kf.css);
+	for (const prop of properties) parts.push(prop.css);
+	for (const ff of fontFaces) parts.push(ff.css);
+	for (const cs of counterStyles) parts.push(cs.css);
+	for (const chunk of chunks) parts.push(nameMap.size > 0 ? replaceAnimationNamesInCSS(chunk.css, nameMap) : chunk.css);
+	return parts.join("\n");
+}
+/**
+* Write all extracted CSS parts to a CSSWriter (for file mode).
+*/
+function writeCSSToWriter(cssWriter, keyframes, properties, fontFaces, counterStyles, chunks, nameMap, sourceFile) {
+	for (const kf of keyframes) cssWriter.add(kf.css, kf.css, sourceFile);
+	for (const prop of properties) cssWriter.add(prop.css, prop.css, sourceFile);
+	for (const ff of fontFaces) cssWriter.add(ff.css, ff.css, sourceFile);
+	for (const cs of counterStyles) cssWriter.add(cs.css, cs.css, sourceFile);
+	for (const chunk of chunks) {
+		const css = nameMap.size > 0 ? replaceAnimationNamesInCSS(chunk.css, nameMap) : chunk.css;
+		cssWriter.add(chunk.className, css, sourceFile);
+	}
+}
+/**
+* Create an `_$i(id, css)` call expression AST node for inject mode.
+*/
+function createInjectCallAST(id, css) {
+	return t.callExpression(t.identifier("_$i"), [t.stringLiteral(id), t.stringLiteral(css)]);
 }
 /**
 * Create a StaticStyle object AST node
@@ -368,7 +432,7 @@ function replaceAnimationNamesInCSS(css, nameMap) {
 function escapeRegex(str) {
 	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-
 //#endregion
 export { clearWriterCache, babel_default as default };
+
 //# sourceMappingURL=babel.js.map