@tenphi/tasty 2.11.0 → 2.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/{collector-CW4jZxLo.js → collector-D0cgyN6N.js} +13 -7
- package/dist/collector-D0cgyN6N.js.map +1 -0
- package/dist/{collector-DYA5AOwr.d.ts → collector-yqgjGje7.d.ts} +10 -4
- package/dist/{config-BtK9fUaz.d.ts → config-V0XC9iz_.d.ts} +15 -2
- package/dist/{config-DxBPtu-V.js → config-_cYm9LPl.js} +89 -36
- package/dist/config-_cYm9LPl.js.map +1 -0
- package/dist/core/index.d.ts +4 -4
- package/dist/core/index.js +5 -5
- package/dist/{core-BakA5V89.js → core-DdjoZG0r.js} +26 -12
- package/dist/core-DdjoZG0r.js.map +1 -0
- package/dist/{css-writer-w6bzEFb-.js → css-writer-DTUwLjgD.js} +3 -3
- package/dist/{css-writer-w6bzEFb-.js.map → css-writer-DTUwLjgD.js.map} +1 -1
- package/dist/{format-rules-BAJyIyAZ.js → format-rules-Bu_qoamZ.js} +2 -2
- package/dist/{format-rules-BAJyIyAZ.js.map → format-rules-Bu_qoamZ.js.map} +1 -1
- package/dist/{hydrate-B2BwrnYb.js → hydrate-CKk-rgmY.js} +2 -2
- package/dist/{hydrate-B2BwrnYb.js.map → hydrate-CKk-rgmY.js.map} +1 -1
- package/dist/{index-BYtnj_gA.d.ts → index-BjnGYI5D.d.ts} +15 -7
- package/dist/{index-B9ih23uv.d.ts → index-tRick_JW.d.ts} +12 -1
- package/dist/index.d.ts +4 -4
- package/dist/index.js +122 -51
- package/dist/index.js.map +1 -1
- package/dist/{keyframes-oSX5T5lm.js → keyframes-5LJYS8_P.js} +2 -2
- package/dist/{keyframes-oSX5T5lm.js.map → keyframes-5LJYS8_P.js.map} +1 -1
- package/dist/{merge-styles-RmK1DOSt.js → merge-styles-Blrs8kLM.js} +2 -2
- package/dist/{merge-styles-RmK1DOSt.js.map → merge-styles-Blrs8kLM.js.map} +1 -1
- package/dist/{merge-styles-BZV-XAwX.d.ts → merge-styles-DDss7wRH.d.ts} +2 -2
- package/dist/{resolve-recipes-CxyDLx9x.js → resolve-recipes-DR5cSG3X.js} +3 -3
- package/dist/{resolve-recipes-CxyDLx9x.js.map → resolve-recipes-DR5cSG3X.js.map} +1 -1
- package/dist/ssr/astro-client.js +1 -1
- package/dist/ssr/astro.js +3 -3
- package/dist/ssr/index.d.ts +1 -1
- package/dist/ssr/index.js +3 -3
- package/dist/ssr/next.d.ts +1 -1
- package/dist/ssr/next.js +4 -4
- package/dist/static/index.d.ts +2 -2
- package/dist/static/index.js +4 -4
- package/dist/static/index.js.map +1 -1
- package/dist/zero/babel.d.ts +1 -1
- package/dist/zero/babel.js +4 -4
- package/dist/zero/index.d.ts +1 -1
- package/dist/zero/index.js +1 -1
- package/docs/README.md +1 -0
- package/docs/ai-agents.md +206 -0
- package/docs/injector.md +15 -0
- package/docs/react-api.md +21 -2
- package/package.json +5 -4
- package/dist/collector-CW4jZxLo.js.map +0 -1
- package/dist/config-DxBPtu-V.js.map +0 -1
- package/dist/core-BakA5V89.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-styles-RmK1DOSt.js","names":[],"sources":["../src/utils/merge-styles.ts"],"sourcesContent":["import { isSelector } from '../pipeline';\nimport type { Styles, StylesWithoutSelectors } from '../styles/types';\n\nimport { isDevEnv } from './is-dev-env';\n\nconst devMode = isDevEnv();\n\nconst INHERIT_VALUE = '@inherit';\n\n/**\n * Check if a value is a state map (object, not array).\n */\nfunction isStateMap(value: unknown): value is Record<string, unknown> {\n return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\n/**\n * Normalize a parent value to a state map.\n * - Already a state map → return as-is\n * - Non-null, non-false primitive → wrap as `{ '': value }`\n * - null / undefined / false → return null (no parent to merge with)\n */\nfunction normalizeToStateMap(value: unknown): Record<string, unknown> | null {\n if (isStateMap(value)) return value as Record<string, unknown>;\n if (value != null && value !== false) return { '': value };\n return null;\n}\n\n/**\n * Resolve a child state map against a parent value.\n *\n * Mode is determined by whether the child contains a `''` (default) key:\n * - No `''` → extend mode: parent entries preserved, child adds/overrides/repositions\n * - Has `''` → replace mode: child defines everything, `@inherit` cherry-picks from parent\n *\n * In both modes:\n * - `@inherit` value → resolve from parent state map\n * - `null` value → remove this state from the result\n * - `false` value → tombstone, persists through all layers, blocks recipe\n */\nfunction resolveStateMap(\n parentValue: unknown,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const isExtend = !('' in childMap);\n const parentMap = normalizeToStateMap(parentValue);\n\n if (!parentMap) {\n // No parent to merge with — strip nulls and @inherit, return child entries\n const result: Record<string, unknown> = {};\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === null || val === INHERIT_VALUE) continue;\n result[key] = val;\n }\n return result;\n }\n\n if (isExtend) {\n return resolveExtendMode(parentMap, childMap);\n }\n\n return resolveReplaceMode(parentMap, childMap);\n}\n\n/**\n * Extend mode: parent entries are preserved, child entries add/override/reposition.\n */\nfunction resolveExtendMode(\n parentMap: Record<string, unknown>,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const inheritKeys = new Set<string>();\n const removeKeys = new Set<string>();\n const overrideKeys = new Map<string, unknown>();\n\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === INHERIT_VALUE) {\n if (key in parentMap) {\n inheritKeys.add(key);\n } else if (devMode) {\n console.warn(\n `[Tasty] @inherit used for state '${key}' that does not exist in the parent style map. Entry skipped.`,\n );\n }\n } else if (val === null) {\n removeKeys.add(key);\n } else if (key in parentMap) {\n overrideKeys.set(key, val);\n }\n }\n\n // 1. Parent entries in order (skip removed, skip repositioned, apply overrides)\n const result: Record<string, unknown> = {};\n for (const key of Object.keys(parentMap)) {\n if (removeKeys.has(key)) continue;\n if (inheritKeys.has(key)) continue;\n if (overrideKeys.has(key)) {\n result[key] = overrideKeys.get(key);\n } else {\n result[key] = parentMap[key];\n }\n }\n\n // 2. Append new + repositioned entries in child declaration order\n for (const key of Object.keys(childMap)) {\n if (inheritKeys.has(key)) {\n result[key] = parentMap[key];\n } else if (\n !removeKeys.has(key) &&\n !overrideKeys.has(key) &&\n // Skip @inherit for keys that weren't in the parent (already warned above)\n childMap[key] !== INHERIT_VALUE\n ) {\n result[key] = childMap[key];\n }\n }\n\n return result;\n}\n\n/**\n * Replace mode: child entries define the result, `@inherit` pulls from parent.\n */\nfunction resolveReplaceMode(\n parentMap: Record<string, unknown>,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const result: Record<string, unknown> = {};\n\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === INHERIT_VALUE) {\n if (key in parentMap) {\n result[key] = parentMap[key];\n } else if (devMode) {\n console.warn(\n `[Tasty] @inherit used for state '${key}' that does not exist in the parent style map. Entry skipped.`,\n );\n }\n } else if (val !== null) {\n result[key] = val;\n }\n }\n\n return result;\n}\n\n/**\n * Merge sub-element properties with state map / null / undefined support.\n */\nfunction mergeSubElementStyles(\n parentSub: StylesWithoutSelectors | undefined,\n childSub: StylesWithoutSelectors,\n): StylesWithoutSelectors {\n const parent = parentSub as Record<string, unknown> | undefined;\n const child = childSub as Record<string, unknown>;\n const merged: Record<string, unknown> = { ...parent, ...child };\n\n for (const key of Object.keys(child)) {\n const val = child[key];\n\n if (val === undefined) {\n if (parent && key in parent) {\n merged[key] = parent[key];\n }\n } else if (val === null) {\n delete merged[key];\n } else if (isStateMap(val)) {\n merged[key] = resolveStateMap(\n parent ? parent[key] : undefined,\n val as Record<string, unknown>,\n );\n }\n }\n\n return merged as StylesWithoutSelectors;\n}\n\nexport function mergeStyles(...objects: (Styles | undefined | null)[]): Styles {\n let styles: Styles = objects[0] ? { ...objects[0] } : {};\n let pos = 1;\n\n while (pos in objects) {\n const selectorKeys = Object.keys(styles).filter(\n (key) => isSelector(key) && styles[key],\n );\n const newStyles = objects[pos];\n\n if (newStyles) {\n const resultStyles = { ...styles, ...newStyles };\n\n // Collect all selector keys from both parent and child\n const newSelectorKeys = Object.keys(newStyles).filter(isSelector);\n const allSelectorKeys = new Set([...selectorKeys, ...newSelectorKeys]);\n\n for (const key of allSelectorKeys) {\n const newValue = newStyles?.[key];\n\n if (newValue === false || newValue === null) {\n delete resultStyles[key];\n } else if (newValue === undefined) {\n resultStyles[key] = styles[key];\n } else if (newValue) {\n resultStyles[key] = mergeSubElementStyles(\n styles[key] as StylesWithoutSelectors,\n newValue as StylesWithoutSelectors,\n );\n }\n }\n\n // Handle non-selector properties: state maps, null, undefined\n for (const key of Object.keys(newStyles)) {\n if (isSelector(key)) continue;\n\n const newValue = newStyles[key];\n\n if (newValue === undefined) {\n if (key in styles) {\n resultStyles[key] = styles[key];\n } else {\n delete resultStyles[key];\n }\n } else if (newValue === null) {\n delete resultStyles[key];\n } else if (isStateMap(newValue)) {\n (resultStyles as Record<string, unknown>)[key] = resolveStateMap(\n styles[key],\n newValue as Record<string, unknown>,\n );\n }\n }\n\n styles = resultStyles;\n }\n\n pos++;\n }\n\n return styles;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"merge-styles-Blrs8kLM.js","names":[],"sources":["../src/utils/merge-styles.ts"],"sourcesContent":["import { isSelector } from '../pipeline';\nimport type { Styles, StylesWithoutSelectors } from '../styles/types';\n\nimport { isDevEnv } from './is-dev-env';\n\nconst devMode = isDevEnv();\n\nconst INHERIT_VALUE = '@inherit';\n\n/**\n * Check if a value is a state map (object, not array).\n */\nfunction isStateMap(value: unknown): value is Record<string, unknown> {\n return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\n/**\n * Normalize a parent value to a state map.\n * - Already a state map → return as-is\n * - Non-null, non-false primitive → wrap as `{ '': value }`\n * - null / undefined / false → return null (no parent to merge with)\n */\nfunction normalizeToStateMap(value: unknown): Record<string, unknown> | null {\n if (isStateMap(value)) return value as Record<string, unknown>;\n if (value != null && value !== false) return { '': value };\n return null;\n}\n\n/**\n * Resolve a child state map against a parent value.\n *\n * Mode is determined by whether the child contains a `''` (default) key:\n * - No `''` → extend mode: parent entries preserved, child adds/overrides/repositions\n * - Has `''` → replace mode: child defines everything, `@inherit` cherry-picks from parent\n *\n * In both modes:\n * - `@inherit` value → resolve from parent state map\n * - `null` value → remove this state from the result\n * - `false` value → tombstone, persists through all layers, blocks recipe\n */\nfunction resolveStateMap(\n parentValue: unknown,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const isExtend = !('' in childMap);\n const parentMap = normalizeToStateMap(parentValue);\n\n if (!parentMap) {\n // No parent to merge with — strip nulls and @inherit, return child entries\n const result: Record<string, unknown> = {};\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === null || val === INHERIT_VALUE) continue;\n result[key] = val;\n }\n return result;\n }\n\n if (isExtend) {\n return resolveExtendMode(parentMap, childMap);\n }\n\n return resolveReplaceMode(parentMap, childMap);\n}\n\n/**\n * Extend mode: parent entries are preserved, child entries add/override/reposition.\n */\nfunction resolveExtendMode(\n parentMap: Record<string, unknown>,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const inheritKeys = new Set<string>();\n const removeKeys = new Set<string>();\n const overrideKeys = new Map<string, unknown>();\n\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === INHERIT_VALUE) {\n if (key in parentMap) {\n inheritKeys.add(key);\n } else if (devMode) {\n console.warn(\n `[Tasty] @inherit used for state '${key}' that does not exist in the parent style map. Entry skipped.`,\n );\n }\n } else if (val === null) {\n removeKeys.add(key);\n } else if (key in parentMap) {\n overrideKeys.set(key, val);\n }\n }\n\n // 1. Parent entries in order (skip removed, skip repositioned, apply overrides)\n const result: Record<string, unknown> = {};\n for (const key of Object.keys(parentMap)) {\n if (removeKeys.has(key)) continue;\n if (inheritKeys.has(key)) continue;\n if (overrideKeys.has(key)) {\n result[key] = overrideKeys.get(key);\n } else {\n result[key] = parentMap[key];\n }\n }\n\n // 2. Append new + repositioned entries in child declaration order\n for (const key of Object.keys(childMap)) {\n if (inheritKeys.has(key)) {\n result[key] = parentMap[key];\n } else if (\n !removeKeys.has(key) &&\n !overrideKeys.has(key) &&\n // Skip @inherit for keys that weren't in the parent (already warned above)\n childMap[key] !== INHERIT_VALUE\n ) {\n result[key] = childMap[key];\n }\n }\n\n return result;\n}\n\n/**\n * Replace mode: child entries define the result, `@inherit` pulls from parent.\n */\nfunction resolveReplaceMode(\n parentMap: Record<string, unknown>,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const result: Record<string, unknown> = {};\n\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === INHERIT_VALUE) {\n if (key in parentMap) {\n result[key] = parentMap[key];\n } else if (devMode) {\n console.warn(\n `[Tasty] @inherit used for state '${key}' that does not exist in the parent style map. Entry skipped.`,\n );\n }\n } else if (val !== null) {\n result[key] = val;\n }\n }\n\n return result;\n}\n\n/**\n * Merge sub-element properties with state map / null / undefined support.\n */\nfunction mergeSubElementStyles(\n parentSub: StylesWithoutSelectors | undefined,\n childSub: StylesWithoutSelectors,\n): StylesWithoutSelectors {\n const parent = parentSub as Record<string, unknown> | undefined;\n const child = childSub as Record<string, unknown>;\n const merged: Record<string, unknown> = { ...parent, ...child };\n\n for (const key of Object.keys(child)) {\n const val = child[key];\n\n if (val === undefined) {\n if (parent && key in parent) {\n merged[key] = parent[key];\n }\n } else if (val === null) {\n delete merged[key];\n } else if (isStateMap(val)) {\n merged[key] = resolveStateMap(\n parent ? parent[key] : undefined,\n val as Record<string, unknown>,\n );\n }\n }\n\n return merged as StylesWithoutSelectors;\n}\n\nexport function mergeStyles(...objects: (Styles | undefined | null)[]): Styles {\n let styles: Styles = objects[0] ? { ...objects[0] } : {};\n let pos = 1;\n\n while (pos in objects) {\n const selectorKeys = Object.keys(styles).filter(\n (key) => isSelector(key) && styles[key],\n );\n const newStyles = objects[pos];\n\n if (newStyles) {\n const resultStyles = { ...styles, ...newStyles };\n\n // Collect all selector keys from both parent and child\n const newSelectorKeys = Object.keys(newStyles).filter(isSelector);\n const allSelectorKeys = new Set([...selectorKeys, ...newSelectorKeys]);\n\n for (const key of allSelectorKeys) {\n const newValue = newStyles?.[key];\n\n if (newValue === false || newValue === null) {\n delete resultStyles[key];\n } else if (newValue === undefined) {\n resultStyles[key] = styles[key];\n } else if (newValue) {\n resultStyles[key] = mergeSubElementStyles(\n styles[key] as StylesWithoutSelectors,\n newValue as StylesWithoutSelectors,\n );\n }\n }\n\n // Handle non-selector properties: state maps, null, undefined\n for (const key of Object.keys(newStyles)) {\n if (isSelector(key)) continue;\n\n const newValue = newStyles[key];\n\n if (newValue === undefined) {\n if (key in styles) {\n resultStyles[key] = styles[key];\n } else {\n delete resultStyles[key];\n }\n } else if (newValue === null) {\n delete resultStyles[key];\n } else if (isStateMap(newValue)) {\n (resultStyles as Record<string, unknown>)[key] = resolveStateMap(\n styles[key],\n newValue as Record<string, unknown>,\n );\n }\n }\n\n styles = resultStyles;\n }\n\n pos++;\n }\n\n return styles;\n}\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { b as Styles } from "./index-
|
|
1
|
+
import { b as Styles } from "./index-tRick_JW.js";
|
|
2
2
|
|
|
3
3
|
//#region src/utils/merge-styles.d.ts
|
|
4
4
|
declare function mergeStyles(...objects: (Styles | undefined | null)[]): Styles;
|
|
5
5
|
//#endregion
|
|
6
6
|
export { mergeStyles as t };
|
|
7
|
-
//# sourceMappingURL=merge-styles-
|
|
7
|
+
//# sourceMappingURL=merge-styles-DDss7wRH.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _t as isDevEnv, l as getGlobalRecipes, x as isSelector } from "./config-
|
|
2
|
-
import { t as mergeStyles } from "./merge-styles-
|
|
1
|
+
import { _t as isDevEnv, l as getGlobalRecipes, x as isSelector } from "./config-_cYm9LPl.js";
|
|
2
|
+
import { t as mergeStyles } from "./merge-styles-Blrs8kLM.js";
|
|
3
3
|
//#region src/utils/resolve-recipes.ts
|
|
4
4
|
/**
|
|
5
5
|
* Recipe resolution utility.
|
|
@@ -141,4 +141,4 @@ function resolveRecipes(styles) {
|
|
|
141
141
|
//#endregion
|
|
142
142
|
export { resolveRecipes as t };
|
|
143
143
|
|
|
144
|
-
//# sourceMappingURL=resolve-recipes-
|
|
144
|
+
//# sourceMappingURL=resolve-recipes-DR5cSG3X.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolve-recipes-
|
|
1
|
+
{"version":3,"file":"resolve-recipes-DR5cSG3X.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,SAAS;;;;;;;;;;;;AAkBzB,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,QAA4B;EAAE,MAAM;EAAM,MAAM;CAAK;CAE3D,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,MAAM,UAAU,MAAM,KAAK;CAC3B,IAAI,YAAY,IAAI,OAAO;CAE3B,MAAM,aAAa,QAAQ,QAAQ,GAAG;CAEtC,IAAI,eAAe,IAAI;EACrB,IAAI,YAAY,QAAQ,OAAO;EAE/B,OAAO;GAAE,MADK,WAAW,OACN;GAAG,MAAM;EAAK;CACnC;CAEA,MAAM,WAAW,QAAQ,MAAM,GAAG,UAAU;CAC5C,MAAM,WAAW,QAAQ,MAAM,aAAa,CAAC;CAE7C,OAAO;EACL,MAAM,SAAS,KAAK,MAAM,SAAS,OAAO,WAAW,QAAQ;EAC7D,MAAM,WAAW,QAAQ;CAC3B;AACF;AAEA,SAAS,WAAW,GAA4B;CAC9C,MAAM,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CAC3C,OAAO,MAAM,SAAS,IAAI,QAAQ;AACpC;;;;;AAMA,SAAS,oBACP,OACA,SACyB;CACzB,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,eAAe,QAAQ;EAE7B,IAAI,CAAC,cAAc;GACjB,IAAI,SACF,QAAQ,KACN,mBAAmB,KAAK,yEAE1B;GAEF;EACF;EAEA,SAAS;GAAE,GAAG;GAAQ,GAAI;EAAyC;CACrE;CAEA,OAAO;AACT;;;;;;;AAQA,SAAS,uBACP,QACA,SACgC;CAChC,IAAI,EAAE,YAAY,SAAS,OAAO;CAElC,MAAM,EAAE,MAAM,SAAS,iBAAiB,OAAO,MAAM;CAMrD,MAAM,EAAE,QAAQ,SAAS,GAAG,YAAY;CACxC,MAAM,aAAsC,CAAC;CAC7C,MAAM,iBAA0C,CAAC;CAEjD,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,GACnC,IAAI,WAAW,GAAG,GAChB,eAAe,OAAO,QAAQ;MAE9B,WAAW,OAAO,QAAQ;CAI9B,IAAI,CAAC,QAAQ,CAAC,MACZ,OAAO;CAIT,IAAI;CAEJ,IAAI,MAEF,SAAS,YADU,oBAAoB,MAAM,OACf,GAAa,UAAoB;MAK/D,SAAS,EAAE,GAAG,WAAW;CAI3B,IAAI,MAAM;EACR,MAAM,aAAa,oBAAoB,MAAM,OAAO;EACpD,SAAS,YAAY,QAAkB,UAAoB;CAI7D;CAGA,KAAK,MAAM,OAAO,OAAO,KAAK,cAAc,GAC1C,OAAO,OAAO,eAAe;CAG/B,OAAO;AACT;;;;;;;;;;;AAYA,SAAgB,eAAe,QAAwB;CACrD,MAAM,UAAU,iBAAiB;CAGjC,IAAI,CAAC,SAAS,OAAO;CAErB,IAAI,UAAU;CAGd,MAAM,cAAc,uBAClB,QACA,OACF;CAEA,IAAI;CAEJ,IAAI,aAAa;EACf,UAAU;EACV,SAAS;CACX,OAEE,SAAS;CAIX,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,MAAM,OAAO,MAAM;EACtB,IAAI,CAAC,WAAW,GAAG,GAAG;EAEtB,MAAM,YAAY,OAAO;EAEzB,IACE,CAAC,aACD,OAAO,cAAc,YACrB,MAAM,QAAQ,SAAS,GAEvB;EAGF,MAAM,YAAY;EAElB,IAAI,EAAE,YAAY,YAAY;EAE9B,MAAM,cAAc,uBAAuB,WAAW,OAAO;EAE7D,IAAI,aAAa;GACf,IAAI,CAAC,SAAS;IAEZ,UAAU;IACV,SAAS,EAAE,GAAI,OAAmC;GACpD;GACA,OAAO,OAAO;EAChB;CACF;CAEA,OAAO,UAAW,SAAoB;AACxC"}
|
package/dist/ssr/astro-client.js
CHANGED
package/dist/ssr/astro.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { n as getConfig } from "../config-
|
|
2
|
-
import { a as registerSSRCollectorGetterGlobal } from "../format-rules-
|
|
3
|
-
import { t as ServerStyleCollector } from "../collector-
|
|
1
|
+
import { n as getConfig } from "../config-_cYm9LPl.js";
|
|
2
|
+
import { a as registerSSRCollectorGetterGlobal } from "../format-rules-Bu_qoamZ.js";
|
|
3
|
+
import { t as ServerStyleCollector } from "../collector-D0cgyN6N.js";
|
|
4
4
|
import { n as runWithCollector, t as getSSRCollector } from "../async-storage-DKK-wTD4.js";
|
|
5
5
|
//#region src/ssr/astro.ts
|
|
6
6
|
/**
|
package/dist/ssr/index.d.ts
CHANGED
package/dist/ssr/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { a as registerSSRCollectorGetterGlobal } from "../format-rules-
|
|
2
|
-
import { t as ServerStyleCollector } from "../collector-
|
|
1
|
+
import { a as registerSSRCollectorGetterGlobal } from "../format-rules-Bu_qoamZ.js";
|
|
2
|
+
import { t as ServerStyleCollector } from "../collector-D0cgyN6N.js";
|
|
3
3
|
import { n as runWithCollector, t as getSSRCollector } from "../async-storage-DKK-wTD4.js";
|
|
4
|
-
import { n as hydrateTastyClasses, t as hydrateTastyCache } from "../hydrate-
|
|
4
|
+
import { n as hydrateTastyClasses, t as hydrateTastyCache } from "../hydrate-CKk-rgmY.js";
|
|
5
5
|
//#region src/ssr/index.ts
|
|
6
6
|
registerSSRCollectorGetterGlobal(getSSRCollector);
|
|
7
7
|
//#endregion
|
package/dist/ssr/next.d.ts
CHANGED
package/dist/ssr/next.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { n as getConfig } from "../config-
|
|
3
|
-
import { i as registerSSRCollectorGetter } from "../format-rules-
|
|
2
|
+
import { n as getConfig } from "../config-_cYm9LPl.js";
|
|
3
|
+
import { i as registerSSRCollectorGetter } from "../format-rules-Bu_qoamZ.js";
|
|
4
4
|
import { t as getTastySSRContext } from "../context-CA8YKeMn.js";
|
|
5
|
-
import { t as ServerStyleCollector } from "../collector-
|
|
6
|
-
import { n as hydrateTastyClasses } from "../hydrate-
|
|
5
|
+
import { t as ServerStyleCollector } from "../collector-D0cgyN6N.js";
|
|
6
|
+
import { n as hydrateTastyClasses } from "../hydrate-CKk-rgmY.js";
|
|
7
7
|
import { Fragment, createElement, useState } from "react";
|
|
8
8
|
import { useServerInsertedHTML } from "next/navigation";
|
|
9
9
|
//#region src/ssr/next.ts
|
package/dist/static/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { b as Styles } from "../index-
|
|
2
|
-
import { t as mergeStyles } from "../merge-styles-
|
|
1
|
+
import { b as Styles } from "../index-tRick_JW.js";
|
|
2
|
+
import { t as mergeStyles } from "../merge-styles-DDss7wRH.js";
|
|
3
3
|
|
|
4
4
|
//#region src/static/types.d.ts
|
|
5
5
|
/**
|
package/dist/static/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as mergeStyles } from "../merge-styles-
|
|
1
|
+
import { t as mergeStyles } from "../merge-styles-Blrs8kLM.js";
|
|
2
2
|
//#region src/static/types.ts
|
|
3
3
|
/**
|
|
4
4
|
* Create a StaticStyle object.
|
|
@@ -34,14 +34,14 @@ function isStaticStyle(value) {
|
|
|
34
34
|
*/
|
|
35
35
|
function tastyStatic(stylesOrBaseOrSelector, styles) {
|
|
36
36
|
if (typeof stylesOrBaseOrSelector === "string") {
|
|
37
|
-
console.warn(`[
|
|
37
|
+
console.warn(`[Tasty] tastyStatic('${stylesOrBaseOrSelector}', styles) was called at runtime. This indicates the Babel plugin is not configured. Add @tenphi/tasty/babel-plugin to your Babel config.`);
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
40
|
if (isStaticStyle(stylesOrBaseOrSelector)) {
|
|
41
|
-
console.warn("[
|
|
41
|
+
console.warn("[Tasty] tastyStatic(base, styles) was called at runtime. This indicates the Babel plugin is not configured. Add @tenphi/tasty/babel-plugin to your Babel config.");
|
|
42
42
|
return createStaticStyle("__TASTY_STATIC_NOT_TRANSFORMED__", mergeStyles(stylesOrBaseOrSelector.styles, styles || {}));
|
|
43
43
|
}
|
|
44
|
-
console.warn("[
|
|
44
|
+
console.warn("[Tasty] tastyStatic(styles) was called at runtime. This indicates the Babel plugin is not configured. Add @tenphi/tasty/babel-plugin to your Babel config.");
|
|
45
45
|
return createStaticStyle("__TASTY_STATIC_NOT_TRANSFORMED__", stylesOrBaseOrSelector);
|
|
46
46
|
}
|
|
47
47
|
//#endregion
|
package/dist/static/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/static/types.ts","../../src/static/tastyStatic.ts"],"sourcesContent":["import type { Styles } from '../styles/types';\n\n/**\n * Static style definition returned by tastyStatic().\n *\n * Supports both explicit className access and implicit string coercion via toString().\n *\n * @example\n * ```typescript\n * const button = tastyStatic({ fill: '#blue' });\n *\n * // Both work in JSX:\n * <div className={button} /> // Uses toString()\n * <div className={button.className} /> // Explicit\n *\n * // Extension:\n * const primary = tastyStatic(button, { fill: '#purple' });\n * ```\n */\nexport interface StaticStyle {\n /**\n * Generated className(s) for use in JSX.\n * May contain multiple space-separated class names due to chunking.\n */\n className: string;\n\n /**\n * The original (or merged) styles object.\n * Available for extension via tastyStatic(base, overrides).\n */\n styles: Styles;\n\n /**\n * Returns className for implicit string coercion.\n * Enables `<div className={button} />` syntax.\n */\n toString(): string;\n}\n\n/**\n * Create a StaticStyle object.\n * Used internally by the Babel plugin to generate output.\n */\nexport function createStaticStyle(\n className: string,\n styles: Styles,\n): StaticStyle {\n return {\n className,\n styles,\n toString() {\n return this.className;\n },\n };\n}\n\n/**\n * Type guard to check if a value is a StaticStyle object.\n */\nexport function isStaticStyle(value: unknown): value is StaticStyle {\n return (\n typeof value === 'object' &&\n value !== null &&\n 'className' in value &&\n 'styles' in value &&\n 'toString' in value &&\n typeof (value as StaticStyle).className === 'string' &&\n typeof (value as StaticStyle).styles === 'object'\n );\n}\n","import type { Styles } from '../styles/types';\nimport { mergeStyles } from '../utils/merge-styles';\n\nimport type { StaticStyle } from './types';\nimport { createStaticStyle, isStaticStyle } from './types';\n\n/**\n * Generate styles and return a StaticStyle object.\n * The object has `className`, `styles`, and `toString()`.\n *\n * @example\n * ```typescript\n * const button = tastyStatic({\n * fill: '#blue',\n * padding: '2x',\n * });\n * // After build: { className: 'ts3f2a1b', styles: {...}, toString() }\n *\n * <div className={button} /> // Works via toString()\n * ```\n */\nexport function tastyStatic(styles: Styles): StaticStyle;\n\n/**\n * Extend an existing StaticStyle with additional styles.\n * Uses mergeStyles() internally for proper nested selector handling.\n *\n * @example\n * ```typescript\n * const button = tastyStatic({ fill: '#blue' });\n * const primary = tastyStatic(button, { fill: '#purple' });\n * // After build: { className: 'ts8c4d2e', styles: {...merged...}, toString() }\n * ```\n */\nexport function tastyStatic(base: StaticStyle, styles: Styles): StaticStyle;\n\n/**\n * Generate styles for a specific CSS selector.\n * The call is completely removed after build transformation.\n *\n * @example\n * ```typescript\n * tastyStatic('.heading', { preset: 'h1', color: '#primary' });\n * // After build: (removed)\n * ```\n */\nexport function tastyStatic(selector: string, styles: Styles): void;\n\n/**\n * Build-time only function for zero-runtime static site generation.\n *\n * This function is transformed by the Babel plugin:\n * - `tastyStatic(styles)` → StaticStyle object with className\n * - `tastyStatic(base, styles)` → StaticStyle object with merged styles\n * - `tastyStatic(selector, styles)` → removed entirely\n *\n * At runtime (during development/build), this function returns a placeholder.\n * In production, all calls are replaced/removed by the build plugin.\n */\nexport function tastyStatic(\n stylesOrBaseOrSelector: Styles | StaticStyle | string,\n styles?: Styles,\n): StaticStyle | void {\n // This code only executes if the Babel plugin hasn't processed the file yet.\n // In a properly configured build, this function is never called at runtime.\n\n if (typeof stylesOrBaseOrSelector === 'string') {\n // Selector mode: tastyStatic(selector, styles)\n // The plugin will remove this call entirely\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n `[
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/static/types.ts","../../src/static/tastyStatic.ts"],"sourcesContent":["import type { Styles } from '../styles/types';\n\n/**\n * Static style definition returned by tastyStatic().\n *\n * Supports both explicit className access and implicit string coercion via toString().\n *\n * @example\n * ```typescript\n * const button = tastyStatic({ fill: '#blue' });\n *\n * // Both work in JSX:\n * <div className={button} /> // Uses toString()\n * <div className={button.className} /> // Explicit\n *\n * // Extension:\n * const primary = tastyStatic(button, { fill: '#purple' });\n * ```\n */\nexport interface StaticStyle {\n /**\n * Generated className(s) for use in JSX.\n * May contain multiple space-separated class names due to chunking.\n */\n className: string;\n\n /**\n * The original (or merged) styles object.\n * Available for extension via tastyStatic(base, overrides).\n */\n styles: Styles;\n\n /**\n * Returns className for implicit string coercion.\n * Enables `<div className={button} />` syntax.\n */\n toString(): string;\n}\n\n/**\n * Create a StaticStyle object.\n * Used internally by the Babel plugin to generate output.\n */\nexport function createStaticStyle(\n className: string,\n styles: Styles,\n): StaticStyle {\n return {\n className,\n styles,\n toString() {\n return this.className;\n },\n };\n}\n\n/**\n * Type guard to check if a value is a StaticStyle object.\n */\nexport function isStaticStyle(value: unknown): value is StaticStyle {\n return (\n typeof value === 'object' &&\n value !== null &&\n 'className' in value &&\n 'styles' in value &&\n 'toString' in value &&\n typeof (value as StaticStyle).className === 'string' &&\n typeof (value as StaticStyle).styles === 'object'\n );\n}\n","import type { Styles } from '../styles/types';\nimport { mergeStyles } from '../utils/merge-styles';\n\nimport type { StaticStyle } from './types';\nimport { createStaticStyle, isStaticStyle } from './types';\n\n/**\n * Generate styles and return a StaticStyle object.\n * The object has `className`, `styles`, and `toString()`.\n *\n * @example\n * ```typescript\n * const button = tastyStatic({\n * fill: '#blue',\n * padding: '2x',\n * });\n * // After build: { className: 'ts3f2a1b', styles: {...}, toString() }\n *\n * <div className={button} /> // Works via toString()\n * ```\n */\nexport function tastyStatic(styles: Styles): StaticStyle;\n\n/**\n * Extend an existing StaticStyle with additional styles.\n * Uses mergeStyles() internally for proper nested selector handling.\n *\n * @example\n * ```typescript\n * const button = tastyStatic({ fill: '#blue' });\n * const primary = tastyStatic(button, { fill: '#purple' });\n * // After build: { className: 'ts8c4d2e', styles: {...merged...}, toString() }\n * ```\n */\nexport function tastyStatic(base: StaticStyle, styles: Styles): StaticStyle;\n\n/**\n * Generate styles for a specific CSS selector.\n * The call is completely removed after build transformation.\n *\n * @example\n * ```typescript\n * tastyStatic('.heading', { preset: 'h1', color: '#primary' });\n * // After build: (removed)\n * ```\n */\nexport function tastyStatic(selector: string, styles: Styles): void;\n\n/**\n * Build-time only function for zero-runtime static site generation.\n *\n * This function is transformed by the Babel plugin:\n * - `tastyStatic(styles)` → StaticStyle object with className\n * - `tastyStatic(base, styles)` → StaticStyle object with merged styles\n * - `tastyStatic(selector, styles)` → removed entirely\n *\n * At runtime (during development/build), this function returns a placeholder.\n * In production, all calls are replaced/removed by the build plugin.\n */\nexport function tastyStatic(\n stylesOrBaseOrSelector: Styles | StaticStyle | string,\n styles?: Styles,\n): StaticStyle | void {\n // This code only executes if the Babel plugin hasn't processed the file yet.\n // In a properly configured build, this function is never called at runtime.\n\n if (typeof stylesOrBaseOrSelector === 'string') {\n // Selector mode: tastyStatic(selector, styles)\n // The plugin will remove this call entirely\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n `[Tasty] tastyStatic('${stylesOrBaseOrSelector}', styles) was called at runtime. ` +\n 'This indicates the Babel plugin is not configured. ' +\n 'Add @tenphi/tasty/babel-plugin to your Babel config.',\n );\n }\n return; // void\n }\n\n if (isStaticStyle(stylesOrBaseOrSelector)) {\n // Extension mode: tastyStatic(base, styles)\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n '[Tasty] tastyStatic(base, styles) was called at runtime. ' +\n 'This indicates the Babel plugin is not configured. ' +\n 'Add @tenphi/tasty/babel-plugin to your Babel config.',\n );\n }\n // Merge styles for dev mode preview (won't have real classNames)\n const mergedStyles = mergeStyles(\n stylesOrBaseOrSelector.styles,\n styles || {},\n );\n return createStaticStyle('__TASTY_STATIC_NOT_TRANSFORMED__', mergedStyles);\n }\n\n // Styles mode: tastyStatic(styles)\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n '[Tasty] tastyStatic(styles) was called at runtime. ' +\n 'This indicates the Babel plugin is not configured. ' +\n 'Add @tenphi/tasty/babel-plugin to your Babel config.',\n );\n }\n\n // Return placeholder - styles won't be applied without the plugin\n return createStaticStyle(\n '__TASTY_STATIC_NOT_TRANSFORMED__',\n stylesOrBaseOrSelector,\n );\n}\n"],"mappings":";;;;;;AA2CA,SAAgB,kBACd,WACA,QACa;CACb,OAAO;EACL;EACA;EACA,WAAW;GACT,OAAO,KAAK;EACd;CACF;AACF;;;;AAKA,SAAgB,cAAc,OAAsC;CAClE,OACE,OAAO,UAAU,YACjB,UAAU,QACV,eAAe,SACf,YAAY,SACZ,cAAc,SACd,OAAQ,MAAsB,cAAc,YAC5C,OAAQ,MAAsB,WAAW;AAE7C;;;;;;;;;;;;;;ACVA,SAAgB,YACd,wBACA,QACoB;CAIpB,IAAI,OAAO,2BAA2B,UAAU;EAI5C,QAAQ,KACN,wBAAwB,uBAAuB,0IAGjD;EAEF;CACF;CAEA,IAAI,cAAc,sBAAsB,GAAG;EAGvC,QAAQ,KACN,kKAGF;EAOF,OAAO,kBAAkB,oCAJJ,YACnB,uBAAuB,QACvB,UAAU,CAAC,CAE2D,CAAC;CAC3E;CAIE,QAAQ,KACN,4JAGF;CAIF,OAAO,kBACL,oCACA,sBACF;AACF"}
|
package/dist/zero/babel.d.ts
CHANGED
package/dist/zero/babel.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { i as getGlobalConfigTokens, t as configure, u as getGlobalStyles, v as resetConfig } from "../config-
|
|
2
|
-
import { t as mergeStyles } from "../merge-styles-
|
|
3
|
-
import { t as resolveRecipes } from "../resolve-recipes-
|
|
4
|
-
import { a as extractPropertiesFromStyles, c as setExtractorNamePrefix, i as extractKeyframesFromStyles, n as extractCounterStyleFromStyles, o as extractStylesForSelector, r as extractFontFaceFromStyles, s as extractStylesWithChunks, t as CSSWriter } from "../css-writer-
|
|
1
|
+
import { i as getGlobalConfigTokens, t as configure, u as getGlobalStyles, v as resetConfig } from "../config-_cYm9LPl.js";
|
|
2
|
+
import { t as mergeStyles } from "../merge-styles-Blrs8kLM.js";
|
|
3
|
+
import { t as resolveRecipes } from "../resolve-recipes-DR5cSG3X.js";
|
|
4
|
+
import { a as extractPropertiesFromStyles, c as setExtractorNamePrefix, i as extractKeyframesFromStyles, n as extractCounterStyleFromStyles, o as extractStylesForSelector, r as extractFontFaceFromStyles, s as extractStylesWithChunks, t as CSSWriter } from "../css-writer-DTUwLjgD.js";
|
|
5
5
|
import * as fs from "fs";
|
|
6
6
|
import * as path from "path";
|
|
7
7
|
import { declare } from "@babel/helper-plugin-utils";
|
package/dist/zero/index.d.ts
CHANGED
package/dist/zero/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { o as extractStylesForSelector, s as extractStylesWithChunks, t as CSSWriter } from "../css-writer-
|
|
1
|
+
import { o as extractStylesForSelector, s as extractStylesWithChunks, t as CSSWriter } from "../css-writer-DTUwLjgD.js";
|
|
2
2
|
export { CSSWriter, extractStylesForSelector, extractStylesWithChunks };
|
package/docs/README.md
CHANGED
|
@@ -24,6 +24,7 @@ Tasty is a styling engine for design systems that turns component state into det
|
|
|
24
24
|
## By Task
|
|
25
25
|
|
|
26
26
|
- **Learn the style language**: [Style DSL](dsl.md)
|
|
27
|
+
- **Brief an AI agent (or yourself) on writing correct styles**: [Style Rules for AI Agents](ai-agents.md)
|
|
27
28
|
- **Look up a property handler**: [Style Properties](styles.md)
|
|
28
29
|
- **Define tokens, units, recipes, keyframes, or properties globally**: [Configuration](configuration.md)
|
|
29
30
|
- **Debug generated CSS or cache behavior**: [Debug Utilities](debug.md)
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
# Tasty Style Rules for AI Agents
|
|
2
|
+
|
|
3
|
+
A compact ruleset for **writing correct `@tenphi/tasty` styles**. It is not an API tour — every rule here is machine-checked by [`@tenphi/eslint-plugin-tasty`](https://www.npmjs.com/package/@tenphi/eslint-plugin-tasty), so following it means clean lint output. For explanations and the complete API, see [Style DSL](dsl.md), [Style Properties](styles.md), [React API](react-api.md).
|
|
4
|
+
|
|
5
|
+
Notation: ❌ wrong → ✅ correct.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 0. Read the project config first
|
|
10
|
+
|
|
11
|
+
Color tokens (`#name`), custom properties (`$name`), `preset` names, `recipe` names, state aliases (`@mobile`) and extra units are **project-defined** in `tasty.config.ts` or a `configure({ … })` call. Look them up before writing styles. Never invent a name — reuse an existing one, or add it to the config.
|
|
12
|
+
|
|
13
|
+
## 1. Where styles go
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
const Card = tasty({ as: 'div', styles: { … }, styleProps: ['padding'] }); // new component
|
|
17
|
+
const Hero = tasty(Card, { styles: { … } }); // extend a component
|
|
18
|
+
const cls = useStyles({ … }); // ad-hoc class name
|
|
19
|
+
tastyStatic('.card', { … }); // build-time, zero runtime
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
- Wrap, don't pass styles per instance: ❌ `<Box styles={{ padding: '2x' }} />` → ✅ `const Box = tasty({ styles: { padding: '2x' } })`.
|
|
23
|
+
- Style values are **static**. Route anything conditional through a state map plus `mods` (or `tokens` / `styleProps`):
|
|
24
|
+
❌ `fill: isOpen ? '#primary' : '#surface'` → ✅ `fill: { '': '#surface', open: '#primary' }` with `mods={{ open: isOpen }}`.
|
|
25
|
+
|
|
26
|
+
## 2. Property names
|
|
27
|
+
|
|
28
|
+
Keys are camelCase — a Tasty property or a real CSS property. No kebab-case, no invented names.
|
|
29
|
+
|
|
30
|
+
Prefer the Tasty shorthand over its CSS equivalents:
|
|
31
|
+
|
|
32
|
+
| Use | Instead of |
|
|
33
|
+
|-----|------------|
|
|
34
|
+
| `fill` | `backgroundColor`, `background` |
|
|
35
|
+
| `image` | `backgroundImage` |
|
|
36
|
+
| `border` | `borderColor`, `borderWidth`, `borderStyle`, `borderTop`/`Right`/`Bottom`/`Left` |
|
|
37
|
+
| `radius` | `borderRadius` |
|
|
38
|
+
| `outline` | `outlineColor`, `outlineWidth`, `outlineStyle`, `outlineOffset` |
|
|
39
|
+
| `shadow` | `boxShadow` |
|
|
40
|
+
| `padding` | `paddingTop`/`Right`/`Bottom`/`Left` |
|
|
41
|
+
| `margin` | `marginTop`/`Right`/`Bottom`/`Left` |
|
|
42
|
+
| `inset` | `top`, `right`, `bottom`, `left` |
|
|
43
|
+
| `width` / `height` | `minWidth`/`maxWidth`, `minHeight`/`maxHeight` |
|
|
44
|
+
| `flow` | `flexDirection`, `flexWrap`, `flexFlow`, `gridAutoFlow` |
|
|
45
|
+
| `preset` | `fontSize`, `lineHeight`, `letterSpacing`, `fontWeight`, `fontStyle`, `textTransform` |
|
|
46
|
+
| `font` | `fontFamily` |
|
|
47
|
+
| `scrollbar` | `scrollbarWidth`, `scrollbarColor`, `scrollbarGutter` |
|
|
48
|
+
| `gridColumns` / `gridRows` / `gridAreas` | `gridTemplateColumns` / `Rows` / `Areas` |
|
|
49
|
+
| `textOverflow: 'ellipsis / 3'` | `lineClamp` |
|
|
50
|
+
| `hide: true` | `display: 'none'` |
|
|
51
|
+
| `flexGrow` / `flexShrink` / `flexBasis` | `flex` |
|
|
52
|
+
|
|
53
|
+
The last row goes the other way — longhands over the shorthand — because `flex` is lossy: it resets the components you omit to non-initial values (`flex: '0'` silently sets `flex-basis: 0%`) and cannot express `flexShrink: 0` at all. The longhands also carry separate state maps.
|
|
54
|
+
|
|
55
|
+
## 3. Values
|
|
56
|
+
|
|
57
|
+
### Tokens
|
|
58
|
+
|
|
59
|
+
| Syntax | Meaning |
|
|
60
|
+
|--------|---------|
|
|
61
|
+
| `#name` | color token → `var(--name-color)` |
|
|
62
|
+
| `#name.50` | token at 50% opacity (`0`–`100`) |
|
|
63
|
+
| `#name.$opacity` | opacity from a custom property |
|
|
64
|
+
| `#clear` / `#current` | `transparent` / `currentcolor` |
|
|
65
|
+
| `$name` | custom property → `var(--name)` |
|
|
66
|
+
| `(#a, #b)` | fallback chain |
|
|
67
|
+
| `$$name` / `##name` | the property *name* — only inside `transition` |
|
|
68
|
+
|
|
69
|
+
- ❌ `#f5f5f5`, `rgb(0 0 0)`, `oklch(…)`, `okhsl(…)`, `red` → ✅ `#surface` (add the token to the config if it doesn't exist).
|
|
70
|
+
- ❌ `var(--gap)` → ✅ `$gap` · ❌ `$accent-color` → ✅ `#accent` · ❌ `transparent` → ✅ `#clear` · ❌ `currentColor` → ✅ `#current`.
|
|
71
|
+
- A `$name` must be declared as a `'$name': value` key in the same styles object, or in the config.
|
|
72
|
+
|
|
73
|
+
### Units
|
|
74
|
+
|
|
75
|
+
Tasty units: `x` (gap multiple), `r` (radius), `cr` (card radius), `bw` (border width), `ow` (outline width), `sf` (`minmax(0, Nfr)`). All CSS units work too, plus anything in `units` in the config. Any other unit is an error.
|
|
76
|
+
|
|
77
|
+
Prefer units over raw pixels: `8px` → `1x` … `64px` → `8x`; `radius: '6px'` → `'1r'`; `border: '1px …'` → `'1bw …'`.
|
|
78
|
+
|
|
79
|
+
### Math
|
|
80
|
+
|
|
81
|
+
❌ `calc(100% - 2x)` → ✅ `(100% - 2x)`. Parentheses are wrapped in `calc()` automatically — and must be balanced.
|
|
82
|
+
|
|
83
|
+
### `true`
|
|
84
|
+
|
|
85
|
+
`true` means "the design-system default" and is accepted **only** by: `border`, `radius`, `outline`, `shadow`, `padding`, `margin`, `gap`, `inset`, `width`, `height`, `fill`, `color`, `preset`, `font`, `scrollbar`, `hide`. Anywhere else it is an error.
|
|
86
|
+
|
|
87
|
+
### `!important`
|
|
88
|
+
|
|
89
|
+
Never use it. Tasty owns specificity through doubled selectors and state ordering; `!important` breaks that. Express the exception as a state instead.
|
|
90
|
+
|
|
91
|
+
### Modifiers
|
|
92
|
+
|
|
93
|
+
A value is `[values…] [modifiers…]`, and several groups can be comma-separated (later groups override earlier ones). Only the modifiers a property knows are valid:
|
|
94
|
+
|
|
95
|
+
| Property | Modifiers |
|
|
96
|
+
|----------|-----------|
|
|
97
|
+
| `padding`, `margin`, `inset`, `fade` | `top` `right` `bottom` `left` |
|
|
98
|
+
| `border` | the four directions + `solid` `dashed` `dotted` `double` `groove` `ridge` `inset` `outset` `none` `hidden` |
|
|
99
|
+
| `outline` | the style keywords above |
|
|
100
|
+
| `radius` | `top` `right` `bottom` `left` + shapes `round` `ellipse` `leaf` `backleaf` |
|
|
101
|
+
| `width`, `height` | `min` `max` `fixed` |
|
|
102
|
+
| `flow` | `row` `column` `row-reverse` `column-reverse` `wrap` `nowrap` `dense` |
|
|
103
|
+
| `overflow` | `visible` `hidden` `scroll` `clip` `auto` `overlay` |
|
|
104
|
+
| `position` | `static` `relative` `absolute` `fixed` `sticky` |
|
|
105
|
+
| `shadow` | `inset` |
|
|
106
|
+
| `preset` | `name / strong` (or `bold`) `italic` `icon` `tight` |
|
|
107
|
+
| box properties | `longhand` — emit CSS longhands instead of the shorthand |
|
|
108
|
+
|
|
109
|
+
Directional modifiers beat placeholder zeros:
|
|
110
|
+
|
|
111
|
+
- ❌ `padding: '0 0 2x 0'` → ✅ `padding: '2x bottom'`
|
|
112
|
+
- ❌ `padding: '1x 1x 2x 1x'` → ✅ `padding: '1x, 2x bottom'`
|
|
113
|
+
- ❌ `border: '0 0 1bw 0'` — four tokens parse as *one* border value, so this renders no border at all → ✅ `border: '1bw bottom'`
|
|
114
|
+
|
|
115
|
+
Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, `tabSize`, `paddingInline`, `paddingBlock`. `fill` and `color` take a color (plus `none` / `transparent`); `caretColor` and `accentColor` take a color only.
|
|
116
|
+
|
|
117
|
+
### `transition`
|
|
118
|
+
|
|
119
|
+
Use semantic names, not CSS property names: `fade` `fill` `color` `theme` `border` `radius` `shadow` `outline` `preset` `text` `gap` `opacity` `translate` `rotate` `scale` `filter` `image` `background` `width` `height` `zIndex` `inset` `flow` `dimension`.
|
|
120
|
+
|
|
121
|
+
❌ `transition: 'background-color 0.2s'` → ✅ `transition: 'fill 0.2s'`
|
|
122
|
+
|
|
123
|
+
## 4. State maps
|
|
124
|
+
|
|
125
|
+
A property value can be an object of `state: value`. Key order is priority — later keys win.
|
|
126
|
+
|
|
127
|
+
| Key | Generated selector |
|
|
128
|
+
|-----|--------------------|
|
|
129
|
+
| `hovered` | `[data-hovered]` (boolean modifier from `mods`) |
|
|
130
|
+
| `theme=danger` | `[data-theme="danger"]` (value modifier) |
|
|
131
|
+
| `:hover` | pseudo-class |
|
|
132
|
+
| `.active` | class selector |
|
|
133
|
+
| `[aria-expanded="true"]` | attribute selector |
|
|
134
|
+
| `hovered & .active` | AND |
|
|
135
|
+
| `hovered \| focused` | OR (`,` also means OR) |
|
|
136
|
+
| `!disabled` | NOT |
|
|
137
|
+
| `hovered ^ focused` | XOR — exactly one (keep chains ≤ 4 operands) |
|
|
138
|
+
|
|
139
|
+
Precedence `!` > `^` > `|` > `&`; use parentheses to override.
|
|
140
|
+
|
|
141
|
+
Rules:
|
|
142
|
+
|
|
143
|
+
1. **`''` comes first.** The bare default is the lowest-priority state; placing it later would override everything above it.
|
|
144
|
+
2. **Every state map needs `''` or `_`** — except when extending (`tasty(Parent, …)`), where omitting `''` merges into the parent's states and including `''` replaces them wholesale.
|
|
145
|
+
3. **`_` is standalone-only** and always first (with `''` right after it, if present). `_` is a never-negated fallback floor for cases where a higher-priority branch may be *unknown* (`@supports`, container queries). If a map contains only `_` and `''`, drop the `''`.
|
|
146
|
+
4. **No nested maps:** ❌ `{ hovered: { pressed: 'x' } }` → ✅ `{ 'hovered & pressed': 'x' }`
|
|
147
|
+
5. **State keys never sit at the top level** of a styles object — `:hover`, `.active`, `[open]` belong inside a property value.
|
|
148
|
+
|
|
149
|
+
```jsx
|
|
150
|
+
color: { '': '#text', hovered: '#accent', disabled: '#text.40' }
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
Advanced states:
|
|
154
|
+
|
|
155
|
+
| Prefix | Use | Example |
|
|
156
|
+
|--------|-----|---------|
|
|
157
|
+
| `@media(…)` | media query; dimensions `w` `h`; types `@media:print` `:screen` `:all` `:speech` | `@media(w < 768px)`, `@media(600px <= w < 1200px)` |
|
|
158
|
+
| `@(…)` | container query; dimensions `w` `h` `is` `bs` | `@(layout, w >= 600px)`, `@($variant=primary)` |
|
|
159
|
+
| `@supports(…)` | feature query; `$` first argument tests a selector | `@supports(display: grid)`, `@supports($, :has(*))` |
|
|
160
|
+
| `@root(…)` | condition on `:root` | `@root(schema=dark)` |
|
|
161
|
+
| `@parent(…)` | condition on an ancestor; `, >` for the direct parent | `@parent(hovered, >)` |
|
|
162
|
+
| `@own(…)` | a sub-element's own state — **only inside sub-element styles** | `@own(:hover)` |
|
|
163
|
+
| `@starting` | `@starting-style` entry animation | `@starting` |
|
|
164
|
+
| `@name` | project state alias | `@mobile` |
|
|
165
|
+
|
|
166
|
+
- At root level write the selector directly: ❌ `'@own(:hover)'` → ✅ `':hover'`.
|
|
167
|
+
- `@name` aliases must exist in `states` in the config or be declared locally as an `'@name': '<state expression>'` key; alias keys start with `@` and their value must be a valid state expression.
|
|
168
|
+
- `:is()` / `:has()` / `:not()` / `:where()` work in state keys but support at most 2 levels of nested parentheses, and `:has()` is expensive — prefer `@parent()`, `@own()` and modifiers.
|
|
169
|
+
|
|
170
|
+
When extending a parent's state map: `'@inherit'` reuses the parent's value for that state, `null` removes a state (or resets a property, letting recipes fill in), `false` is a tombstone that blocks it entirely.
|
|
171
|
+
|
|
172
|
+
## 5. Sub-elements
|
|
173
|
+
|
|
174
|
+
A **capitalized** key targets `[data-element="Name"]`, and its value must be a style object.
|
|
175
|
+
|
|
176
|
+
```jsx
|
|
177
|
+
styles: { Title: { preset: 'h3' }, Icon: { $: '>@:last-child', color: '#accent' } }
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
❌ nested-selector keys (`'& .title'`, `'&:hover'`) → ✅ sub-elements and state maps. Use the `$` affix property inside a sub-element to control how its selector attaches (`>` direct child, `@` placeholder for the element itself, `&::before` for a root pseudo-element).
|
|
181
|
+
|
|
182
|
+
## 6. Special top-level keys
|
|
183
|
+
|
|
184
|
+
| Key | Shape |
|
|
185
|
+
|-----|-------|
|
|
186
|
+
| `@keyframes` | `{ name: { '0%': styles, … } }` |
|
|
187
|
+
| `@properties` | `{ '$name': { syntax, inherits, initialValue } }` |
|
|
188
|
+
| `@fontFace` | `{ 'Family Name': descriptors \| descriptors[] }` |
|
|
189
|
+
| `@counterStyle` | `{ name: descriptors }` |
|
|
190
|
+
| `recipe` | a **string** of configured recipe names: `'card elevated'`, `'reset input / autofill'`, `'none / disabled'` |
|
|
191
|
+
|
|
192
|
+
## 7. `tastyStatic()`
|
|
193
|
+
|
|
194
|
+
The selector must be a string literal and valid CSS. Values must be static — strings, numbers, booleans, `null`, or objects/arrays of those. No variables, template literals, function calls, or spreads.
|
|
195
|
+
|
|
196
|
+
## 8. Checklist
|
|
197
|
+
|
|
198
|
+
- Token, preset, recipe, unit and `@alias` names exist in the project config.
|
|
199
|
+
- Tasty shorthand chosen over CSS longhands; `flexGrow`/`flexShrink`/`flexBasis` over `flex`; `hide: true` over `display: 'none'`.
|
|
200
|
+
- Colors are `#tokens`, not hex/rgb/oklch/named; `$prop` not `var(--prop)`.
|
|
201
|
+
- Spacing uses `x`/`r`/`bw`/`ow` units; math uses `(…)`, not `calc(…)`.
|
|
202
|
+
- `true` only on the properties that accept it; no `!important`.
|
|
203
|
+
- Modifiers valid for the property; directional shorthand instead of placeholder zeros.
|
|
204
|
+
- Every state map starts with `''` (or `_`), is flat, and lives inside a property value.
|
|
205
|
+
- `@own()` only inside sub-elements; sub-element keys are capitalized and hold objects.
|
|
206
|
+
- Values are static; dynamic behavior comes from `mods` / `tokens` / `styleProps`.
|
package/docs/injector.md
CHANGED
|
@@ -226,6 +226,21 @@ configure({
|
|
|
226
226
|
- `devMode`: Automatically enabled in development environments (detected via `isDevEnv()`)
|
|
227
227
|
- `forceTextInjection`: Automatically enabled in test environments (Jest, Vitest, Mocha, happy-dom, jsdom)
|
|
228
228
|
|
|
229
|
+
**Injection Modes:**
|
|
230
|
+
|
|
231
|
+
Each sheet picks its write mode once, when it is created, and keeps it for its
|
|
232
|
+
lifetime:
|
|
233
|
+
|
|
234
|
+
| Mode | How rules are written | How rules are removed |
|
|
235
|
+
|---|---|---|
|
|
236
|
+
| CSSOM (default) | `styleSheet.insertRule(rule, index)` | `styleSheet.deleteRule(index)` |
|
|
237
|
+
| Text (`forceTextInjection`, or when `styleElement.sheet` is unavailable) | appended to `<style>.textContent` | rule texts are tracked per sheet and the element's text is rebuilt without them |
|
|
238
|
+
| Adopted (ShadowRoot with constructable sheets) | `insertRule` on the constructable sheet | `deleteRule` on the constructable sheet |
|
|
239
|
+
|
|
240
|
+
Text mode cannot edit a single rule in place the way CSSOM can, so the sheet
|
|
241
|
+
keeps the inserted rule texts in index order and rewrites the element on delete.
|
|
242
|
+
Dispose, ref-counted cleanup and GC therefore behave identically in every mode.
|
|
243
|
+
|
|
229
244
|
**Configuration Notes:**
|
|
230
245
|
- Most options have sensible defaults and auto-detection
|
|
231
246
|
- `configure()` is optional - the injector works with defaults
|
package/docs/react-api.md
CHANGED
|
@@ -419,6 +419,15 @@ function ThemeStyles() {
|
|
|
419
419
|
}
|
|
420
420
|
```
|
|
421
421
|
|
|
422
|
+
A slot — the `id`, or the selector when no `id` is given — holds exactly one
|
|
423
|
+
injection **per `root`**. So:
|
|
424
|
+
|
|
425
|
+
- Changing the styles replaces the previous CSS rather than adding to it.
|
|
426
|
+
- Passing styles that produce no CSS (for example `{}`) clears the slot.
|
|
427
|
+
- The same selector used in two shadow roots keeps a separate injection in each.
|
|
428
|
+
- Two independent call sites that share a selector share a slot, and the last
|
|
429
|
+
render wins. Give them distinct `id`s if they should coexist.
|
|
430
|
+
|
|
422
431
|
### useRawCSS
|
|
423
432
|
|
|
424
433
|
Inject raw CSS strings. Accepts an optional `id` in the options for update tracking — when the CSS changes for the same id, the previous injection is replaced:
|
|
@@ -435,6 +444,9 @@ function GlobalReset() {
|
|
|
435
444
|
}
|
|
436
445
|
```
|
|
437
446
|
|
|
447
|
+
An `id` slot holds one injection per `root`. Without an `id` the CSS is deduped
|
|
448
|
+
by content and permanent — there is nothing to replace it with later.
|
|
449
|
+
|
|
438
450
|
### useKeyframes
|
|
439
451
|
|
|
440
452
|
Inject `@keyframes` rules and return the generated animation name:
|
|
@@ -455,7 +467,7 @@ function Spinner() {
|
|
|
455
467
|
}
|
|
456
468
|
```
|
|
457
469
|
|
|
458
|
-
`useKeyframes()` also supports a factory function.
|
|
470
|
+
`useKeyframes()` also supports a factory function. Without a `name` the factory runs on every invocation and deduplication is handled internally by content hash; with a `name`, matching deps skip the factory entirely:
|
|
459
471
|
|
|
460
472
|
```tsx
|
|
461
473
|
function Pulse({ scale }: { scale: number }) {
|
|
@@ -464,13 +476,20 @@ function Pulse({ scale }: { scale: number }) {
|
|
|
464
476
|
'0%': { transform: 'scale(1)' },
|
|
465
477
|
'100%': { transform: `scale(${scale})` },
|
|
466
478
|
}),
|
|
467
|
-
[scale]
|
|
479
|
+
[scale],
|
|
480
|
+
{ name: 'pulse' }
|
|
468
481
|
);
|
|
469
482
|
|
|
470
483
|
return <div style={{ animation: `${pulse} 500ms ease-in-out alternate infinite` }} />;
|
|
471
484
|
}
|
|
472
485
|
```
|
|
473
486
|
|
|
487
|
+
Passing `name` claims a slot owned by that one call site, per `root` — much like
|
|
488
|
+
`id` in `useGlobalStyles()` and `useRawCSS()`. When the steps change the previous
|
|
489
|
+
`@keyframes` rule is disposed and the name is reused, so the rules don't
|
|
490
|
+
accumulate and the returned name stays stable. Anonymous keyframes are permanent
|
|
491
|
+
and shared by content.
|
|
492
|
+
|
|
474
493
|
### useProperty
|
|
475
494
|
|
|
476
495
|
Register a CSS `@property` rule so a custom property can animate smoothly:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tenphi/tasty",
|
|
3
|
-
"version": "2.11.
|
|
3
|
+
"version": "2.11.2",
|
|
4
4
|
"description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -139,6 +139,7 @@
|
|
|
139
139
|
"@eslint/js": "^10.0.1",
|
|
140
140
|
"@size-limit/esbuild": "^12.0.0",
|
|
141
141
|
"@size-limit/file": "^12.0.0",
|
|
142
|
+
"@tenphi/eslint-plugin-tasty": "^0.11.3",
|
|
142
143
|
"@testing-library/jest-dom": "^6.9.1",
|
|
143
144
|
"@testing-library/react": "^16.3.2",
|
|
144
145
|
"@types/babel__core": "^7.20.5",
|
|
@@ -165,13 +166,13 @@
|
|
|
165
166
|
"name": "main (import *)",
|
|
166
167
|
"path": "dist/index.js",
|
|
167
168
|
"import": "*",
|
|
168
|
-
"limit": "
|
|
169
|
+
"limit": "54.5 kB"
|
|
169
170
|
},
|
|
170
171
|
{
|
|
171
172
|
"name": "core (import *)",
|
|
172
173
|
"path": "dist/core/index.js",
|
|
173
174
|
"import": "*",
|
|
174
|
-
"limit": "
|
|
175
|
+
"limit": "51.65 kB"
|
|
175
176
|
},
|
|
176
177
|
{
|
|
177
178
|
"name": "static",
|
|
@@ -199,7 +200,7 @@
|
|
|
199
200
|
"path",
|
|
200
201
|
"crypto"
|
|
201
202
|
],
|
|
202
|
-
"limit": "
|
|
203
|
+
"limit": "47.65 kB"
|
|
203
204
|
}
|
|
204
205
|
],
|
|
205
206
|
"scripts": {
|