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

package/README.md

@@ -7,7 +7,7 @@
 </picture>
 
 ## Features
-- ⚡ Blazing fast, adds around ~5ms on top of StyleSheet*
+- ⚡ Blazing fast, adds around ~3ms on top of StyleSheet*
 - 🎳 Share up to 100% of your styles across platforms in monorepo
 - 🎯 Doesn't introduce new components
 - 🖥️ Supports custom breakpoints and css-like media queries
@@ -230,6 +230,86 @@ const stylesheet = createStyles(theme => ({
 }))
 ```
 
+## Dynamic functions
+
+Every style can be transformed to dynamic function to take additional parameters from JSX:
+
+```tsx
+export const ExampleUnistyles = () => {
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <ScrollView contentContainerStyle={styles.scrollContainer}>
+            {posts.map((post, index) => (
+                <View
+                    key={post.key}
+                    // call it as regular function
+                    style={styles.post(index)}
+                >
+                    <Text>
+                        {post.title}
+                    </Text>
+                </View>
+            ))}
+        </ScrollView>
+    )
+}
+
+const stylesheet = createStyles({
+    scrollContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    // dynamic function
+    post: (index: number) => ({
+        backgroundColor: index % 2 === 0 ? 'gold' : 'silver',
+    })
+})
+```
+
+## Migrate from StyleSheet
+
+`react-native-unistyles` embraces the simplicity of `StyleSheet`, making it easy to integrate into your project.
+
+You can replace `StyleSheet.create` with `createStyles` and it will work exactly the same:
+
+```diff
+-const styles = StyleSheet.create({
++const styles = createStyles({
+    scrollContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    }
+})
+```
+
+If you need additional functionalities such as `breakpoints`, `media-queries` or `theme` you can incrementally pass `style(sheet)` into the `useStyles` hook:
+
+```ts
+export const ExampleUnistyles = () => {
+  const { styles } = useStyles(stylesheet)
+  // ... your component code
+}
+```
+
+With the hook in place, you can now use `breakpoints` and `media-queries`.
+
+Additionally, to access the `theme` use a function instead of an  `object`:
+
+```diff
+-const stylesheet = createStyles({
++const stylesheet = createStyles(theme => ({
+    scrollContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: theme.colors.background
+    }
+}))
+```
+
 ## Example
 
 In order to check out working example go to [example/](./example).

package/lib/commonjs/createUnistyles.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createUnistyles = void 0;
 var _react = require("react");
-var _reactNative = require("react-native");
 var _UnistylesTheme = require("./UnistylesTheme");
 var _utils = require("./utils");
+var _hooks = require("./hooks");
 const createUnistyles = breakpoints => {
   const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
   return {
     createStyles: styles => styles,
     useStyles: stylesheet => {
       const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
-      const dimensions = (0, _reactNative.useWindowDimensions)();
+      const dimensions = (0, _hooks.useDimensions)();
       const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(dimensions.width, sortedBreakpoints);
       const screenSize = {
         width: dimensions.width,

package/lib/commonjs/createUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","createStyles","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","dimensions","useWindowDimensions","breakpoint","getBreakpointFromScreenWidth","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x","proxifyFunction","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAM;EAEtE,OAAO;IACHG,YAAY,EAAsCC,MAAqC,IAAKA,MAAW;IACvGC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,gCAAmB,EAAC,CAAC;MACxC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEb,iBAAiB,CAAC;MACvF,MAAMc,UAAsB,GAAG;QAC3BD,KAAK,EAAEJ,UAAU,CAACI,KAAK;QACvBE,MAAM,EAAEN,UAAU,CAACM;MACvB,CAAC;MAED,IAAI,CAACV,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMa,YAAY,GAAG,OAAOX,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMY,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEb,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGqB,GAAG;UACN,CAACE,GAAG,GAAG,IAAAI,iBAAU,EAAQF,CAAC,EAAEd,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHM,KAAK;QACLH,MAAM,EAAEc;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAA9B,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["_react","require","_UnistylesTheme","_utils","_hooks","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","createStyles","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","dimensions","useDimensions","breakpoint","getBreakpointFromScreenWidth","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x","proxifyFunction","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAM;EAEtE,OAAO;IACHG,YAAY,EAAsCC,MAAqC,IAAKA,MAAW;IACvGC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,oBAAa,EAAC,CAAC;MAClC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEb,iBAAiB,CAAC;MACvF,MAAMc,UAAsB,GAAG;QAC3BD,KAAK,EAAEJ,UAAU,CAACI,KAAK;QACvBE,MAAM,EAAEN,UAAU,CAACM;MACvB,CAAC;MAED,IAAI,CAACV,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMa,YAAY,GAAG,OAAOX,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMY,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEb,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGqB,GAAG;UACN,CAACE,GAAG,GAAG,IAAAI,iBAAU,EAAQF,CAAC,EAAEd,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHM,KAAK;QACLH,MAAM,EAAEc;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAA9B,eAAA,GAAAA,eAAA"}

package/lib/commonjs/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDimensions", {
+  enumerable: true,
+  get: function () {
+    return _useDimensions.useDimensions;
+  }
+});
+var _useDimensions = require("./useDimensions");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_useDimensions","require"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA"}

package/lib/commonjs/hooks/useDimensions.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDimensions = void 0;
+var _reactNative = require("react-native");
+const useDimensions = () => {
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  return {
+    width,
+    height
+  };
+};
+exports.useDimensions = useDimensions;
+//# sourceMappingURL=useDimensions.js.map

package/lib/commonjs/hooks/useDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","useDimensions","width","height","useWindowDimensions","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAGO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EAE/C,OAAO;IACHF,KAAK;IACLC;EACJ,CAAC;AACL,CAAC;AAAAE,OAAA,CAAAJ,aAAA,GAAAA,aAAA"}

package/lib/commonjs/hooks/useDimensions.web.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDimensions = void 0;
+var _react = require("react");
+const useDimensions = () => {
+  const timerRef = (0, _react.useRef)();
+  const [screenSize, setScreenSize] = (0, _react.useState)({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      }), 100);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timerRef.current);
+    };
+  }, []);
+  return screenSize;
+};
+exports.useDimensions = useDimensions;
+//# sourceMappingURL=useDimensions.web.js.map

package/lib/commonjs/hooks/useDimensions.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","useDimensions","timerRef","useRef","screenSize","setScreenSize","useState","width","window","innerWidth","height","innerHeight","useEffect","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAgC,CAAC;EACxD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAa;IACrDC,KAAK,EAAEC,MAAM,CAACC,UAAU;IACxBC,MAAM,EAAEF,MAAM,CAACG;EACnB,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACZ,QAAQ,CAACa,OAAO,CAAC;MAE9Bb,QAAQ,CAACa,OAAO,GAAGC,UAAU,CAAC,MAAMX,aAAa,CAAC;QAC9CE,KAAK,EAAEC,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACS,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTL,MAAM,CAACU,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACZ,QAAQ,CAACa,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOX,UAAU;AACrB,CAAC;AAAAe,OAAA,CAAAlB,aAAA,GAAAA,aAAA"}

package/lib/commonjs/utils/styles.js

@@ -8,10 +8,6 @@ var _breakpoints = require("./breakpoints");
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
  *
- * If the function's string representation contains a custom media query or a defined breakpoint,
- * the returned function will be proxied to parse its return value based on the provided screen size and breakpoints.
- * If neither is found, the original function is returned.
- *
  * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
  *
  * @param {Function} fn - The function to be proxified.
@@ -19,7 +15,7 @@ var _breakpoints = require("./breakpoints");
  * @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.
  *
- * @returns {Function} Returns the proxified function or the original function if no custom media query or breakpoint is found in its string representation.
+ * @returns {Function} Returns the proxified function
  *
  * @example
  *
@@ -30,17 +26,9 @@ var _breakpoints = require("./breakpoints");
  * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
  * proxifiedFunction() // parsed style based on screenSize and breakpoints
  */
-const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => {
-  const stringifiedFunction = fn.toString();
-  const hasCustomMediaQuery = stringifiedFunction.includes(':w[') || stringifiedFunction.includes(':h[');
-  const hasBreakpoint = Object.keys(breakpoints).some(bp => stringifiedFunction.includes(bp));
-  if (!hasCustomMediaQuery && !hasBreakpoint) {
-    return fn;
-  }
-  return new Proxy(fn, {
-    apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
-  });
-};
+const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => new Proxy(fn, {
+  apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
+});
 
 /**
  * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
@@ -68,15 +56,26 @@ const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => {
  * // { fontSize: '12px' }
  */
 exports.proxifyFunction = proxifyFunction;
-const parseStyle = (style, breakpoint, screenSize, breakpoints) => Object.fromEntries(Object.entries(style).map(_ref => {
-  let [key, value] = _ref;
-  const isDynamicFunction = typeof value === 'function';
-  const isValidStyle = typeof value !== 'object' || key === 'transform';
-  if (isDynamicFunction || isValidStyle) {
-    return [key, value];
-  }
-  const valueWithBreakpoint = value;
-  return [key, (0, _breakpoints.getValueForBreakpoint)(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
-}));
+const parseStyle = (style, breakpoint, screenSize, breakpoints) => {
+  const entries = Object.entries(style);
+  return Object.fromEntries(entries.map(_ref => {
+    let [key, value] = _ref;
+    const isNestedStyle = key === 'shadowOffset';
+    if (isNestedStyle) {
+      return [key, parseStyle(value, breakpoint, screenSize, breakpoints)];
+    }
+    const isTransform = key === 'transform';
+    if (isTransform && Array.isArray(value)) {
+      return [key, value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))];
+    }
+    const isDynamicFunction = typeof value === 'function';
+    const isValidStyle = typeof value !== 'object';
+    if (isDynamicFunction || isValidStyle) {
+      return [key, value];
+    }
+    const valueWithBreakpoint = value;
+    return [key, (0, _breakpoints.getValueForBreakpoint)(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
+  }));
+};
 exports.parseStyle = parseStyle;
 //# sourceMappingURL=styles.js.map

package/lib/commonjs/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_breakpoints","require","proxifyFunction","fn","breakpoint","screenSize","breakpoints","stringifiedFunction","toString","hasCustomMediaQuery","includes","hasBreakpoint","Object","keys","some","bp","Proxy","apply","target","thisArg","argumentsList","parseStyle","exports","style","fromEntries","entries","map","_ref","key","value","isDynamicFunction","isValidStyle","valueWithBreakpoint","getValueForBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH;EACX,MAAMC,mBAAmB,GAAGJ,EAAE,CAACK,QAAQ,CAAC,CAAC;EACzC,MAAMC,mBAAmB,GAAGF,mBAAmB,CAACG,QAAQ,CAAC,KAAK,CAAC,IAAIH,mBAAmB,CAACG,QAAQ,CAAC,KAAK,CAAC;EACtG,MAAMC,aAAa,GAAGC,MAAM,CACvBC,IAAI,CAACP,WAAW,CAAC,CACjBQ,IAAI,CAACC,EAAE,IAAIR,mBAAmB,CAACG,QAAQ,CAACK,EAAE,CAAC,CAAC;EAEjD,IAAI,CAACN,mBAAmB,IAAI,CAACE,aAAa,EAAE;IACxC,OAAOR,EAAE;EACb;EAEA,OAAO,IAAIa,KAAK,CAACb,EAAE,EAAE;IACjBc,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW;EAC5F,CAAC,CAAC;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBAgB,OAAA,CAAApB,eAAA,GAAAA,eAAA;AAyBO,MAAMmB,UAAU,GAAGA,CACtBE,KAA8B,EAC9BnB,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACbM,MAAM,CACNY,WAAW,CAACZ,MAAM,CACda,OAAO,CAACF,KAAK,CAAC,CACdG,GAAG,CAACC,IAAA,IAAkB;EAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;EACd,MAAMG,iBAAiB,GAAG,OAAOD,KAAK,KAAK,UAAU;EACrD,MAAME,YAAY,GAAG,OAAOF,KAAK,KAAK,QAAQ,IAAID,GAAG,KAAK,WAAW;EAErE,IAAIE,iBAAiB,IAAIC,YAAY,EAAE;IACnC,OAAO,CAACH,GAAG,EAAEC,KAAK,CAAC;EACvB;EAEA,MAAMG,mBAAmB,GAAGH,KAAkD;EAE9E,OAAO,CAACD,GAAG,EAAE,IAAAK,kCAAqB,EAAID,mBAAmB,EAAE5B,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;AACpG,CAAC,CACL,CAAC;AAAAgB,OAAA,CAAAD,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["_breakpoints","require","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","exports","style","entries","Object","fromEntries","map","_ref","key","value","isNestedStyle","isTransform","Array","isArray","isDynamicFunction","isValidStyle","valueWithBreakpoint","getValueForBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBAO,OAAA,CAAAX,eAAA,GAAAA,eAAA;AAyBO,MAAMU,UAAU,GAAGA,CACtBE,KAA8B,EAC9BV,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACV;EACJ,MAAMS,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAAyC;EAE7E,OAAOE,MAAM,CACRC,WAAW,CAACF,OAAO,CACfG,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,aAAa,GAAGF,GAAG,KAAK,cAAc;IAE5C,IAAIE,aAAa,EAAE;MACf,OAAO,CACHF,GAAG,EACHR,UAAU,CAACS,KAAK,EAAEjB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CACzD;IACL;IAEA,MAAMiB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIT,UAAU,CAACS,KAAK,EAAEjB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC,CAC7E;IACL;IAEA,MAAMoB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,MAAMO,mBAAmB,GAAGP,KAAkD;IAE9E,OAAO,CAACD,GAAG,EAAE,IAAAS,kCAAqB,EAAID,mBAAmB,EAAExB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;EACpG,CAAC,CACL,CAAC;AACT,CAAC;AAAAO,OAAA,CAAAD,UAAA,GAAAA,UAAA"}

package/lib/commonjs/utils/styles.spec.js

@@ -93,6 +93,72 @@ describe('styles', () => {
         fontWeight: 'bold'
       });
     });
+    it('should correctly parse transform styles', () => {
+      const screenSize = {
+        width: 400,
+        height: 800
+      };
+      const breakpoint = 'sm';
+      const breakpoints = {
+        xs: 0,
+        sm: 400,
+        md: 800
+      };
+      const style = {
+        transform: [{
+          translateX: {
+            sm: 120,
+            md: 200
+          },
+          translateY: 200
+        }]
+      };
+      expect((0, _styles.parseStyle)(style, breakpoint, screenSize, breakpoints)).toEqual({
+        transform: [{
+          translateX: 120,
+          translateY: 200
+        }]
+      });
+    });
+    it('should correctly parse shadowOffset styles', () => {
+      const screenSize = {
+        width: 400,
+        height: 800
+      };
+      const breakpoint = 'sm';
+      const breakpoints = {
+        xs: 0,
+        sm: 400,
+        md: 800
+      };
+      const style = {
+        shadowOffset: {
+          width: 0,
+          height: 4
+        }
+      };
+      const styleWithBreakpoints = {
+        shadowOffset: {
+          width: 0,
+          height: {
+            sm: 10,
+            md: 20
+          }
+        }
+      };
+      expect((0, _styles.parseStyle)(style, breakpoint, screenSize, breakpoints)).toEqual({
+        shadowOffset: {
+          width: 0,
+          height: 4
+        }
+      });
+      expect((0, _styles.parseStyle)(styleWithBreakpoints, breakpoint, screenSize, breakpoints)).toEqual({
+        shadowOffset: {
+          width: 0,
+          height: 10
+        }
+      });
+    });
   });
 });
 //# sourceMappingURL=styles.spec.js.map

package/lib/commonjs/utils/styles.spec.js.map

@@ -1 +1 @@
-{"version":3,"names":["_styles","require","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","proxifyFunction","toEqual","style","fontSize","fontWeight","parseStyle"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
+{"version":3,"names":["_styles","require","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","proxifyFunction","toEqual","style","fontSize","fontWeight","parseStyle","transform","translateX","translateY","shadowOffset","styleWithBreakpoints"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}

package/lib/module/createUnistyles.js

@@ -1,14 +1,14 @@
 import { useContext } from 'react';
-import { useWindowDimensions } from 'react-native';
 import { UnistylesContext } from './UnistylesTheme';
 import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils';
+import { useDimensions } from './hooks';
 export const createUnistyles = breakpoints => {
   const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
   return {
     createStyles: styles => styles,
     useStyles: stylesheet => {
       const theme = useContext(UnistylesContext);
-      const dimensions = useWindowDimensions();
+      const dimensions = useDimensions();
       const breakpoint = getBreakpointFromScreenWidth(dimensions.width, sortedBreakpoints);
       const screenSize = {
         width: dimensions.width,

package/lib/module/createUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","useWindowDimensions","UnistylesContext","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","createStyles","styles","useStyles","stylesheet","theme","dimensions","breakpoint","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,mBAAmB,QAAQ,cAAc;AAElD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAM;EAEtE,OAAO;IACHE,YAAY,EAAsCC,MAAqC,IAAKA,MAAW;IACvGC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGd,UAAU,CAACE,gBAAgB,CAAM;MAC/C,MAAMa,UAAU,GAAGd,mBAAmB,CAAC,CAAC;MACxC,MAAMe,UAAU,GAAGb,4BAA4B,CAAIY,UAAU,CAACE,KAAK,EAAER,iBAAiB,CAAC;MACvF,MAAMS,UAAsB,GAAG;QAC3BD,KAAK,EAAEF,UAAU,CAACE,KAAK;QACvBE,MAAM,EAAEJ,UAAU,CAACI;MACvB,CAAC;MAED,IAAI,CAACN,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMS,YAAY,GAAG,OAAOP,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMQ,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGvB,eAAe,CAAIwB,KAAK,EAAEZ,UAAU,EAAEE,UAAU,EAAET,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGgB,GAAG;UACN,CAACE,GAAG,GAAGtB,UAAU,CAAQwB,CAAC,EAAEb,UAAU,EAAEE,UAAU,EAAET,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHK,KAAK;QACLH,MAAM,EAAEU;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}
+{"version":3,"names":["useContext","UnistylesContext","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","useDimensions","createUnistyles","breakpoints","sortedBreakpoints","createStyles","styles","useStyles","stylesheet","theme","dimensions","breakpoint","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAC/G,SAASC,aAAa,QAAQ,SAAS;AAEvC,OAAO,MAAMC,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAGJ,0BAA0B,CAACG,WAAW,CAAM;EAEtE,OAAO;IACHE,YAAY,EAAsCC,MAAqC,IAAKA,MAAW;IACvGC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGd,UAAU,CAACC,gBAAgB,CAAM;MAC/C,MAAMc,UAAU,GAAGT,aAAa,CAAC,CAAC;MAClC,MAAMU,UAAU,GAAGd,4BAA4B,CAAIa,UAAU,CAACE,KAAK,EAAER,iBAAiB,CAAC;MACvF,MAAMS,UAAsB,GAAG;QAC3BD,KAAK,EAAEF,UAAU,CAACE,KAAK;QACvBE,MAAM,EAAEJ,UAAU,CAACI;MACvB,CAAC;MAED,IAAI,CAACN,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMS,YAAY,GAAG,OAAOP,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMQ,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGxB,eAAe,CAAIyB,KAAK,EAAEZ,UAAU,EAAEE,UAAU,EAAET,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGgB,GAAG;UACN,CAACE,GAAG,GAAGvB,UAAU,CAAQyB,CAAC,EAAEb,UAAU,EAAEE,UAAU,EAAET,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHK,KAAK;QACLH,MAAM,EAAEU;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}

package/lib/module/hooks/index.js

@@ -0,0 +1,2 @@
+export { useDimensions } from './useDimensions';
+//# sourceMappingURL=index.js.map

package/lib/module/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDimensions"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":"AAAA,SAASA,aAAa,QAAQ,iBAAiB"}

package/lib/module/hooks/useDimensions.js

@@ -0,0 +1,12 @@
+import { useWindowDimensions } from 'react-native';
+export const useDimensions = () => {
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  return {
+    width,
+    height
+  };
+};
+//# sourceMappingURL=useDimensions.js.map

package/lib/module/hooks/useDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useWindowDimensions","useDimensions","width","height"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAGlD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGH,mBAAmB,CAAC,CAAC;EAE/C,OAAO;IACHE,KAAK;IACLC;EACJ,CAAC;AACL,CAAC"}

package/lib/module/hooks/useDimensions.web.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+export const useDimensions = () => {
+  const timerRef = useRef();
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  useEffect(() => {
+    const handleResize = () => {
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      }), 100);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timerRef.current);
+    };
+  }, []);
+  return screenSize;
+};
+//# sourceMappingURL=useDimensions.web.js.map

package/lib/module/hooks/useDimensions.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useState","useDimensions","timerRef","screenSize","setScreenSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAGnD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAGH,MAAM,CAAgC,CAAC;EACxD,MAAM,CAACI,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAa;IACrDK,KAAK,EAAEC,MAAM,CAACC,UAAU;IACxBC,MAAM,EAAEF,MAAM,CAACG;EACnB,CAAC,CAAC;EAEFX,SAAS,CAAC,MAAM;IACZ,MAAMY,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;MAE9BV,QAAQ,CAACU,OAAO,GAAGC,UAAU,CAAC,MAAMT,aAAa,CAAC;QAC9CC,KAAK,EAAEC,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTJ,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOT,UAAU;AACrB,CAAC"}

package/lib/module/utils/styles.js

@@ -3,10 +3,6 @@ import { getValueForBreakpoint } from './breakpoints';
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
  *
- * If the function's string representation contains a custom media query or a defined breakpoint,
- * the returned function will be proxied to parse its return value based on the provided screen size and breakpoints.
- * If neither is found, the original function is returned.
- *
  * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
  *
  * @param {Function} fn - The function to be proxified.
@@ -14,7 +10,7 @@ import { getValueForBreakpoint } from './breakpoints';
  * @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.
  *
- * @returns {Function} Returns the proxified function or the original function if no custom media query or breakpoint is found in its string representation.
+ * @returns {Function} Returns the proxified function
  *
  * @example
  *
@@ -25,17 +21,9 @@ import { getValueForBreakpoint } from './breakpoints';
  * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
  * proxifiedFunction() // parsed style based on screenSize and breakpoints
  */
-export const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => {
-  const stringifiedFunction = fn.toString();
-  const hasCustomMediaQuery = stringifiedFunction.includes(':w[') || stringifiedFunction.includes(':h[');
-  const hasBreakpoint = Object.keys(breakpoints).some(bp => stringifiedFunction.includes(bp));
-  if (!hasCustomMediaQuery && !hasBreakpoint) {
-    return fn;
-  }
-  return new Proxy(fn, {
-    apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
-  });
-};
+export const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => new Proxy(fn, {
+  apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
+});
 
 /**
  * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
@@ -62,14 +50,25 @@ export const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => {
  * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
  * // { fontSize: '12px' }
  */
-export const parseStyle = (style, breakpoint, screenSize, breakpoints) => Object.fromEntries(Object.entries(style).map(_ref => {
-  let [key, value] = _ref;
-  const isDynamicFunction = typeof value === 'function';
-  const isValidStyle = typeof value !== 'object' || key === 'transform';
-  if (isDynamicFunction || isValidStyle) {
-    return [key, value];
-  }
-  const valueWithBreakpoint = value;
-  return [key, getValueForBreakpoint(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
-}));
+export const parseStyle = (style, breakpoint, screenSize, breakpoints) => {
+  const entries = Object.entries(style);
+  return Object.fromEntries(entries.map(_ref => {
+    let [key, value] = _ref;
+    const isNestedStyle = key === 'shadowOffset';
+    if (isNestedStyle) {
+      return [key, parseStyle(value, breakpoint, screenSize, breakpoints)];
+    }
+    const isTransform = key === 'transform';
+    if (isTransform && Array.isArray(value)) {
+      return [key, value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))];
+    }
+    const isDynamicFunction = typeof value === 'function';
+    const isValidStyle = typeof value !== 'object';
+    if (isDynamicFunction || isValidStyle) {
+      return [key, value];
+    }
+    const valueWithBreakpoint = value;
+    return [key, getValueForBreakpoint(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
+  }));
+};
 //# sourceMappingURL=styles.js.map

package/lib/module/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","breakpoints","stringifiedFunction","toString","hasCustomMediaQuery","includes","hasBreakpoint","Object","keys","some","bp","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","fromEntries","entries","map","_ref","key","value","isDynamicFunction","isValidStyle","valueWithBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH;EACX,MAAMC,mBAAmB,GAAGJ,EAAE,CAACK,QAAQ,CAAC,CAAC;EACzC,MAAMC,mBAAmB,GAAGF,mBAAmB,CAACG,QAAQ,CAAC,KAAK,CAAC,IAAIH,mBAAmB,CAACG,QAAQ,CAAC,KAAK,CAAC;EACtG,MAAMC,aAAa,GAAGC,MAAM,CACvBC,IAAI,CAACP,WAAW,CAAC,CACjBQ,IAAI,CAACC,EAAE,IAAIR,mBAAmB,CAACG,QAAQ,CAACK,EAAE,CAAC,CAAC;EAEjD,IAAI,CAACN,mBAAmB,IAAI,CAACE,aAAa,EAAE;IACxC,OAAOR,EAAE;EACb;EAEA,OAAO,IAAIa,KAAK,CAACb,EAAE,EAAE;IACjBc,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW;EAC5F,CAAC,CAAC;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMe,UAAU,GAAGA,CACtBC,KAA8B,EAC9BlB,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACbM,MAAM,CACNW,WAAW,CAACX,MAAM,CACdY,OAAO,CAACF,KAAK,CAAC,CACdG,GAAG,CAACC,IAAA,IAAkB;EAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;EACd,MAAMG,iBAAiB,GAAG,OAAOD,KAAK,KAAK,UAAU;EACrD,MAAME,YAAY,GAAG,OAAOF,KAAK,KAAK,QAAQ,IAAID,GAAG,KAAK,WAAW;EAErE,IAAIE,iBAAiB,IAAIC,YAAY,EAAE;IACnC,OAAO,CAACH,GAAG,EAAEC,KAAK,CAAC;EACvB;EAEA,MAAMG,mBAAmB,GAAGH,KAAkD;EAE9E,OAAO,CAACD,GAAG,EAAE1B,qBAAqB,CAAI8B,mBAAmB,EAAE3B,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;AACpG,CAAC,CACL,CAAC"}
+{"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","entries","Object","fromEntries","map","_ref","key","value","isNestedStyle","isTransform","Array","isArray","isDynamicFunction","isValidStyle","valueWithBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,UAAU,GAAGA,CACtBC,KAA8B,EAC9BT,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACV;EACJ,MAAMQ,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAAyC;EAE7E,OAAOE,MAAM,CACRC,WAAW,CAACF,OAAO,CACfG,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,aAAa,GAAGF,GAAG,KAAK,cAAc;IAE5C,IAAIE,aAAa,EAAE;MACf,OAAO,CACHF,GAAG,EACHP,UAAU,CAACQ,KAAK,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CACzD;IACL;IAEA,MAAMgB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIR,UAAU,CAACQ,KAAK,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC,CAC7E;IACL;IAEA,MAAMmB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,MAAMO,mBAAmB,GAAGP,KAAkD;IAE9E,OAAO,CAACD,GAAG,EAAElB,qBAAqB,CAAI0B,mBAAmB,EAAEvB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;EACpG,CAAC,CACL,CAAC;AACT,CAAC"}

package/lib/module/utils/styles.spec.js

@@ -91,6 +91,72 @@ describe('styles', () => {
         fontWeight: 'bold'
       });
     });
+    it('should correctly parse transform styles', () => {
+      const screenSize = {
+        width: 400,
+        height: 800
+      };
+      const breakpoint = 'sm';
+      const breakpoints = {
+        xs: 0,
+        sm: 400,
+        md: 800
+      };
+      const style = {
+        transform: [{
+          translateX: {
+            sm: 120,
+            md: 200
+          },
+          translateY: 200
+        }]
+      };
+      expect(parseStyle(style, breakpoint, screenSize, breakpoints)).toEqual({
+        transform: [{
+          translateX: 120,
+          translateY: 200
+        }]
+      });
+    });
+    it('should correctly parse shadowOffset styles', () => {
+      const screenSize = {
+        width: 400,
+        height: 800
+      };
+      const breakpoint = 'sm';
+      const breakpoints = {
+        xs: 0,
+        sm: 400,
+        md: 800
+      };
+      const style = {
+        shadowOffset: {
+          width: 0,
+          height: 4
+        }
+      };
+      const styleWithBreakpoints = {
+        shadowOffset: {
+          width: 0,
+          height: {
+            sm: 10,
+            md: 20
+          }
+        }
+      };
+      expect(parseStyle(style, breakpoint, screenSize, breakpoints)).toEqual({
+        shadowOffset: {
+          width: 0,
+          height: 4
+        }
+      });
+      expect(parseStyle(styleWithBreakpoints, breakpoint, screenSize, breakpoints)).toEqual({
+        shadowOffset: {
+          width: 0,
+          height: 10
+        }
+      });
+    });
   });
 });
 //# sourceMappingURL=styles.spec.js.map

package/lib/module/utils/styles.spec.js.map

@@ -1 +1 @@
-{"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
+{"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight","transform","translateX","translateY","shadowOffset","styleWithBreakpoints"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAc,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI3H,eAAO,MAAM,eAAe;;;;;;CAiD3B,CAAA"}
+{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAc,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAK3H,eAAO,MAAM,eAAe;;;;;;CAiD3B,CAAA"}

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

@@ -0,0 +1,2 @@
+export { useDimensions } from './useDimensions';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}

package/lib/typescript/src/hooks/useDimensions.d.ts

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

package/lib/typescript/src/hooks/useDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDimensions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UAOhC,CAAA"}

package/lib/typescript/src/hooks/useDimensions.web.d.ts

@@ -0,0 +1,3 @@
+import type { ScreenSize } from '../types';
+export declare const useDimensions: () => ScreenSize;
+//# sourceMappingURL=useDimensions.web.d.ts.map

package/lib/typescript/src/hooks/useDimensions.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDimensions.web.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UA0BhC,CAAA"}

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

@@ -2,10 +2,6 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
  *
- * If the function's string representation contains a custom media query or a defined breakpoint,
- * the returned function will be proxied to parse its return value based on the provided screen size and breakpoints.
- * If neither is found, the original function is returned.
- *
  * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
  *
  * @param {Function} fn - The function to be proxified.
@@ -13,7 +9,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
  * @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.
  *
- * @returns {Function} Returns the proxified function or the original function if no custom media query or breakpoint is found in its string representation.
+ * @returns {Function} Returns the proxified function
  *
  * @example
  *
@@ -50,7 +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) => {
-    [k: string]: unknown;
-};
+export declare const parseStyle: <T, B extends Record<string, number>>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: 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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,eAAe,yCACpB,QAAQ,4CACA,UAAU,qBAEvB,QAeF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,kHAGP,UAAU;;CAiBrB,CAAA"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/src/createUnistyles.ts

@@ -1,8 +1,8 @@
 import { useContext } from 'react'
-import { useWindowDimensions } from 'react-native'
 import type { CreateStylesFactory, CustomNamedStyles, ScreenSize, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
 import { UnistylesContext } from './UnistylesTheme'
 import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
+import { useDimensions } from './hooks'
 
 export const createUnistyles = <B extends Record<string, number>, T = {}>(breakpoints: B) => {
     const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints) as B
@@ -11,7 +11,7 @@ export const createUnistyles = <B extends Record<string, number>, T = {}>(breakp
         createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => styles as S,
         useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
             const theme = useContext(UnistylesContext) as T
-            const dimensions = useWindowDimensions()
+            const dimensions = useDimensions()
             const breakpoint = getBreakpointFromScreenWidth<B>(dimensions.width, sortedBreakpoints)
             const screenSize: ScreenSize = {
                 width: dimensions.width,

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useDimensions } from './useDimensions'

package/src/hooks/useDimensions.ts

@@ -0,0 +1,11 @@
+import { useWindowDimensions } from 'react-native'
+import type { ScreenSize } from '../types'
+
+export const useDimensions = (): ScreenSize => {
+    const { width, height } = useWindowDimensions()
+
+    return {
+        width,
+        height
+    }
+}

package/src/hooks/useDimensions.web.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react'
+import type { ScreenSize } from '../types'
+
+export const useDimensions = (): ScreenSize => {
+    const timerRef = useRef<ReturnType<typeof setTimeout>>()
+    const [screenSize, setScreenSize] = useState<ScreenSize>({
+        width: window.innerWidth,
+        height: window.innerHeight
+    })
+
+    useEffect(() => {
+        const handleResize = () => {
+            clearTimeout(timerRef.current)
+
+            timerRef.current = setTimeout(() => setScreenSize({
+                width: window.innerWidth,
+                height: window.innerHeight
+            }), 100)
+        }
+
+        window.addEventListener('resize', handleResize)
+
+        return () => {
+            window.removeEventListener('resize', handleResize)
+            clearTimeout(timerRef.current)
+        }
+    }, [])
+
+    return screenSize
+}

package/src/utils/styles.ts

@@ -4,10 +4,6 @@ import { getValueForBreakpoint } from './breakpoints'
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
  *
- * If the function's string representation contains a custom media query or a defined breakpoint,
- * the returned function will be proxied to parse its return value based on the provided screen size and breakpoints.
- * If neither is found, the original function is returned.
- *
  * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
  *
  * @param {Function} fn - The function to be proxified.
@@ -15,7 +11,7 @@ import { getValueForBreakpoint } from './breakpoints'
  * @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.
  *
- * @returns {Function} Returns the proxified function or the original function if no custom media query or breakpoint is found in its string representation.
+ * @returns {Function} Returns the proxified function
  *
  * @example
  *
@@ -30,22 +26,10 @@ export const proxifyFunction = <B extends Record<string, number>>(
     fn: Function, breakpoint: keyof B & string,
     screenSize: ScreenSize,
     breakpoints: B
-): Function => {
-    const stringifiedFunction = fn.toString()
-    const hasCustomMediaQuery = stringifiedFunction.includes(':w[') || stringifiedFunction.includes(':h[')
-    const hasBreakpoint = Object
-        .keys(breakpoints)
-        .some(bp => stringifiedFunction.includes(bp))
-
-    if (!hasCustomMediaQuery && !hasBreakpoint) {
-        return fn
-    }
-
-    return new Proxy(fn, {
-        apply: (target, thisArg, argumentsList) =>
-            parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
-    })
-}
+): Function => new Proxy(fn, {
+    apply: (target, thisArg, argumentsList) =>
+        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
+})
 
 /**
  * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
@@ -77,19 +61,40 @@ export const parseStyle = <T, B extends Record<string, number>>(
     breakpoint: keyof B & string,
     screenSize: ScreenSize,
     breakpoints: B
-) => Object
-    .fromEntries(Object
-        .entries(style)
-        .map(([key, value]) => {
-            const isDynamicFunction = typeof value === 'function'
-            const isValidStyle = typeof value !== 'object' || key === 'transform'
+): T => {
+    const entries = Object.entries(style) as [[keyof T, CustomNamedStyles<T, B>]]
+
+    return Object
+        .fromEntries(entries
+            .map(([key, value]) => {
+                const isNestedStyle = key === 'shadowOffset'
 
-            if (isDynamicFunction || isValidStyle) {
-                return [key, value]
-            }
+                if (isNestedStyle) {
+                    return [
+                        key,
+                        parseStyle(value, breakpoint, screenSize, breakpoints)
+                    ]
+                }
 
-            const valueWithBreakpoint = value as Record<keyof B & string, string | number>
+                const isTransform = key === 'transform'
 
-            return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
-        })
-    )
+                if (isTransform && Array.isArray(value)) {
+                    return [
+                        key,
+                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))
+                    ]
+                }
+
+                const isDynamicFunction = typeof value === 'function'
+                const isValidStyle = typeof value !== 'object'
+
+                if (isDynamicFunction || isValidStyle) {
+                    return [key, value]
+                }
+
+                const valueWithBreakpoint = value as Record<keyof B & string, string | number>
+
+                return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
+            })
+        )
+}