react-native-unistyles 1.0.0-beta.3 → 1.0.0-beta.5

package/lib/typescript/src/types.d.ts

@@ -1,25 +1,65 @@
-import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native';
-import type { CSSProperties } from 'react';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { MatrixTransform, PerpectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+import type { MediaQueries } from './mediaQueries';
+export type Breakpoints = Record<string, number>;
+export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]];
 export type ScreenSize = {
     width: number;
     height: number;
 };
-export type CreateStylesFactory<T, Theme> = (theme: Theme) => T;
-type StyleProperty<T, B extends Record<string, number>> = {
-    [key in keyof T]?: {
-        [innerKey in keyof B]?: T[key];
+export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST;
+type StyleProperty<T, B extends Breakpoints> = {
+    [K in keyof T]: {
+        [innerKey in keyof B]?: T[K];
     } | {
-        [innerKey in `:w${string}` | `:h${string}`]?: T[key];
-    } | T[key];
+        [innerKey in MediaQueries]?: T[K];
+    } | T[K];
 };
-export type CustomNamedStyles<T, B extends Record<string, number>> = {
-    [P in keyof T]: ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B> | ((...args: Array<never>) => ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B>);
+type ShadowOffsetProps<B> = {
+    shadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number;
+        } | {
+            [innerKey in MediaQueries]: number;
+        };
+        height: number | {
+            [innerKey in keyof B]?: number;
+        } | {
+            [innerKey in MediaQueries]: number;
+        };
+    };
 };
