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

package/src/util/createTheme.test.ts

@@ -0,0 +1,126 @@
+import type { ThemedDict } from '../@types/ThemedDict';
+import { defaultTheme } from '../@types/ThemedDict';
+
+import { createTheme } from './createTheme';
+
+describe('createTheme', () => {
+  describe('create mode (single argument)', () => {
+    it('returns all empty defaults when called without arguments', () => {
+      const theme = createTheme();
+      expect(theme).toEqual({
+        colors: {},
+        space: {},
+        sizes: {},
+        radii: {},
+        typography: {},
+        breakpoints: [],
+      });
+    });
+
+    it('returns all empty defaults when called with empty object', () => {
+      const theme = createTheme({});
+      expect(theme).toEqual({
+        colors: {},
+        space: {},
+        sizes: {},
+        radii: {},
+        typography: {},
+        breakpoints: [],
+      });
+    });
+
+    it('keeps provided groups and fills missing ones with empty defaults', () => {
+      const theme = createTheme({
+        colors: { primary: '#000' },
+        space: { '1': 4 },
+      });
+      expect(theme.colors).toEqual({ primary: '#000' });
+      expect(theme.space).toEqual({ '1': 4 });
+      expect(theme.sizes).toEqual({});
+      expect(theme.radii).toEqual({});
+      expect(theme.typography).toEqual({});
+      expect(theme.breakpoints).toEqual([]);
+    });
+
+    it('keeps provided breakpoints', () => {
+      const theme = createTheme({ breakpoints: [480, 768] });
+      expect(theme.breakpoints).toEqual([480, 768]);
+    });
+  });
+
+  describe('extend mode (two arguments)', () => {
+    const base: ThemedDict = {
+      colors: { red: '#FF0000', blue: '#0000FF' },
+      space: { '1': 4, '2': 8 },
+      sizes: { sm: 16 },
+      radii: { md: 8 },
+      typography: { body: { fontSize: 16, lineHeight: 24 } },
+      breakpoints: [480, 768],
+    };
+
+    it('returns base as-is when overrides is empty', () => {
+      const theme = createTheme(base, {});
+      expect(theme).toEqual(base);
+    });
+
+    it('merges colors (keeps existing + adds new)', () => {
+      const theme = createTheme(base, { colors: { brand: '#FF6600' } });
+      expect(theme.colors).toEqual({ red: '#FF0000', blue: '#0000FF', brand: '#FF6600' });
+    });
+
+    it('overrides existing token values', () => {
+      const theme = createTheme(base, { colors: { red: '#CC0000' } });
+      expect(theme.colors.red).toBe('#CC0000');
+      expect(theme.colors.blue).toBe('#0000FF');
+    });
+
+    it('merges each token group independently', () => {
+      const theme = createTheme(base, {
+        space: { '3': 12 },
+        sizes: { lg: 32 },
+        radii: { lg: 16 },
+        typography: { h1: { fontSize: 32, fontWeight: 'bold', lineHeight: 40 } },
+      });
+      expect(theme.space).toEqual({ '1': 4, '2': 8, '3': 12 });
+      expect(theme.sizes).toEqual({ sm: 16, lg: 32 });
+      expect(theme.radii).toEqual({ md: 8, lg: 16 });
+      expect(theme.typography).toEqual({
+        body: { fontSize: 16, lineHeight: 24 },
+        h1: { fontSize: 32, fontWeight: 'bold', lineHeight: 40 },
+      });
+    });
+
+    it('replaces breakpoints when provided in overrides', () => {
+      const theme = createTheme(base, { breakpoints: [500, 1024, 1440] });
+      expect(theme.breakpoints).toEqual([500, 1024, 1440]);
+    });
+
+    it('falls back to base breakpoints when overrides omits breakpoints', () => {
+      const theme = createTheme(base, { colors: { brand: '#000' } });
+      expect(theme.breakpoints).toEqual([480, 768]);
+    });
+
+    it('does not mutate base or overrides', () => {
+      const baseCopy = JSON.parse(JSON.stringify(base));
+      const overrides = { colors: { brand: '#FF6600' } };
+      const overridesCopy = JSON.parse(JSON.stringify(overrides));
+
+      createTheme(base, overrides);
+
+      expect(base).toEqual(baseCopy);
+      expect(overrides).toEqual(overridesCopy);
+    });
+
+    it('works with defaultTheme as base', () => {
+      const theme = createTheme(defaultTheme, {
+        colors: { brand: '#FF6600' },
+        space: { huge: 200 },
+      });
+      expect(theme.colors.brand).toBe('#FF6600');
+      expect(theme.colors.white).toBe('#FFFFFF');
+      expect(theme.space.huge).toBe(200);
+      expect(theme.space['1']).toBe(4);
+      expect(theme.breakpoints).toEqual(defaultTheme.breakpoints);
+    });
+  });
+});

package/src/util/createTheme.ts

