@react-native-styled-system/core 1.4.4 → 2.1.2

package/src/hook/useSxStyle.test.ts

@@ -1,57 +1,126 @@
 import { StyleSheet } from 'react-native';
 import { renderHook } from '@testing-library/react-native';
 
+import { baseTheme, emptyTheme, responsiveTheme } from '../__testUtils__/testTheme';
 import type { TextSxProps } from '../@types/SxProps';
 import type { ThemedDict } from '../@types/ThemedDict';
 
+import type { UseSxStyleOptions } from './useSxStyle';
 import { useSxStyle } from './useSxStyle';
 
-export function expectResult(
+const expectResult = (
   theme: ThemedDict,
   sx: TextSxProps,
   {
     expectation,
+    cache,
+    screenWidth,
   }: {
     expectation: object;
+    cache?: boolean;
+    screenWidth?: number;
   },
-) {
+) => {
+  const options: UseSxStyleOptions = { theme, cache, screenWidth };
   const {
     result: { current },
-  } = renderHook(() => useSxStyle({ theme }));
+  } = renderHook(() => useSxStyle(options));
 
   expect(StyleSheet.flatten(current(sx))).toEqual(expectation);
-}
-
-const baseTheme: ThemedDict = {
-  colors: {
-    red: 'red',
-    blue: 'blue',
-    green: 'green',
-  },
-  sizes: {
-    1: 4,
-    2: 8,
-    pagePadding: 20,
-    full: '100%',
-  },
-  space: { 1: 4, 2: 8, pagePadding: 20, full: '100%' },
-  radii: {
-    sm: 8,
-    md: 12,
-    lg: 20,
-  },
-  typography: {
-    title: {
-      fontFamily: 'Noto Sans',
-      fontSize: 14,
-      fontStyle: 'normal',
-      fontWeight: '400',
-    },
-  },
 };
 