-export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>> ? V : T extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : {
+type TextShadowOffsetProps<B> = {
+    textShadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number;
+        } | {
+            [innerKey in MediaQueries]: number;
+        };
+        height: number | {
+            [innerKey in keyof B]?: number;
+        } | {
+            [innerKey in MediaQueries]: number;
+        };
+    };
+};
+type TransformStyles<B extends Breakpoints> = PerpectiveTransform | StyleProperty<PerpectiveTransform, B> | RotateTransform | StyleProperty<RotateTransform, B> | RotateXTransform | StyleProperty<RotateXTransform, B> | RotateYTransform | StyleProperty<RotateYTransform, B> | RotateZTransform | StyleProperty<RotateZTransform, B> | ScaleTransform | StyleProperty<ScaleTransform, B> | ScaleXTransform | StyleProperty<ScaleXTransform, B> | ScaleYTransform | StyleProperty<ScaleYTransform, B> | TranslateXTransform | StyleProperty<TranslateXTransform, B> | TranslateYTransform | StyleProperty<TranslateYTransform, B> | SkewXTransform | StyleProperty<SkewXTransform, B> | SkewYTransform | StyleProperty<SkewYTransform, B> | MatrixTransform | StyleProperty<MatrixTransform, B>;
+type TransformProps<B extends Breakpoints> = {
+    transform: Array<TransformStyles<B>>;
+};
+type UnistyleView = Omit<Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
+type UnistyleText = Omit<Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
+type UnistyleImage = Omit<Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
+export type StaticStyles<B extends Breakpoints> = (UnistyleView | StyleProperty<UnistyleView, B>) | (UnistyleText | StyleProperty<UnistyleText, B>) | (UnistyleImage | StyleProperty<UnistyleImage, B>) & TransformProps<B> & ShadowOffsetProps<B> & TextShadowOffsetProps<B>;
+export type CustomNamedStyles<T, B extends Breakpoints> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => unknown ? (...args: A) => StaticStyles<B> : StaticStyles<B>;
+};
+type WithEmptyObject<V> = keyof V extends never ? {} : V;
+export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>> ? WithEmptyObject<V> : T extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : {
     [K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : T[K] extends object ? ExtractBreakpoints<T[K], B> : T[K];
 };
-export type RemoveKeysWithPrefix<T, B extends Record<string, number>> = T extends (...args: Array<any>) => infer R ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B> : T extends object ? T extends Record<string, infer _V> ? {
-    [K in keyof T as K extends `:w${string}` | `:h${string}` ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B>;
+export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B> : T extends object ? T extends Record<string, infer _V> ? {
+    [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B>;
 } : {
     [K in keyof T]: RemoveKeysWithPrefix<T[K], B>;
 } : T;

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/utils/breakpoints.d.ts

@@ -1,4 +1,4 @@
-import type { ScreenSize } from '../types';
+import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types';
 /**
  * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
  *
@@ -18,7 +18,7 @@ import type { ScreenSize } from '../types';
  * const input = { md: 768, lg: 1024, sm: 0 }
  * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
  */
-export declare const sortAndValidateBreakpoints: <B extends Record<string, number>>(breakpoints: B) => B;
+export declare const sortAndValidateBreakpoints: <B extends Breakpoints>(breakpoints: B) => B;
 /**
  * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
  *
@@ -27,14 +27,14 @@ export declare const sortAndValidateBreakpoints: <B extends Record<string, numbe
  *
  * @template B - An object type where keys are strings and values are numbers representing screen widths.
  * @param {number} width - The screen width to determine the breakpoint for.
- * @param {B} breakpoints - The breakpoints object to use for determination.
+ * @param breakpointEntries - sorted pairs of breakpoints
  * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
  *
  * @example
  * const breakpoints = { sm: 0, md: 768, lg: 1024 }
  * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
  */
-export declare const getBreakpointFromScreenWidth: <B extends Record<string, number>>(width: number, breakpoints: B) => keyof B & string;
+export declare const getBreakpointFromScreenWidth: <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>) => keyof B & string;
 /**
  * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
  *
@@ -47,7 +47,7 @@ export declare const getBreakpointFromScreenWidth: <B extends Record<string, num
  * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param {B} breakpoints - An object representing the defined breakpoints.
+ * @param breakpointPairs - sorted pairs of breakpoints
  *
  * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
  *
@@ -59,5 +59,5 @@ export declare const getBreakpointFromScreenWidth: <B extends Record<string, num
  *
  * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
  */
-export declare const getValueForBreakpoint: <B extends Record<string, number>>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => string | number | Record<keyof B & string, string | number | undefined>[keyof B & string] | undefined;
+export declare const getValueForBreakpoint: <B extends Breakpoints>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => string | number | undefined;
 //# sourceMappingURL=breakpoints.d.ts.map

package/lib/typescript/src/utils/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,yDAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,4CAA6C,MAAM,qCAe3F,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,6IAA8I,UAAU,0HAmCzL,CAAA"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAGhF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,8CAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,iCAAkC,MAAM,oEAchF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,kIAGlB,UAAU,kDAEvB,MAAM,GAAG,MAAM,GAAG,SA+BpB,CAAA"}

package/lib/typescript/src/utils/common.d.ts

@@ -1,2 +1,4 @@
 export declare const throwError: (message: string) => never;
+export declare const warn: (message: string) => void;
+export declare const isWeb: () => boolean;
 //# sourceMappingURL=common.d.ts.map

package/lib/typescript/src/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,KAAK,eAA8B,CAAA"}

package/lib/typescript/src/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { normalizeStyles } from './normalizeStyles';
 export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints';
 export { proxifyFunction, parseStyle } from './styles';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}

package/lib/typescript/src/utils/normalizeStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const normalizeStyles: <T>(styles: T) => T;
+//# sourceMappingURL=normalizeStyles.d.ts.map

package/lib/typescript/src/utils/normalizeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeStyles.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,qBAAgC,CAAA"}

package/lib/typescript/src/utils/normalizeStyles.web.d.ts

@@ -0,0 +1,2 @@
+export declare const normalizeStyles: <T extends {}>(styles: T) => T;
+//# sourceMappingURL=normalizeStyles.web.d.ts.map

package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeStyles.web.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.web.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,eAAe,gCAwB3B,CAAA"}

package/lib/typescript/src/utils/styles.d.ts

@@ -1,4 +1,4 @@
-import type { CustomNamedStyles, ScreenSize } from '../types';
+import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types';
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
  *
@@ -7,7 +7,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
  * @param {Function} fn - The function to be proxified.
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param {B} breakpoints - An object representing the defined breakpoints.
+ * @param breakpointPairs - sorted pairs of breakpoints
  *
  * @returns {Function} Returns the proxified function
  *
@@ -20,7 +20,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
  * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
  * proxifiedFunction() // parsed style based on screenSize and breakpoints
  */
-export declare const proxifyFunction: <B extends Record<string, number>>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => Function;
+export declare const proxifyFunction: <B extends Breakpoints>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => Function;
 /**
  * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
  *
@@ -33,7 +33,7 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
  * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param {B} breakpoints - An object representing the defined breakpoints.
+ * @param breakpointPairs - sorted pairs of breakpoints
  *
  * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
  *
@@ -46,5 +46,5 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
  * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
  * // { fontSize: '12px' }
  */
-export declare const parseStyle: <T, B extends Record<string, number>>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => T;
+export declare const parseStyle: <T, B extends Breakpoints>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => T;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,yCACpB,QAAQ,4CACA,UAAU,qBAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,kHAGP,UAAU,sBAsCzB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAKnG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,8BACpB,QAAQ,4CACA,UAAU,kDAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,uGAGP,UAAU,mDAmDzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -68,12 +68,19 @@
     "react": "18.2.0",
     "react-native": "0.72.5",
     "react-native-builder-bob": "0.23.0",
+    "react-native-web": "0.19.9",
     "release-it": "16.2.1",
     "typescript": "5.2.2"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-web": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-web": {
+      "optional": true
+    }
   },
   "workspaces": [
     "example"

package/src/createUnistyles.ts

@@ -1,22 +1,43 @@
 import { useContext } from 'react'
-import type { CreateStylesFactory, CustomNamedStyles, ScreenSize, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
+import { StyleSheet } from 'react-native'
+import type {
+    Breakpoints,
+    CreateStylesFactory,
+    CustomNamedStyles,
+    ExtractBreakpoints,
+    RemoveKeysWithPrefix,
+    SortedBreakpointEntries
+} from './types'
 import { UnistylesContext } from './UnistylesTheme'
-import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
 import { useDimensions } from './hooks'
+import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
 
-export const createUnistyles = <B extends Record<string, number>, T = {}>(breakpoints: B) => {
-    const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints) as B
+export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) => {
+    const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
+    const sortedBreakpointEntries = Object
+        .entries(sortedBreakpoints) as SortedBreakpointEntries<B>
 
     return {
-        createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => styles as S,
+        /**
+         * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
+         */
+        createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
+            if (typeof styles === 'function') {
+                return styles as X
+            }
+
+            return styles as S
+        },
+        createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
+            if (typeof styles === 'function') {
+                return styles as X
+            }
+
+            return styles as S
+        },
         useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
             const theme = useContext(UnistylesContext) as T
-            const dimensions = useDimensions()
-            const breakpoint = getBreakpointFromScreenWidth<B>(dimensions.width, sortedBreakpoints)
-            const screenSize: ScreenSize = {
-                width: dimensions.width,
-                height: dimensions.height
-            }
+            const screenSize = useDimensions()
 
             if (!stylesheet) {
                 return {
@@ -28,23 +49,24 @@ export const createUnistyles = <B extends Record<string, number>, T = {}>(breakp
             const parsedStyles = typeof stylesheet === 'function'
                 ? stylesheet(theme)
                 : stylesheet
+            const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
 
             const dynamicStyleSheet = Object
                 .entries(parsedStyles)
                 .reduce((acc, [key, value]) => {
-                    const x = value as CustomNamedStyles<ST, B>
+                    const style = value as CustomNamedStyles<ST, B>
 
                     if (typeof value === 'function') {
                         return {
                             ...acc,
-                            [key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpoints)
+                            [key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpointEntries)
                         }
                     }
 
-                    return {
+                    return StyleSheet.create({
                         ...acc,
-                        [key]: parseStyle<ST, B>(x, breakpoint, screenSize, sortedBreakpoints)
-                    }
+                        [key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
+                    })
                 }, {} as ST)
 
             return {

package/src/mediaQueries.ts

@@ -0,0 +1,33 @@
+// this is super weird, but number passes empty string and bigint does not
+export type MediaQueries =
+// For :w
+`:w[${bigint}]` |
+`:w[,${bigint}]` |
+`:w[${bigint},${bigint}]` |
+
+// For :h
+`:h[${bigint}]` |
+`:h[,${bigint}]` |
+`:h[${bigint},${bigint}]` |
+
+// Combinations of :w and :h
+`:w[${bigint}]:h[${bigint}]` |
+`:w[${bigint},${bigint}]:h[${bigint}]` |
+`:w[${bigint}]:h[${bigint},${bigint}]` |
+`:w[${bigint},${bigint}]:h[${bigint},${bigint}]` |
+`:w[,${bigint}]:h[,${bigint}]` |
+`:w[,${bigint}]:h[${bigint}]` |
+`:w[${bigint}]:h[,${bigint}]` |
+`:w[,${bigint}]:h[${bigint},${bigint}]` |
+`:w[${bigint},${bigint}]:h[,${bigint}]` |
+
+// Combinations of :h and :w
+`:h[${bigint}]:w[${bigint}]` |
+`:h[${bigint},${bigint}]:w[${bigint}]` |
+`:h[${bigint}]:w[${bigint},${bigint}]` |
+`:h[${bigint},${bigint}]:w[${bigint},${bigint}]` |
+`:h[,${bigint}]:w[,${bigint}]` |
+`:h[,${bigint}]:w[${bigint}]` |
+`:h[${bigint}]:w[,${bigint}]` |
+`:h[,${bigint}]:w[${bigint},${bigint}]` |
+`:h[${bigint},${bigint}]:w[,${bigint}]`

package/src/types.ts

@@ -1,38 +1,109 @@
-import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native'
-import type { CSSProperties } from 'react'
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type {
+    MatrixTransform,
+    PerpectiveTransform,
+    RotateTransform,
+    RotateXTransform,
+    RotateYTransform,
+    RotateZTransform,
+    ScaleTransform,
+    ScaleXTransform,
+    ScaleYTransform,
+    SkewXTransform,
+    SkewYTransform,
+    TranslateXTransform,
+    TranslateYTransform
+} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
+import type { MediaQueries } from './mediaQueries'
+
+export type Breakpoints = Record<string, number>
+
+export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]]
 
 export type ScreenSize = {
     width: number,
     height: number
 }
 
-export type CreateStylesFactory<T, Theme> = (theme: Theme) => T
+export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
 
-type StyleProperty<T, B extends Record<string, number>> = {
-    [key in keyof T]?: {
-        [innerKey in keyof B]?: T[key]
+type StyleProperty<T, B extends Breakpoints> = {
+    [K in keyof T]: {
+        [innerKey in keyof B]?: T[K]
     } | {
-        [innerKey in `:w${string}` | `:h${string}`]?: T[key]
-    } | T[key]
+        [innerKey in MediaQueries]?: T[K]
+    } | T[K]
+}
+
+type ShadowOffsetProps<B> = {
+    shadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number
+        } | {
+            [innerKey in MediaQueries]: number
+        },
+        height: number | {
+            [innerKey in keyof B]?: number
+        } | {
+            [innerKey in MediaQueries]: number
+        }
+    }
+}
+
+type TextShadowOffsetProps<B> = {
+    textShadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number
+        } | {
+            [innerKey in MediaQueries]: number
+        },
+        height: number | {
+            [innerKey in keyof B]?: number
+        } | {
+            [innerKey in MediaQueries]: number
+        }
+    }
 }
 
-export type CustomNamedStyles<T, B extends Record<string, number>> = {
-    [P in keyof T]:
-    | ViewStyle
-    | TextStyle
-    | ImageStyle
-    | TransformsStyle
-    | CSSProperties
-    | StyleProperty<ViewStyle, B>
-    | StyleProperty<ImageStyle, B>
-    | StyleProperty<TextStyle, B>
-    | (
-        (...args: Array<never>) => ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B>
-    )
+type TransformStyles<B extends Breakpoints> =
+    PerpectiveTransform | StyleProperty<PerpectiveTransform, B>
+    | RotateTransform | StyleProperty<RotateTransform, B>
+    | RotateXTransform | StyleProperty<RotateXTransform, B>
+    | RotateYTransform | StyleProperty<RotateYTransform, B>
+    | RotateZTransform | StyleProperty<RotateZTransform, B>
+    | ScaleTransform | StyleProperty<ScaleTransform, B>
+    | ScaleXTransform | StyleProperty<ScaleXTransform, B>
+    | ScaleYTransform | StyleProperty<ScaleYTransform, B>
+    | TranslateXTransform | StyleProperty<TranslateXTransform, B>
+    | TranslateYTransform | StyleProperty<TranslateYTransform, B>
+    | SkewXTransform | StyleProperty<SkewXTransform, B>
+    | SkewYTransform | StyleProperty<SkewYTransform, B>
+    | MatrixTransform | StyleProperty<MatrixTransform, B>
+
+type TransformProps<B extends Breakpoints> = {
+    transform: Array<TransformStyles<B>>
 }
 
-export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>>
-    ? V
+type UnistyleView = Omit<Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
+type UnistyleText = Omit<Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
+type UnistyleImage = Omit<Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
+
+export type StaticStyles<B extends Breakpoints> =
+    | (UnistyleView | StyleProperty<UnistyleView, B>)
+    | (UnistyleText | StyleProperty<UnistyleText, B>)
+    | (UnistyleImage | StyleProperty<UnistyleImage, B>)
+    & TransformProps<B> & ShadowOffsetProps<B> & TextShadowOffsetProps<B>
+
+export type CustomNamedStyles<T, B extends Breakpoints> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => unknown
+        ? (...args: A) => StaticStyles<B>
+        : StaticStyles<B>
+}
+
+type WithEmptyObject<V> = keyof V extends never ? {} : V
+
+export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
+    ? WithEmptyObject<V>
     : T extends (...args: infer A) => infer R
         ? (...args: A) => ExtractBreakpoints<R, B>
         : {
@@ -43,10 +114,10 @@ export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends
                     : T[K]
         }
 
-export type RemoveKeysWithPrefix<T, B extends Record<string, number>> = T extends (...args: Array<any>) => infer R
+export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
     ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
     : T extends object
         ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends `:w${string}` | `:h${string}` ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
+            ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
             : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
         : T

package/src/utils/breakpoints.ts

@@ -1,5 +1,5 @@
 import { throwError } from './common'
-import type { ScreenSize } from '../types'
+import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
 import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
 
 /**
@@ -21,7 +21,7 @@ import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
  * const input = { md: 768, lg: 1024, sm: 0 }
  * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
  */
-export const sortAndValidateBreakpoints = <B extends Record<string, number>>(breakpoints: B): B => {
+export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
     const sortedPairs = Object
         .entries(breakpoints)
         .sort((breakpoint1, breakpoint2) => {
@@ -54,16 +54,15 @@ export const sortAndValidateBreakpoints = <B extends Record<string, number>>(bre
  *
  * @template B - An object type where keys are strings and values are numbers representing screen widths.
  * @param {number} width - The screen width to determine the breakpoint for.
- * @param {B} breakpoints - The breakpoints object to use for determination.
+ * @param breakpointEntries - sorted pairs of breakpoints
  * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
  *
  * @example
  * const breakpoints = { sm: 0, md: 768, lg: 1024 }
  * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
  */
-export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(width: number, breakpoints: B): keyof B & string => {
-    const [key] = Object
-        .entries(breakpoints)
+export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
+    const [key] = breakpointEntries
         .find(([, value], index, otherBreakpoints) => {
             const minVal = value
             const maxVal = otherBreakpoints[index + 1]?.[1]
@@ -90,7 +89,7 @@ export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(w
  * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param {B} breakpoints - An object representing the defined breakpoints.
+ * @param breakpointPairs - sorted pairs of breakpoints
  *
  * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
  *
@@ -102,7 +101,12 @@ export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(w
  *
  * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
  */
-export const getValueForBreakpoint = <B extends Record<string, number>>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => {
+export const getValueForBreakpoint = <B extends Breakpoints>(
+    value: Record<keyof B & string, string | number | undefined>,
+    breakpoint: keyof B & string,
+    screenSize: ScreenSize,
+    breakpointPairs: SortedBreakpointEntries<B>
+): string | number | undefined => {
     // the highest priority is for custom media queries
     const customMediaQueries = Object
         .entries(value)
@@ -123,18 +127,14 @@ export const getValueForBreakpoint = <B extends Record<string, number>>(value: R
     }
 
     // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
-    const allBreakpoints = Object
-        .entries(breakpoints)
-        .map(([key, bpValue]) => [key.toLowerCase(), bpValue])
-
-    const currentBreakpoint = allBreakpoints
+    const currentBreakpoint = breakpointPairs
         .findIndex(([key]) => key === unifiedKey)
 
-    const availableBreakpoints = allBreakpoints
+    const availableBreakpoints = breakpointPairs
         .filter(([key], index) => index < currentBreakpoint && key && key in value)
         .map(([key]) => key)
 
-    return allBreakpoints.length > 0
+    return breakpointPairs.length > 0
         ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
         : undefined
 }

package/src/utils/common.ts

@@ -1,3 +1,11 @@
+import { Platform } from 'react-native'
+
 export const throwError = (message: string) => {
     throw new Error(`🦄 [react-native-unistyles]: ${message}`)
 }
+
+export const warn = (message: string) => {
+    console.warn(`🦄 [react-native-unistyles]: ${message}`)
+}
+
+export const isWeb = () => Platform.OS === 'web'

package/src/utils/index.ts

@@ -1,2 +1,3 @@
+export { normalizeStyles } from './normalizeStyles'
 export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'