@idealyst/theme 1.2.103 → 1.2.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/theme",
-  "version": "1.2.103",
+  "version": "1.2.105",
   "description": "Theming system for Idealyst Framework",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -63,7 +63,7 @@
     "publish:npm": "npm publish"
   },
   "dependencies": {
-    "@idealyst/tooling": "^1.2.103"
+    "@idealyst/tooling": "^1.2.105"
   },
   "peerDependencies": {
     "react-native-unistyles": ">=3.0.0"

package/src/babel/plugin.js

@@ -126,11 +126,42 @@ function mergeObjectExpressions(t, target, source) {
                 const idx = resultProps.indexOf(existingProp);
                 resultProps[idx] = t.objectProperty(existingProp.key, mergedValue);
             }
-            // If both are arrow functions (dynamic styles), merge their return values
-            else if (t.isArrowFunctionExpression(existingValue) && t.isArrowFunctionExpression(newValue)) {
-                const mergedFn = mergeDynamicStyleFunctions(t, existingValue, newValue);
-                const idx = resultProps.indexOf(existingProp);
-                resultProps[idx] = t.objectProperty(existingProp.key, mergedFn);
+            // If base is a dynamic function and extension is anything (plain object
+            // or arrow function), extract the extension's object and merge it into the
+            // base function's return body. Extensions should only provide plain objects,
+            // but if a function is given we unwrap its body to get the object.
+            else if (t.isArrowFunctionExpression(existingValue)) {
+                let extObj = newValue;
+                // If extension mistakenly provides a function, unwrap its return body
+                if (t.isArrowFunctionExpression(extObj)) {
+                    extObj = extObj.body;
+                    if (t.isParenthesizedExpression(extObj)) {
+                        extObj = extObj.expression;
+                    }
+                }
+
+                if (t.isObjectExpression(extObj)) {
+                    let baseBody = existingValue.body;
+                    if (t.isParenthesizedExpression(baseBody)) {
+                        baseBody = baseBody.expression;
+                    }
+                    if (t.isObjectExpression(baseBody)) {
+                        const mergedBody = mergeObjectExpressions(t, baseBody, extObj);
+                        const idx = resultProps.indexOf(existingProp);
+                        resultProps[idx] = t.objectProperty(
+                            existingProp.key,
+                            t.arrowFunctionExpression(existingValue.params, mergedBody)
+                        );
+                    } else {
+                        // Block body or other complex form — fall back to replacement
+                        const idx = resultProps.indexOf(existingProp);
+                        resultProps[idx] = prop;
+                    }
+                } else {
+                    // Extension body isn't an object — fall back to replacement
+                    const idx = resultProps.indexOf(existingProp);
+                    resultProps[idx] = prop;
+                }
             }
             // Otherwise, source replaces target
             else {
@@ -188,33 +219,6 @@ function mergeObjectExpressions(t, target, source) {
     return t.objectExpression(resultProps);
 }
 
-/**
- * Merge two dynamic style functions (arrow functions that return style objects).
- * Creates a new function that merges both return values.
- */
-function mergeDynamicStyleFunctions(t, baseFn, extFn) {
-    // Get the bodies (assuming they return ObjectExpressions)
-    let baseBody = baseFn.body;
-    let extBody = extFn.body;
-
-    // Handle parenthesized expressions
-    if (t.isParenthesizedExpression(baseBody)) {
-        baseBody = baseBody.expression;
-    }
-    if (t.isParenthesizedExpression(extBody)) {
-        extBody = extBody.expression;
-    }
-
-    // If both return ObjectExpressions directly, merge them
-    if (t.isObjectExpression(baseBody) && t.isObjectExpression(extBody)) {
-        const mergedBody = mergeObjectExpressions(t, baseBody, extBody);
-        return t.arrowFunctionExpression(baseFn.params, mergedBody);
-    }
-
-    // For block statements, this is more complex - just use extension for now
-    return extFn;
-}
-
 /**
  * Merge a callback body (the object returned by theme => ({ ... }))
  */
@@ -941,16 +945,24 @@ module.exports = function idealystStylesPlugin({ types: t }) {
                 if (t.isIdentifier(node.callee, { name: 'extendStyle' })) {
                     debug(`FOUND extendStyle in: ${filename}`);
 
-                    const [componentNameArg, stylesCallback] = node.arguments;
+                    const [componentNameArg, stylesArg] = node.arguments;
 
                     if (!t.isStringLiteral(componentNameArg)) {
                         debug(`  SKIP - componentName is not a string literal`);
                         return;
                     }
 
-                    if (!t.isArrowFunctionExpression(stylesCallback) &&
-                        !t.isFunctionExpression(stylesCallback)) {
-                        debug(`  SKIP - callback is not a function`);
+                    // Accept either a function callback or a plain object
+                    let stylesCallback = stylesArg;
+                    if (t.isObjectExpression(stylesArg)) {
+                        // Wrap plain object in an arrow function: (theme) => ({ ... })
+                        stylesCallback = t.arrowFunctionExpression(
+                            [t.identifier('theme')],
+                            t.parenthesizedExpression(stylesArg)
+                        );
+                    } else if (!t.isArrowFunctionExpression(stylesArg) &&
+                        !t.isFunctionExpression(stylesArg)) {
+                        debug(`  SKIP - second argument is not a function or object`);
                         return;
                     }
 
@@ -987,16 +999,24 @@ module.exports = function idealystStylesPlugin({ types: t }) {
                 if (t.isIdentifier(node.callee, { name: 'overrideStyle' })) {
                     debug(`FOUND overrideStyle in: ${filename}`);
 
-                    const [componentNameArg, stylesCallback] = node.arguments;
+                    const [componentNameArg, stylesArg] = node.arguments;
 
                     if (!t.isStringLiteral(componentNameArg)) {
                         debug(`  SKIP - componentName is not a string literal`);
                         return;
                     }
 
-                    if (!t.isArrowFunctionExpression(stylesCallback) &&
-                        !t.isFunctionExpression(stylesCallback)) {
-                        debug(`  SKIP - callback is not a function`);
+                    // Accept either a function callback or a plain object
+                    let stylesCallback = stylesArg;
+                    if (t.isObjectExpression(stylesArg)) {
+                        // Wrap plain object in an arrow function: (theme) => ({ ... })
+                        stylesCallback = t.arrowFunctionExpression(
+                            [t.identifier('theme')],
+                            t.parenthesizedExpression(stylesArg)
+                        );
+                    } else if (!t.isArrowFunctionExpression(stylesArg) &&
+                        !t.isFunctionExpression(stylesArg)) {
+                        debug(`  SKIP - second argument is not a function or object`);
                         return;
                     }
 

package/src/componentStyles.ts

@@ -22,10 +22,12 @@ import type { TextStyle, ViewStyle } from 'react-native';
 /**
  * Registry interface that components augment to register their style types.
  * This enables type-safe extendStyle and overrideStyle calls.
+ *
+ * Style definitions must use plain style objects, not functions.
  */
 export interface ComponentStyleRegistry {
   // Components augment this interface to add their style types
-  // Example: Text: { text: (params: TextStyleParams) => TextStyleObject }
+  // Example: Text: { text: TextStyle & { variants?: { ... } } }
 }
 
 /**
@@ -37,38 +39,25 @@ export type ComponentStyleDef<K extends string> = K extends keyof ComponentStyle
   : Record<string, any>;
 
 /**
- * Deep partial type that works with functions.
- * For style functions, preserves the function signature but makes the return type partial.
+ * Deep partial type for style objects.
+ * Recursively makes all properties optional.
+ * Extensions must be plain style objects — functions are not supported.
  */
-export type DeepPartialStyle<T> = T extends (...args: infer A) => infer R
-  ? (...args: A) => DeepPartialStyle<R>
-  : T extends object
-    ? { [K in keyof T]?: DeepPartialStyle<T[K]> }
-    : T;
+export type DeepPartialStyle<T> = T extends object
+  ? { [K in keyof T]?: DeepPartialStyle<T[K]> }
+  : T;
 
 /**
- * Style definition for extendStyle - requires functions with same params as base.
- * All style properties must be functions to access dynamic params.
+ * Style definition for extendStyle - plain style objects only.
+ * Functions are not supported; the babel plugin merges plain objects into base styles.
  */
 export type ExtendStyleDef<K extends string> = DeepPartialStyle<ComponentStyleDef<K>>;
 
 /**
- * Style definition for overrideStyle - requires full implementation with functions.
+ * Style definition for overrideStyle - requires full style implementation.
  */
 export type OverrideStyleDef<K extends string> = ComponentStyleDef<K>;
 
-/**
- * Helper to extract the params type from a dynamic style function.
- * Use this to type your extension functions.
- *
- * @example
- * ```typescript
- * type TextParams = StyleParams<TextStyleDef['text']>;
- * // TextParams = { color?: TextColorVariant }
- * ```
- */
-export type StyleParams<T> = T extends (params: infer P) => any ? P : never;
-
 // =============================================================================
 // Common Style Types
 // =============================================================================
@@ -86,8 +75,3 @@ export interface StyleWithVariants<TVariants extends Record<string, any> = Recor
     [K in keyof TVariants]?: TVariants[K];
   } & { styles: ViewStyle | TextStyle }>;
 }
-
-/**
- * Dynamic style function type.
- */
-export type DynamicStyleFn<TParams, TStyle> = (params: TParams) => TStyle;

package/src/styleBuilder.ts

@@ -102,18 +102,27 @@ export function defineStyle<TTheme, TStyles extends Record<string, unknown>>(
 /**
  * Extend existing component styles (merged at build time).
  * Import BEFORE components for extensions to apply.
+ *
+ * Accepts either a plain style object or a theme callback:
+ * ```typescript
+ * // Plain object (no theme access needed)
+ * extendStyle('Text', { text: { fontFamily: 'MyFont' } });
+ *
+ * // Theme callback (when you need theme tokens)
+ * extendStyle('Text', (theme) => ({ text: { color: theme.colors.text.primary } }));
+ * ```
  */
 export function extendStyle<K extends keyof ComponentStyleRegistry>(
   componentName: K,
-  styles: (theme: any) => ExtendStyleDef<K>
+  styles: ExtendStyleDef<K> | ((theme: any) => ExtendStyleDef<K>)
 ): void;
 export function extendStyle<K extends string>(
   componentName: K,
-  styles: (theme: any) => Record<string, any>
+  styles: Record<string, any> | ((theme: any) => Record<string, any>)
 ): void;
 export function extendStyle(
   _componentName: string,
-  _styles: (theme: any) => any
+  _styles: any
 ): void {
   // Babel removes this call and merges into defineStyle
 }
@@ -121,18 +130,27 @@ export function extendStyle(
 /**
  * Override component styles completely (replaces base at build time).
  * Import BEFORE components for overrides to apply.
+ *
+ * Accepts either a plain style object or a theme callback:
+ * ```typescript
+ * // Plain object
+ * overrideStyle('Text', { text: { fontFamily: 'MyFont' } });
+ *
+ * // Theme callback
+ * overrideStyle('Text', (theme) => ({ text: { color: theme.colors.text.primary } }));
+ * ```
  */
 export function overrideStyle<K extends keyof ComponentStyleRegistry>(
   componentName: K,
-  styles: (theme: any) => OverrideStyleDef<K>
+  styles: OverrideStyleDef<K> | ((theme: any) => OverrideStyleDef<K>)
 ): void;
 export function overrideStyle<K extends string>(
   componentName: K,
-  styles: (theme: any) => Record<string, any>
+  styles: Record<string, any> | ((theme: any) => Record<string, any>)
 ): void;
 export function overrideStyle(
   _componentName: string,
-  _styles: (theme: any) => any
+  _styles: any
 ): void {
   // Babel removes this call and replaces defineStyle
 }