-describe('general case', () => {
-  it('', () => {
+describe('space parsing', () => {
+  it('resolves space token', () => {
     expectResult(baseTheme, { mt: 2 }, { expectation: { marginTop: 8 } });
   });
+
+  it('resolves multiple space tokens', () => {
+    expectResult(baseTheme, { mt: 1, mb: 2 }, { expectation: { marginTop: 4, marginBottom: 8 } });
+  });
+
+  it('resolves px suffix', () => {
+    expectResult(baseTheme, { m: '15px' }, { expectation: { margin: 15 } });
+  });
+
+  it('resolves percentage', () => {
+    expectResult(baseTheme, { m: '100%' }, { expectation: { margin: '100%' } });
+  });
+});
+
+describe('color parsing', () => {
+  it('resolves color token', () => {
+    expectResult(baseTheme, { bg: 'red' }, { expectation: { backgroundColor: 'red' } });
+  });
+
+  it('resolves raw hex color', () => {
+    expectResult(baseTheme, { bg: '#ffffff' }, { expectation: { backgroundColor: '#ffffff' } });
+  });
+});
+
+describe('sizes parsing', () => {
+  it('resolves size token', () => {
+    expectResult(baseTheme, { w: 1 }, { expectation: { width: 4 } });
+  });
+
+  it('resolves percentage size', () => {
+    expectResult(baseTheme, { w: 'full' as any }, { expectation: { width: '100%' } });
+  });
+});
+
+describe('radii parsing', () => {
+  it('resolves radii token', () => {
+    expectResult(baseTheme, { radius: 'sm' as any }, { expectation: { borderRadius: 8 } });
+  });
+});
+
+describe('shortcut props', () => {
+  it('resolves bg shortcut', () => {
+    expectResult(baseTheme, { bg: 'red' }, { expectation: { backgroundColor: 'red' } });
+  });
+
+  it('resolves w/h shortcuts', () => {
+    expectResult(baseTheme, { w: 1, h: 2 }, { expectation: { width: 4, height: 8 } });
+  });
+});
+
+describe('responsive', () => {
+  it('resolves responsive array', () => {
+    expectResult(
+      responsiveTheme,
+      { w: [100, 200] as any },
+      { expectation: { width: 200 }, screenWidth: 500 },
+    );
+  });
+
+  it('uses base value when screenWidth below breakpoint', () => {
+    expectResult(
+      responsiveTheme,
+      { w: [100, 200] as any },
+      { expectation: { width: 100 }, screenWidth: 320 },
+    );
+  });
+});
+
+describe('cache', () => {
+  it('cached results have same reference', () => {
+    const options: UseSxStyleOptions = { theme: emptyTheme, cache: true };
+    const {
+      result: { current },
+    } = renderHook(() => useSxStyle(options));
+
+    const style1 = current({ bg: 'red' });
+    const style2 = current({ bg: 'red' });
+
+    expect(style1 === style2).toBe(true);
+  });
+});
+
+describe('edge case', () => {
+  it('returns empty style for empty sx', () => {
+    expectResult(baseTheme, {}, { expectation: {} });
+  });
+
+  it('falls back to context default theme when option theme is undefined', () => {
+    expectResult(undefined as any, { w: 1 }, { expectation: { width: 1 } });
+  });
 });

package/src/hook/useSxStyle.ts

@@ -11,14 +11,21 @@ import { propsToThemedStyle } from '../util/propsToThemedStyle';
 export type UseSxStyleOptions = {
   theme?: ThemedDict;
   cache?: boolean;
+  screenWidth?: number;
 };
 const defaultOptions: UseSxStyleOptions = {};
 
-export const useSxStyle = ({ theme: optionTheme, cache }: UseSxStyleOptions = defaultOptions) => {
+export const useSxStyle = ({
+  theme: optionTheme,
+  cache,
+  screenWidth: optionScreenWidth,
+}: UseSxStyleOptions = defaultOptions) => {
   const styledSystemContext = useContext(StyledSystemContext);
 
   return (sx: TextSxProps): StyleProp<TextStyle> => {
     const theme = optionTheme ?? styledSystemContext?.theme;
+    const breakpoints = theme?.breakpoints ?? [];
+    const screenWidth = optionScreenWidth ?? styledSystemContext?.screenWidth ?? 0;
 
     if (!theme) {
       printWarning('theme not found from useSxStyle, empty style will be returned.');
@@ -31,12 +38,16 @@ export const useSxStyle = ({ theme: optionTheme, cache }: UseSxStyleOptions = de
         propsToThemedStyle({
           theme,
           sx,
+          breakpoints,
+          screenWidth,
         }),
       );
     } else {
       return propsToThemedStyle({
         theme,
         sx,
+        breakpoints,
+        screenWidth,
       });
     }
   };

package/src/hook/useSxTokens.test.ts

@@ -1,59 +1,92 @@
 import { renderHook } from '@testing-library/react-native';
 
+import { baseTheme } from '../__testUtils__/testTheme';
 import type { ThemedDict } from '../@types/ThemedDict';
 import type { ThemedTypings } from '../@types/ThemedTypings';
 
 import { useSxTokens } from './useSxTokens';
 
-const theme: ThemedDict = {
-  colors: {
-    red: 'red',
-    blue: 'blue',
-    green: 'green',
-  },
-  sizes: {
-    1: 4,
-    2: 8,
-    pagePadding: 20,
-  },
-  space: { 1: 4, 2: 8, pagePadding: 20 },
-  radii: {
-    sm: 8,
-    md: 12,
-    lg: 20,
-  },
-  typography: {},
-};
-
-function expectResult<T extends keyof ThemedTypings, V extends ThemedTypings[T]>(
+const expectResult = <T extends keyof ThemedTypings, V extends ThemedTypings[T]>(
   theme: ThemedDict,
   tokenGroup: T,
   tokenValues: Array<Exclude<V, null | undefined>>,
-  expectation: any[],
-) {
+  expectation: unknown[],
+) => {
   const {
     result: { current },
   } = renderHook(() => useSxTokens(tokenGroup, tokenValues, { theme }));
 
   return expect(current).toEqual(expectation);
-}
+};
+
+describe('colors', () => {
+  it('resolves single color', () => {
+    expectResult(baseTheme, 'colors', ['red'], ['red']);
+  });
+
+  it('resolves multiple colors', () => {
+    expectResult(baseTheme, 'colors', ['red', 'blue', 'green'], ['red', 'blue', 'green']);
+  });
+});
 
-describe('valid case', () => {
-  it('colors', () => {
-    expectResult(theme, 'colors', ['red'], ['red']);
+describe('radii', () => {
+  it('resolves single radius', () => {
+    expectResult(baseTheme, 'radii', ['sm' as any], [8]);
   });
 
-  it('radii', () => {
-    expectResult(theme, 'radii', ['sm' as any], [8]);
+  it('resolves multiple radii', () => {
+    expectResult(baseTheme, 'radii', ['sm' as any, 'md' as any, 'lg' as any], [8, 12, 20]);
+  });
+});
+
+describe('space', () => {
+  it('resolves space tokens', () => {
+    expectResult(baseTheme, 'space', [1 as any, 2 as any], [4, 8]);
+  });
+
+  it('resolves string key space tokens', () => {
+    expectResult(baseTheme, 'space', ['pagePadding' as any], [20]);
+  });
+});
+
+describe('sizes', () => {
+  it('resolves size tokens', () => {
+    expectResult(baseTheme, 'sizes', [1 as any, 2 as any], [4, 8]);
+  });
+
+  it('resolves percentage size token', () => {
+    expectResult(baseTheme, 'sizes', ['full' as any], ['100%']);
+  });
+});
+
+describe('typography', () => {
+  it('resolves typography token', () => {
+    expectResult(
+      baseTheme,
+      'typography',
+      ['title' as any],
+      [
+        {
+          fontFamily: 'Noto Sans',
+          fontSize: 14,
+          fontStyle: 'normal',
+          fontWeight: '400',
+        },
+      ],
+    );
   });
 });
 
 describe('edge case', () => {
-  it('cannot find value if tokenValue is not in tokenType', () => {
-    expectResult(theme, 'radii', ['' as any], [undefined]);
+  it('returns undefined for non-existent token value', () => {
+    expectResult(baseTheme, 'radii', ['' as any], [undefined]);
   });
 
-  it('cannot find value if theme is undefined', () => {
+  it('returns undefined when theme is undefined', () => {
     expectResult(undefined as any, 'radii', ['' as any], [undefined]);
   });
+
+  it('returns empty array for empty token values', () => {
+    expectResult(baseTheme, 'colors', [], []);
+  });
 });

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './@types/Responsive';
 export * from './@types/SxProps';
 export * from './@types/ThemedDict';
 export * from './@types/ThemedTypings';
@@ -7,3 +8,4 @@ export * from './hook/useSxTokens';
 export * from './provider/StyledSystemProvider';
 export * from './util/propsToThemedStyle';
 export * from './util/createSxComponent';
+export * from './util/createTheme';

package/src/internal/util/resolveResponsiveValue.test.ts

@@ -0,0 +1,171 @@
+import { resolveResponsiveSx, resolveResponsiveValue } from './resolveResponsiveValue';
+
+describe('resolveResponsiveValue', () => {
+  it('returns single value as-is', () => {
+    expect(resolveResponsiveValue({ value: 100, breakpoints: [480, 768], screenWidth: 320 })).toBe(
+      100,
+    );
+
+    expect(
+      resolveResponsiveValue({ value: 'red', breakpoints: [480, 768], screenWidth: 320 }),
+    ).toBe('red');
+  });
+
+  it('returns undefined for empty array', () => {
+    expect(
+      resolveResponsiveValue({ value: [], breakpoints: [480, 768], screenWidth: 320 }),
+    ).toBeUndefined();
+  });
+
+  it('returns base value (index 0) when screenWidth < first breakpoint', () => {
+    expect(
+      resolveResponsiveValue({ value: [100, 200, 300], breakpoints: [480, 768], screenWidth: 320 }),
+    ).toBe(100);
+  });
+
+  it('returns index 1 when screenWidth >= first breakpoint', () => {
+    expect(
+      resolveResponsiveValue({ value: [100, 200, 300], breakpoints: [480, 768], screenWidth: 480 }),
+    ).toBe(200);
+
+    expect(
+      resolveResponsiveValue({ value: [100, 200, 300], breakpoints: [480, 768], screenWidth: 600 }),
+    ).toBe(200);
+  });
+
+  it('returns index 2 when screenWidth >= second breakpoint', () => {
+    expect(
+      resolveResponsiveValue({ value: [100, 200, 300], breakpoints: [480, 768], screenWidth: 768 }),
+    ).toBe(300);
+
+    expect(
+      resolveResponsiveValue({
+        value: [100, 200, 300],
+        breakpoints: [480, 768],
+        screenWidth: 1024,
+      }),
+    ).toBe(300);
+  });
+
+  it('uses last matching value when array is shorter than breakpoints+1', () => {
+    expect(
+      resolveResponsiveValue({
+        value: [100, 200],
+        breakpoints: [480, 768, 1024],
+        screenWidth: 1024,
+      }),
+    ).toBe(200);
+  });
+
+  it('always returns base value when breakpoints is empty', () => {
+    expect(
+      resolveResponsiveValue({ value: [100, 200, 300], breakpoints: [], screenWidth: 0 }),
+    ).toBe(100);
+
+    expect(
+      resolveResponsiveValue({ value: [100, 200, 300], breakpoints: [], screenWidth: 9999 }),
+    ).toBe(100);
+  });
+
+  it('works with string token arrays', () => {
+    expect(
+      resolveResponsiveValue({
+        value: ['red', 'blue', 'green'],
+        breakpoints: [480, 768],
+        screenWidth: 500,
+      }),
+    ).toBe('blue');
+  });
+
+  it('returns undefined for undefined value', () => {
+    expect(
+      resolveResponsiveValue({ value: undefined, breakpoints: [480], screenWidth: 320 }),
+    ).toBeUndefined();
+  });
+
+  it('returns null for null value', () => {
+    expect(
+      resolveResponsiveValue({ value: null, breakpoints: [480], screenWidth: 320 }),
+    ).toBeNull();
+  });
+
+  it('returns base value for single-element array', () => {
+    expect(
+      resolveResponsiveValue({ value: [100], breakpoints: [480, 768], screenWidth: 1024 }),
+    ).toBe(100);
+  });
+
+  it('resolves undefined entry in array', () => {
+    expect(
+      resolveResponsiveValue({
+        value: [100, undefined, 300],
+        breakpoints: [480, 768],
+        screenWidth: 500,
+      }),
+    ).toBeUndefined();
+
+    expect(
+      resolveResponsiveValue({
+        value: [100, undefined, 300],
+        breakpoints: [480, 768],
+        screenWidth: 768,
+      }),
+    ).toBe(300);
+  });
+});
+
+describe('resolveResponsiveSx', () => {
+  it('resolves all array props to single values', () => {
+    const result = resolveResponsiveSx({
+      sx: { backgroundColor: ['red', 'blue'] as any, width: [100, 200] as any },
+      breakpoints: [480],
+      screenWidth: 500,
+    });
+
+    expect(result.backgroundColor).toBe('blue');
+    expect(result.width).toBe(200);
+  });
+
+  it('keeps single values unchanged', () => {
+    const result = resolveResponsiveSx({
+      sx: { backgroundColor: 'red' as any, width: 100 as any },
+      breakpoints: [480],
+      screenWidth: 500,
+    });
+
+    expect(result.backgroundColor).toBe('red');
+    expect(result.width).toBe(100);
+  });
+
+  it('handles mixed array and single values', () => {
+    const result = resolveResponsiveSx({
+      sx: { backgroundColor: ['red', 'blue'] as any, width: 100 as any },
+      breakpoints: [480],
+      screenWidth: 500,
+    });
+
+    expect(result.backgroundColor).toBe('blue');
+    expect(result.width).toBe(100);
+  });
+
+  it('does not resolve transform arrays', () => {
+    const transformValue = [{ translateX: 10 }];
+    const result = resolveResponsiveSx({
+      sx: { transform: transformValue as any },
+      breakpoints: [480],
+      screenWidth: 500,
+    });
+
+    expect(result.transform).toBe(transformValue);
+  });
+
+  it('returns empty object for undefined sx', () => {
+    const result = resolveResponsiveSx({
+      sx: undefined,
+      breakpoints: [480],
+      screenWidth: 500,
+    });
+
+    expect(result).toEqual({});
+  });
+});

package/src/internal/util/resolveResponsiveValue.ts

@@ -0,0 +1,58 @@
+import { RESPONSIVE_EXCLUDED_KEYS } from '../../@types/Responsive';
+import type { ResolvedTextSxProps, TextSxProps } from '../../@types/SxProps';
+
+export const resolveResponsiveValue = <T>({
+  value,
+  breakpoints,
+  screenWidth,
+}: {
+  value: T | T[] | undefined | null;
+  breakpoints: number[];
+  screenWidth: number;
+}): T | undefined | null => {
+  if (!Array.isArray(value)) {
+    return value;
+  }
+
+  if (value.length === 0) {
+    return undefined;
+  }
+
+  let resolved = value[0] as T;
+
+  for (let i = 0; i < breakpoints.length && i + 1 < value.length; i++) {
+    if (screenWidth >= breakpoints[i]!) {
+      resolved = value[i + 1] as T;
+    }
+  }
+
+  return resolved;
+};
+
+export const resolveResponsiveSx = ({
+  sx,
+  breakpoints,
+  screenWidth,
+}: {
+  sx: TextSxProps | undefined;
+  breakpoints: number[];
+  screenWidth: number;
+}): ResolvedTextSxProps => {
+  if (!sx) {
+    return {} as ResolvedTextSxProps;
+  }
+
+  const resolved: Record<string, unknown> = {};
+
+  for (const key of Object.keys(sx)) {
+    const val = (sx as Record<string, unknown>)[key];
+
+    if (RESPONSIVE_EXCLUDED_KEYS.has(key) || !Array.isArray(val)) {
+      resolved[key] = val;
+    } else {
+      resolved[key] = resolveResponsiveValue({ value: val, breakpoints, screenWidth });
+    }
+  }
+
+  return resolved as ResolvedTextSxProps;
+};

package/src/provider/StyledSystemProvider.tsx

@@ -1,23 +1,33 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import { useWindowDimensions } from 'react-native';
 
 import type { ThemedDict } from '../@types/ThemedDict';
 import { emptyThemedDict } from '../@types/ThemedDict';
-import { fillNullishThemeKey } from '../internal/util/fillNullishThemeKey';
+import { createTheme } from '../util/createTheme';
 
 export type StyledSystemContextValue = {
   theme: ThemedDict;
+  screenWidth: number;
 };
 
 export const StyledSystemContext = React.createContext<StyledSystemContextValue>({
   theme: emptyThemedDict,
+  screenWidth: 0,
 });
-type Props = PropsWithChildren<{ theme: Partial<ThemedDict> }>;
+type Props = PropsWithChildren<{ theme: Partial<ThemedDict>; screenWidth?: number }>;
+
+const StyledSystemProviderInner = ({ children, theme, screenWidth }: Props) => {
+  const { width } = useWindowDimensions();
+  const resolvedScreenWidth = screenWidth ?? width;
 
-export const StyledSystemProvider = ({ children, theme }: Props) => {
   return (
-    <StyledSystemContext.Provider value={{ theme: fillNullishThemeKey(theme) }}>
+    <StyledSystemContext.Provider
+      value={{ theme: createTheme(theme), screenWidth: resolvedScreenWidth }}
+    >
       {children}
     </StyledSystemContext.Provider>
   );
 };
+
+export const StyledSystemProvider = StyledSystemProviderInner;

package/src/util/createSxComponent.tsx

@@ -6,11 +6,13 @@ import type { UseSxOptions } from '../hook/useSx';
 import { useSx } from '../hook/useSx';
 
 export function createSxComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  type MergedProps = Omit<Props, keyof SxProps> & SxProps;
+
   return ({
     defaultProps,
     sxOptions,
-  }: { defaultProps?: Props & SxProps; sxOptions?: UseSxOptions } = {}) => {
-    const Transformed = forwardRef<Ref, Props & SxProps>(function (props, ref) {
+  }: { defaultProps?: MergedProps; sxOptions?: UseSxOptions } = {}) => {
+    const Transformed = forwardRef<Ref, MergedProps>(function (props, ref) {
       const { filteredProps, getStyle } = useSx({ ...defaultProps, ...props }, sxOptions);
 
       return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
@@ -23,11 +25,13 @@ export function createSxComponent<Props extends object, Ref>(Base: ComponentType
 }
 
 export function createSxTextComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  type MergedProps = Omit<Props, keyof TextSxProps> & TextSxProps;
+
   return ({
     defaultProps,
     sxOptions,
-  }: { defaultProps?: Props & TextSxProps; sxOptions?: UseSxOptions } = {}) => {
-    const Transformed = forwardRef<Ref, Props & TextSxProps>(function (props, ref) {
+  }: { defaultProps?: MergedProps; sxOptions?: UseSxOptions } = {}) => {
+    const Transformed = forwardRef<Ref, MergedProps>(function (props, ref) {
       const { filteredProps, getStyle } = useSx(
         { ...defaultProps, ...props },
         { styleType: 'TextStyle', ...sxOptions },