@@ -0,0 +1,29 @@
+import type { ThemedDict } from '../@types/ThemedDict';
+
+export function createTheme(config?: Partial<ThemedDict>): ThemedDict;
+export function createTheme(base: ThemedDict, overrides: Partial<ThemedDict>): ThemedDict;
+export function createTheme(
+  baseOrConfig: Partial<ThemedDict> = {},
+  overrides?: Partial<ThemedDict>,
+): ThemedDict {
+  if (overrides !== undefined) {
+    return {
+      colors: { ...baseOrConfig.colors, ...overrides.colors },
+      space: { ...baseOrConfig.space, ...overrides.space },
+      sizes: { ...baseOrConfig.sizes, ...overrides.sizes },
+      radii: { ...baseOrConfig.radii, ...overrides.radii },
+      typography: { ...baseOrConfig.typography, ...overrides.typography },
+      breakpoints: overrides.breakpoints ?? baseOrConfig.breakpoints ?? [],
+    };
+  }
+
+  return {
+    colors: {},
+    space: {},
+    sizes: {},
+    radii: {},
+    typography: {},
+    breakpoints: [],
+    ...baseOrConfig,
+  };
+}

package/src/util/propsToThemedStyle.ts

@@ -1,5 +1,5 @@
 import type { AnyStyle } from '../@types/AnyStyle';
-import type { TextSxProps } from '../@types/SxProps';
+import type { ResolvedTextSxProps, TextSxProps } from '../@types/SxProps';
 import type { ThemedDict } from '../@types/ThemedDict';
 import { createTokenParsers } from '../internal/TokenParser/TokenParser';
 import {
@@ -7,16 +7,21 @@ import {
   fillViewStyleIfNotNullish,
 } from '../internal/util/fillStyleIfNotNullish';
 import { printWarning } from '../internal/util/printWarning';
+import { resolveResponsiveSx } from '../internal/util/resolveResponsiveValue';
 
 export type ThemedStyleType = 'ViewStyle' | 'TextStyle';
 export const propsToThemedStyle = ({
   theme,
-  sx,
+  sx: rawSx,
   styleType = 'ViewStyle',
+  breakpoints = [],
+  screenWidth = 0,
 }: {
   theme?: ThemedDict;
   sx?: TextSxProps;
   styleType?: ThemedStyleType;
+  breakpoints?: number[];
+  screenWidth?: number;
 }): AnyStyle | undefined => {
   const ret: AnyStyle = {};
 
@@ -26,10 +31,12 @@ export const propsToThemedStyle = ({
     return;
   }
 
-  if (!sx) {
+  if (!rawSx) {
     return;
   }
 
+  const sx: ResolvedTextSxProps = resolveResponsiveSx({ sx: rawSx, breakpoints, screenWidth });
+
   const { colors, radii, sizes, space, spaceAsNumberOnly, typography } = createTokenParsers(theme);
 
   // region colors

package/lib/commonjs/internal/util/fillNullishThemeKey.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fillNullishThemeKey = void 0;
-const fillNullishThemeKey = theme => {
-  return {
-    colors: {},
-    space: {},
-    sizes: {},
-    radii: {},
-    typography: {},
-    ...theme
-  };
-};
-exports.fillNullishThemeKey = fillNullishThemeKey;
-//# sourceMappingURL=fillNullishThemeKey.js.map

package/lib/commonjs/internal/util/fillNullishThemeKey.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fillNullishThemeKey","theme","colors","space","sizes","radii","typography","exports"],"sourceRoot":"../../../../src","sources":["internal/util/fillNullishThemeKey.ts"],"mappings":";;;;;;AAEO,MAAMA,mBAAmB,GAAIC,KAA0B,IAAiB;EAC7E,OAAO;IACLC,MAAM,EAAE,CAAC,CAAC;IACVC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,UAAU,EAAE,CAAC,CAAC;IACd,GAAGL;EACL,CAAC;AACH,CAAC;AAACM,OAAA,CAAAP,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/lib/commonjs/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/lib/module/internal/util/fillNullishThemeKey.js

@@ -1,13 +0,0 @@
-"use strict";
-
-export const fillNullishThemeKey = theme => {
-  return {
-    colors: {},
-    space: {},
-    sizes: {},
-    radii: {},
-    typography: {},
-    ...theme
-  };
-};
-//# sourceMappingURL=fillNullishThemeKey.js.map

package/lib/module/internal/util/fillNullishThemeKey.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fillNullishThemeKey","theme","colors","space","sizes","radii","typography"],"sourceRoot":"../../../../src","sources":["internal/util/fillNullishThemeKey.ts"],"mappings":";;AAEA,OAAO,MAAMA,mBAAmB,GAAIC,KAA0B,IAAiB;EAC7E,OAAO;IACLC,MAAM,EAAE,CAAC,CAAC;IACVC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,UAAU,EAAE,CAAC,CAAC;IACd,GAAGL;EACL,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/typescript/src/internal/util/fillNullishThemeKey.d.ts

@@ -1,3 +0,0 @@
-import type { ThemedDict } from '../../@types/ThemedDict';
-export declare const fillNullishThemeKey: (theme: Partial<ThemedDict>) => ThemedDict;
-//# sourceMappingURL=fillNullishThemeKey.d.ts.map

package/lib/typescript/src/internal/util/fillNullishThemeKey.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fillNullishThemeKey.d.ts","sourceRoot":"","sources":["../../../../../src/internal/util/fillNullishThemeKey.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,eAAO,MAAM,mBAAmB,GAAI,OAAO,OAAO,CAAC,UAAU,CAAC,KAAG,UAShE,CAAC"}

package/src/internal/util/fillNullishThemeKey.ts

@@ -1,12 +0,0 @@
-import type { ThemedDict } from '../../@types/ThemedDict';
-
-export const fillNullishThemeKey = (theme: Partial<ThemedDict>): ThemedDict => {
-  return {
-    colors: {},
-    space: {},
-    sizes: {},
-    radii: {},
-    typography: {},
-    ...theme,
-  };
-};