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

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/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.

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","Object","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;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,KACbS,MAAM,CACNC,WAAW,CAACD,MAAM,CACdE,OAAO,CAACH,KAAK,CAAC,CACdI,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,EAAEpB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;AACpG,CAAC,CACL,CAAC;AAAAO,OAAA,CAAAD,UAAA,GAAAA,UAAA"}

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.

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","Object","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,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,KACbQ,MAAM,CACNC,WAAW,CAACD,MAAM,CACdE,OAAO,CAACH,KAAK,CAAC,CACdI,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,EAAElB,qBAAqB,CAAIsB,mBAAmB,EAAEnB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;AACpG,CAAC,CACL,CAAC"}

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
  *

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;;CAiBrB,CAAA"}

package/package.json

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

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.