fix: ensure attrs propagate to component overrides

Author: hyochan

packages/kstyled/src/__tests__/runtime.test.tsx

@@ -1,10 +1,19 @@
+import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
 import { styled } from '../styled';
 import { css } from '../css';
 import type { CompiledStyles, StyleMetadata } from '../types';
 import { normalizeStyleValue } from '../css-runtime-parser';
 import { mergeDynamicPatches } from '../utils/style-merger';
 
+jest.mock('../theme', () => {
+  const actual = jest.requireActual('../theme');
+  return {
+    ...actual,
+    useTheme: () => actual.defaultTheme,
+  };
+});
+
 describe('kstyled Runtime Tests', () => {
   describe('Static Styles', () => {
     test('should create component with static styles using __withStyles', () => {
@@ -226,6 +235,48 @@ describe('kstyled Runtime Tests', () => {
         editable: false,
       });
     });
+
+    test('should forward attrs values to rendered component', () => {
+      const Base = React.forwardRef((props: any, _ref) => {
+        return React.createElement('Base', props);
+      });
+
+      const compiledStyles = StyleSheet.create({
+        base: { padding: 4 },
+      }) as unknown as CompiledStyles;
+
+      const StyledComp = styled(Base).__withStyles({
+        compiledStyles,
+        styleKeys: ['base'],
+        attrs: {
+          accessibilityRole: 'button',
+          testID: 'default-id',
+        },
+      });
+
+      const element = (StyledComp as any).render({ testID: 'override-id' }, null);
+
+      expect(element.props.accessibilityRole).toBe('button');
+      expect(element.props.testID).toBe('override-id');
+      expect(element.props.style).toBeDefined();
+    });
+
+    test('should allow attrs to override base component via as', () => {
+      const Base = React.forwardRef((props: any, _ref) => React.createElement('Base', props));
+      const Override = React.forwardRef((props: any, _ref) => React.createElement('Override', props));
+
+      const StyledComp = styled(Base).__withStyles({
+        attrs: () => ({
+          as: Override,
+        }),
+      });
+
+      const elementWithOverride = (StyledComp as any).render({}, null);
+      expect(elementWithOverride.type).toBe(Override);
+
+      const elementWithProp = (StyledComp as any).render({ as: Base }, null);
+      expect(elementWithProp.type).toBe(Base);
+    });
   });
 
   describe('Inline css`` with Memoization', () => {

packages/kstyled/src/styled.tsx

@@ -14,7 +14,7 @@ import {
   SectionList,
 } from 'react-native';
 import type { StyledComponent, CompiledStyles, AttrsFunction } from './types';
-import type { StyleMetadata, StyledFactory, StyleObject, PropsWithTheme, StyleValue, DynamicPatchFunction } from './types/styled-types';
+import type { StyleMetadata, StyledFactory, StyleObject, PropsWithTheme, StyleValue, DynamicPatchFunction, AttrsValue } from './types/styled-types';
 import { useTheme } from './theme';
 import { parseCSS } from './css-runtime-parser';
 import {
@@ -32,6 +32,7 @@ import {
   filterProps,
   hasTransientProps,
   mergeAttrsWithProps,
+  combineAttrs,
 } from './utils/props-filter';
 
 /**
@@ -71,6 +72,8 @@ function styledFunction<C extends ComponentType<any>, P = {}, AttrsP = {}>(
 
     // Extract base component's metadata (handles Animated components)
     const baseMetadata = extractBaseMetadata(BaseComponent);
+    const combinedAttrs = combineAttrs(baseMetadata.attrs, attrs);
+    const hasAttrs = Boolean(combinedAttrs);
 
     // Merge parent and child styles
     const { mergedCompiledStyles, mergedStyleKeys } = mergeMetadata(
@@ -85,11 +88,11 @@ function styledFunction<C extends ComponentType<any>, P = {}, AttrsP = {}>(
     );
 
     const StyledComponent = forwardRef<unknown, Record<string, unknown>>((props, ref) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const Component = (props.as || BaseComponent) as ComponentType<any>;
-
       // Fast path: static styles only (no dynamic, no attrs, no external style)
-      if (!getDynamicPatch && !attrs && !props.style) {
+      if (!getDynamicPatch && !hasAttrs && !props.style) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const Component = (props.as || BaseComponent) as ComponentType<any>;
+
         // Check if we have any transient props first
         const hasTransient = hasTransientProps(props);
 
@@ -105,13 +108,13 @@ function styledFunction<C extends ComponentType<any>, P = {}, AttrsP = {}>(
       }
 
       // Slow path: dynamic styles, attrs, or external styles
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { as: _, style: externalStyle, ...restProps } = props;
+      const { as: asProp, style: externalStyle, ...restProps } = props;
       const theme = useTheme();
 
       // Build final props with theme
       const propsWithTheme: PropsWithTheme = { ...restProps, theme };
-      const mergedProps = mergeAttrsWithProps(attrs, propsWithTheme);
+      const propsWithAttrs = mergeAttrsWithProps(combinedAttrs, propsWithTheme);
+      const mergedProps = propsWithAttrs;
 
       // Compute and merge dynamic patches
       const dynamicPatch = mergeDynamicPatches(
@@ -132,9 +135,11 @@ function styledFunction<C extends ComponentType<any>, P = {}, AttrsP = {}>(
       );
 
       // Filter props and add styles
-      const forwardedProps = filterProps(restProps, ref);
+      const forwardedProps = filterProps(propsWithAttrs, ref);
       forwardedProps.style = styles;
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const Component = (asProp || (propsWithAttrs.as as ComponentType<any>) || BaseComponent) as ComponentType<any>;
       return <Component {...forwardedProps} />;
     });
 
@@ -158,7 +163,7 @@ function styledFunction<C extends ComponentType<any>, P = {}, AttrsP = {}>(
     ): StyledComponent<C, P, AttrsP & NewAttrs> {
       return createStyledComponent({
         ...metadata,
-        attrs: attrsArg as Record<string, unknown>,
+        attrs: attrsArg as AttrsValue,
       });
     };
 
@@ -174,7 +179,7 @@ function styledFunction<C extends ComponentType<any>, P = {}, AttrsP = {}>(
         compiledStyles: mergedCompiledStyles,
         styleKeys: mergedStyleKeys,
         getDynamicPatch: combinedGetDynamicPatch,
-        attrs,
+        attrs: combinedAttrs,
       },
       BaseComponent
     );
@@ -208,7 +213,7 @@ function styledFunction<C extends ComponentType<any>, P = {}, AttrsP = {}>(
       compiledStyles,
       styleKeys: compiledStyles ? ['base'] : undefined,
       getDynamicPatch: dynamicGetter as DynamicPatchFunction | undefined,
-      attrs: baseAttrs as Record<string, unknown>,
+      attrs: baseAttrs as AttrsValue,
     };
 
     return createStyledComponent(metadata);
@@ -220,7 +225,11 @@ function styledFunction<C extends ComponentType<any>, P = {}, AttrsP = {}>(
   factory.__withStyles = function (
     metadata: StyleMetadata
   ): StyledComponent<C, P> {
-    return createStyledComponent({ ...metadata, attrs: baseAttrs as Record<string, unknown> });
+    const mergedAttrs = combineAttrs(
+      baseAttrs as AttrsValue | undefined,
+      metadata.attrs
+    );
+    return createStyledComponent({ ...metadata, attrs: mergedAttrs });
   };
 
   /**

packages/kstyled/src/utils/component-metadata.ts

@@ -47,10 +47,10 @@ function extractMetadataRecursive(
     return {};
   }
 
-  // Check if component has metadata directly
+  // Check if component has metadata directly (works for objects and functions)
   if (
-    typeof component === 'object' &&
     component !== null &&
+    (typeof component === 'object' || typeof component === 'function') &&
     '__kstyled_metadata__' in component
   ) {
     return (component as ComponentWithMetadata).__kstyled_metadata__ || {};

packages/kstyled/src/utils/props-filter.ts

@@ -55,9 +55,59 @@ export function mergeAttrsWithProps(
     return propsWithTheme;
   }
 
+  const resolvedAttrs = resolveAttrs(attrs, propsWithTheme);
+  if (!resolvedAttrs) {
+    return propsWithTheme;
+  }
+
+  return { ...resolvedAttrs, ...propsWithTheme };
+}
+
+/**
+ * Combine base and child attrs preserving execution order
+ * Later attrs override earlier ones
+ */
+export function combineAttrs(
+  baseAttrs: AttrsValue | undefined,
+  childAttrs: AttrsValue | undefined
+): AttrsValue | undefined {
+  if (!baseAttrs) {
+    return childAttrs;
+  }
+  if (!childAttrs) {
+    return baseAttrs;
+  }
+
+  // If both are plain objects we can merge once
+  if (typeof baseAttrs !== 'function' && typeof childAttrs !== 'function') {
+    return { ...baseAttrs, ...childAttrs };
+  }
+
+  // Otherwise evaluate sequentially at runtime so each attrs function
+  // can see the props (including previous attrs results)
+  return (props: PropsWithTheme) => {
+    const baseResult = resolveAttrs(baseAttrs, props);
+    const propsWithBase = baseResult ? { ...props, ...baseResult } : props;
+    const childResult = resolveAttrs(childAttrs, propsWithBase);
+
+    return {
+      ...(baseResult || {}),
+      ...(childResult || {}),
+    };
+  };
+}
+
+function resolveAttrs(
+  attrs: AttrsValue | undefined,
+  propsWithTheme: PropsWithTheme
+): Record<string, unknown> | undefined {
+  if (!attrs) {
+    return undefined;
+  }
+
   if (typeof attrs === 'function') {
-    return { ...propsWithTheme, ...attrs(propsWithTheme) };
+    return attrs(propsWithTheme) || undefined;
   }
 
-  return { ...propsWithTheme, ...attrs };
+  return attrs;
 }