feat(tasty): recipes * 2

Author: tenphi

src/stories/Tasty.docs.mdx

@@ -130,7 +130,7 @@ configure({
 | `tokens` | `Record<string, string \| number>` | - | Predefined tokens replaced during parsing |
 | `keyframes` | `Record<string, KeyframesSteps>` | - | Global keyframes for animations |
 | `properties` | `Record<string, PropertyDefinition>` | - | Global CSS @property definitions |
-| `recipes` | `Record<string, StylesWithoutSelectors>` | - | Predefined style recipes (named style bundles) |
+| `recipes` | `Record<string, RecipeStyles>` | - | Predefined style recipes (named style bundles) |
 
 ### Predefined Tokens
 

src/stories/tastyStatic.docs.mdx

@@ -171,7 +171,7 @@ module.exports = {
 | `output` | `string` | `'tasty.css'` | Path for generated CSS file |
 | `config.states` | `Record<string, string>` | `{}` | Predefined state aliases |
 | `config.devMode` | `boolean` | `false` | Add source comments to CSS |
-| `config.recipes` | `Record<string, StylesWithoutSelectors>` | `{}` | Predefined style recipes |
+| `config.recipes` | `Record<string, RecipeStyles>` | `{}` | Predefined style recipes |
 
 ---
 

src/tasty/config.ts

@@ -32,7 +32,7 @@ import {
 import type { KeyframesSteps, PropertyDefinition } from './injector/types';
 import type { StyleDetails, UnitHandler } from './parser/types';
 import type { TastyPlugin } from './plugins/types';
-import type { StylesWithoutSelectors } from './styles/types';
+import type { RecipeStyles } from './styles/types';
 import type { StyleHandlerDefinition } from './utils/styles';
 
 /**
@@ -234,7 +234,7 @@ export interface TastyConfig {
    * });
    * ```
    */
-  recipes?: Record<string, StylesWithoutSelectors>;
+  recipes?: Record<string, RecipeStyles>;
 }
 
 // Warnings tracking to avoid duplicates
@@ -269,7 +269,7 @@ let globalKeyframes: Record<string, KeyframesSteps> | null = null;
 let globalProperties: Record<string, PropertyDefinition> | null = null;
 
 // Global recipes storage (null = no recipes configured)
-let globalRecipes: Record<string, StylesWithoutSelectors> | null = null;
+let globalRecipes: Record<string, RecipeStyles> | null = null;
 
 /**
  * Internal properties required by tasty core features.
@@ -499,20 +499,15 @@ export function hasGlobalRecipes(): boolean {
  * Get global recipes configuration.
  * Returns null if no recipes configured (fast path for zero-overhead).
  */
-export function getGlobalRecipes(): Record<
-  string,
-  StylesWithoutSelectors
-> | null {
+export function getGlobalRecipes(): Record<string, RecipeStyles> | null {
   return globalRecipes;
 }
 
 /**
  * Set global recipes (called from configure).
  * Internal use only.
  */
-function setGlobalRecipes(
-  recipes: Record<string, StylesWithoutSelectors>,
-): void {
+function setGlobalRecipes(recipes: Record<string, RecipeStyles>): void {
   if (stylesGenerated) {
     warnOnce(
       'recipes-after-styles',
@@ -531,7 +526,7 @@ function setGlobalRecipes(
             `recipe-selector-${name}-${key}`,
             `[Tasty] Recipe "${name}" contains sub-element key "${key}". ` +
               `Recipes must be flat styles without sub-element keys. ` +
-              `The sub-element key will be ignored during resolution.`,
+              `Remove the sub-element key from the recipe definition.`,
           );
         }
         if (key === 'recipe') {
@@ -597,7 +592,7 @@ export function configure(config: Partial<TastyConfig> = {}): void {
   let mergedFuncs: Record<string, (groups: StyleDetails[]) => string> = {};
   let mergedHandlers: Record<string, StyleHandlerDefinition> = {};
   let mergedTokens: Record<string, string | number | boolean> = {};
-  let mergedRecipes: Record<string, StylesWithoutSelectors> = {};
+  let mergedRecipes: Record<string, RecipeStyles> = {};
 
   // Process plugins in order
   if (config.plugins) {

src/tasty/index.ts

@@ -101,6 +101,7 @@ export type {
   StylesInterface,
   Styles,
   StylesWithoutSelectors,
+  RecipeStyles,
   NoType,
   Selector,
   SuffixForSelector,

src/tasty/plugins/types.ts

@@ -1,5 +1,5 @@
 import type { StyleDetails, UnitHandler } from '../parser/types';
-import type { StylesWithoutSelectors } from '../styles/types';
+import type { RecipeStyles } from '../styles/types';
 import type { StyleHandlerDefinition } from '../utils/styles';
 
 /**
@@ -43,7 +43,7 @@ export interface TastyPlugin {
    * }
    * ```
    */
-  recipes?: Record<string, StylesWithoutSelectors>;
+  recipes?: Record<string, RecipeStyles>;
 }
 
 /**

src/tasty/styles/types.ts

@@ -569,6 +569,16 @@ export type StylesWithoutSelectors = {
     | StyleValueStateMap<StylesInterface[key]>;
 };
 
+/**
+ * Style type for recipe definitions.
+ * Like StylesWithoutSelectors but also allows `@keyframes` and `@properties`.
+ * Excludes `recipe` to prevent recursive references.
+ */
+export type RecipeStyles = StylesWithoutSelectors & {
+  '@keyframes'?: StylesInterface['@keyframes'];
+  '@properties'?: StylesInterface['@properties'];
+};
+
 /** Special properties that are not regular style values */
 export interface SpecialStyleProperties {
   '@keyframes'?: StylesInterface['@keyframes'];

src/tasty/utils/resolve-recipes.test.ts

@@ -255,7 +255,7 @@ describe('resolveRecipes', () => {
             '@keyframes': {
               fadeIn: { from: { opacity: '0' }, to: { opacity: '1' } },
             },
-          } as any,
+          },
         },
       });
 

src/tasty/utils/resolve-recipes.ts

@@ -12,7 +12,7 @@
 
 import { getGlobalRecipes } from '../config';
 import { isSelector } from '../pipeline';
-import { Styles, StylesWithoutSelectors } from '../styles/types';
+import { RecipeStyles, Styles } from '../styles/types';
 
 import { isDevEnv } from './is-dev-env';
 
@@ -40,7 +40,7 @@ function parseRecipeNames(value: unknown): string[] | null {
  */
 function resolveRecipesForLevel(
   styles: Record<string, unknown>,
-  recipes: Record<string, StylesWithoutSelectors>,
+  recipes: Record<string, RecipeStyles>,
 ): Record<string, unknown> | null {
   if (!('recipe' in styles)) return null;
 
@@ -106,8 +106,8 @@ export function resolveRecipes(styles: Styles): Styles {
     changed = true;
     result = topResolved;
   } else {
-    // Copy reference for potential sub-element changes
-    result = { ...(styles as Record<string, unknown>) };
+    // Keep reference; a shallow copy is deferred until a sub-element actually changes
+    result = styles as Record<string, unknown>;
   }
 
   // Resolve sub-element recipes

src/tasty/zero/babel.ts

@@ -21,7 +21,7 @@ import { declare } from '@babel/helper-plugin-utils';
 import * as t from '@babel/types';
 
 import { configure } from '../config';
-import { Styles, StylesWithoutSelectors } from '../styles/types';
+import { RecipeStyles, Styles } from '../styles/types';
 import { mergeStyles } from '../utils/merge-styles';
 import { resolveRecipes } from '../utils/resolve-recipes';
 import { StyleHandlerDefinition } from '../utils/styles';
@@ -128,7 +128,7 @@ export interface TastyZeroConfig {
    * }
    * ```
    */
-  recipes?: Record<string, StylesWithoutSelectors>;
+  recipes?: Record<string, RecipeStyles>;
 }
 
 export interface TastyZeroBabelOptions {