react-native-unistyles 3.0.0-alpha.43 → 3.0.0-alpha.44

package/lib/module/web/shadowRegistry.js

@@ -18,16 +18,15 @@ class UnistylesShadowRegistryBuilder {
   resultsMap = new Map();
   hashMap = new Map();
   classNamesMap = new Map();
-  add = (ref, _style, _variants, _args) => {
-    // Style is not provided
-    if (!_style) {
+  add = (ref, styles, _variants, _args) => {
+    // Styles are not provided
+    if (!styles) {
       return;
     }
 
     // Ref is unmounted, remove style tags from the document
     if (ref === null) {
-      const secrets = extractSecrets(_style);
-      secrets.forEach(({
+      extractSecrets(styles).forEach(({
         __uni__refs
       }) => {
         __uni__refs.forEach(ref => {
@@ -49,58 +48,60 @@ class UnistylesShadowRegistryBuilder {
     if (!(ref instanceof HTMLElement)) {
       return;
     }
-    const styles = _style.filter(style => Object.keys(style ?? {}).some(key => key.startsWith('__uni__')));
+    const parsedStyles = styles.flatMap((style, styleIndex) => {
+      const secrets = extractSecrets(style);
 
-    // No unistyles
-    if (styles.length === 0) {
-      return;
-    }
-    const parsedStyles = styles.flatMap((style, styleIndex) => extractSecrets(style).map(secret => {
-      const {
-        __uni__key,
-        __uni__stylesheet,
-        __uni__variants,
-        __uni__args = [],
-        __uni__refs
-      } = secret;
-      const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet);
-      const style = newComputedStylesheet[__uni__key];
-      const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants;
-      const args = _args[styleIndex] && _args[styleIndex].length > 0 ? _args[styleIndex] : __uni__args;
-      const result = typeof style === 'function' ? style(...args) : style;
-      const {
-        variantsResult
-      } = Object.fromEntries(getVariants({
-        variantsResult: result
-      }, variants));
-      const resultWithVariants = deepMergeObjects(result, variantsResult ?? {});
-      const dependencies = extractUnistyleDependencies(resultWithVariants);
-      if (typeof __uni__stylesheet === 'function') {
-        // Add dependencies from dynamic styles to stylesheet
-        UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies);
+      // Regular style
+      if (secrets.length === 0) {
+        return style;
       }
-      __uni__refs.add(ref);
-      const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(resultWithVariants), () => {
-        const hash = this.hashMap.get(ref);
-
-        // Dispose listener if there is no hash
-        if (!hash) {
-          dispose();
-          return;
-        }
-        const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet);
-        const newValue = newComputedStyleSheet[__uni__key];
-        const result = typeof newValue === 'function' ? newValue(...args) : newValue;
+      return secrets.map(secret => {
+        const {
+          __uni__key,
+          __uni__stylesheet,
+          __uni__variants,
+          __uni__args = [],
+          __uni__refs
+        } = secret;
+        const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet);
+        const style = newComputedStylesheet[__uni__key];
+        const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants;
+        const args = _args[styleIndex] && _args[styleIndex].length > 0 ? _args[styleIndex] : __uni__args;
+        const result = typeof style === 'function' ? style(...args) : style;
         const {
           variantsResult
         } = Object.fromEntries(getVariants({
           variantsResult: result
         }, variants));
         const resultWithVariants = deepMergeObjects(result, variantsResult ?? {});
-        UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants));
+        const dependencies = extractUnistyleDependencies(resultWithVariants);
+        if (typeof __uni__stylesheet === 'function') {
+          // Add dependencies from dynamic styles to stylesheet
+          UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies);
+        }
+        __uni__refs.add(ref);
+        const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(resultWithVariants), () => {
+          const hash = this.hashMap.get(ref);
+
+          // Dispose listener if there is no hash
+          if (!hash) {
+            dispose();
+            return;
+          }
+          const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet);
+          const newValue = newComputedStyleSheet[__uni__key];
+          const result = typeof newValue === 'function' ? newValue(...args) : newValue;
+          const {
+            variantsResult
+          } = Object.fromEntries(getVariants({
+            variantsResult: result
+          }, variants));
+          const resultWithVariants = deepMergeObjects(result, variantsResult ?? {});
+          UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants));
+        });
+        return resultWithVariants;
       });
-      return resultWithVariants;
-    }));
+    });
     const combinedStyles = deepMergeObjects(...parsedStyles);
     const oldStyles = this.resultsMap.get(ref);
     if (equal(combinedStyles, oldStyles)) {

package/lib/module/web/shadowRegistry.js.map

@@ -1 +1 @@
-{"version":3,"names":["convertUnistyles","UnistylesListener","UnistylesRegistry","deepMergeObjects","equal","extractSecrets","extractUnistyleDependencies","isInDocument","getVariants","UnistylesShadowRegistryBuilder","name","__type","equals","toString","dispose","resultsMap","Map","hashMap","classNamesMap","add","ref","_style","_variants","_args","secrets","forEach","__uni__refs","oldResult","get","delete","remove","HTMLElement","styles","filter","style","Object","keys","some","key","startsWith","length","parsedStyles","flatMap","styleIndex","map","secret","__uni__key","__uni__stylesheet","__uni__variants","__uni__args","newComputedStylesheet","getComputedStylesheet","variants","args","result","variantsResult","fromEntries","resultWithVariants","dependencies","addDependenciesToStylesheet","addListeners","hash","newComputedStyleSheet","newValue","applyStyles","combinedStyles","oldStyles","oldClassNames","className","classList","set","existingHash","injectedClassNames","_web","_classNames","newClassNames","Array","isArray","concat","UnistylesShadowRegistry"],"sourceRoot":"../../../src","sources":["web/shadowRegistry.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["convertUnistyles","UnistylesListener","UnistylesRegistry","deepMergeObjects","equal","extractSecrets","extractUnistyleDependencies","isInDocument","getVariants","UnistylesShadowRegistryBuilder","name","__type","equals","toString","dispose","resultsMap","Map","hashMap","classNamesMap","add","ref","styles","_variants","_args","forEach","__uni__refs","oldResult","get","delete","remove","HTMLElement","parsedStyles","flatMap","style","styleIndex","secrets","length","map","secret","__uni__key","__uni__stylesheet","__uni__variants","__uni__args","newComputedStylesheet","getComputedStylesheet","variants","Object","keys","args","result","variantsResult","fromEntries","resultWithVariants","dependencies","addDependenciesToStylesheet","addListeners","hash","newComputedStyleSheet","newValue","applyStyles","combinedStyles","oldStyles","oldClassNames","className","classList","set","existingHash","injectedClassNames","_web","_classNames","newClassNames","Array","isArray","concat","UnistylesShadowRegistry"],"sourceRoot":"../../../src","sources":["web/shadowRegistry.ts"],"mappings":";;AACA,SAASA,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,gBAAgB,QAAQ,UAAU;AAC3C,SAASC,KAAK,EAAEC,cAAc,EAAEC,2BAA2B,EAAEC,YAAY,QAAQ,SAAS;AAC1F,SAASC,WAAW,QAAQ,YAAY;AAIxC,MAAMC,8BAA8B,CAAC;EACjC;EACAC,IAAI,GAAG,yBAAyB;EAChCC,MAAM,GAAG,KAAK;EACdC,MAAM,GAAGA,CAAA,KAAM,IAAI;EACnBC,QAAQ,GAAGA,CAAA,KAAM,yBAAyB;EAC1CC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;EAClB;;EAEQC,UAAU,GAAG,IAAIC,GAAG,CAA+B,CAAC;EACpDC,OAAO,GAAG,IAAID,GAAG,CAAsB,CAAC;EACxCE,aAAa,GAAG,IAAIF,GAAG,CAA6B,CAAC;EAE7DG,GAAG,GAAGA,CAACC,GAAQ,EAAEC,MAAoB,EAAEC,SAA0C,EAAEC,KAAwB,KAAK;IAC5G;IACA,IAAI,CAACF,MAAM,EAAE;MACT;IACJ;;IAEA;IACA,IAAID,GAAG,KAAK,IAAI,EAAE;MACdf,cAAc,CAACgB,MAAM,CAAC,CAACG,OAAO,CAAC,CAAC;QAAEC;MAAY,CAAC,KAAK;QAChDA,WAAW,CAACD,OAAO,CAACJ,GAAG,IAAI;UACvB,IAAIb,YAAY,CAACa,GAAG,CAAC,EAAE;YACnB;UACJ;UAEA,MAAMM,SAAS,GAAG,IAAI,CAACX,UAAU,CAACY,GAAG,CAACP,GAAG,CAAC;UAC1C,IAAI,CAACL,UAAU,CAACa,MAAM,CAACR,GAAG,CAAC;UAC3B,IAAI,CAACF,aAAa,CAACU,MAAM,CAACR,GAAG,CAAC;UAE9B,IAAIM,SAAS,EAAE;YACXxB,iBAAiB,CAAC2B,MAAM,CAACH,SAAS,CAAC;UACvC;QACJ,CAAC,CAAC;MACN,CAAC,CAAC;MAEF;IACJ;;IAEA;IACA,IAAI,EAAEN,GAAG,YAAYU,WAAW,CAAC,EAAE;MAC/B;IACJ;IAEA,MAAMC,YAAY,GAAGV,MAAM,CAACW,OAAO,CAAC,CAACC,KAAK,EAAEC,UAAU,KAAK;MACvD,MAAMC,OAAO,GAAG9B,cAAc,CAAC4B,KAAK,CAAC;;MAErC;MACA,IAAIE,OAAO,CAACC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAOH,KAAK;MAChB;MAEA,OAAOE,OAAO,CAACE,GAAG,CAACC,MAAM,IAAI;QACzB,MAAM;UAAEC,UAAU;UAAEC,iBAAiB;UAAEC,eAAe;UAAEC,WAAW,GAAG,EAAE;UAAEjB;QAAY,CAAC,GAAGa,MAAM;QAChG,MAAMK,qBAAqB,GAAGzC,iBAAiB,CAAC0C,qBAAqB,CAACJ,iBAAiB,CAAC;QACxF,MAAMP,KAAK,GAAGU,qBAAqB,CAACJ,UAAU,CAA4D;QAC1G,MAAMM,QAAQ,GAAGvB,SAAS,IAAIwB,MAAM,CAACC,IAAI,CAACzB,SAAS,CAAC,CAACc,MAAM,GAAG,CAAC,GAAGd,SAAS,GAAGmB,eAAe;QAC7F,MAAMO,IAAI,GAAGzB,KAAK,CAACW,UAAU,CAAC,IAAIX,KAAK,CAACW,UAAU,CAAC,CAACE,MAAM,GAAG,CAAC,GAAGb,KAAK,CAACW,UAAU,CAAC,GAAGQ,WAAW;QAChG,MAAMO,MAAM,GAAG,OAAOhB,KAAK,KAAK,UAAU,GACpCA,KAAK,CAAC,GAAGe,IAAI,CAAC,GACdf,KAAK;QACX,MAAM;UAAEiB;QAAe,CAAC,GAAGJ,MAAM,CAACK,WAAW,CAAC3C,WAAW,CAAC;UAAE0C,cAAc,EAAED;QAAO,CAAC,EAAEJ,QAAQ,CAAC,CAAC;QAChG,MAAMO,kBAAkB,GAAGjD,gBAAgB,CAAC8C,MAAM,EAAEC,cAAc,IAAI,CAAC,CAAC,CAAC;QACzE,MAAMG,YAAY,GAAG/C,2BAA2B,CAAC8C,kBAAkB,CAAC;QAEpE,IAAI,OAAOZ,iBAAiB,KAAK,UAAU,EAAE;UACzC;UACAtC,iBAAiB,CAACoD,2BAA2B,CAACd,iBAAiB,EAAEa,YAAY,CAAC;QAClF;QAEA5B,WAAW,CAACN,GAAG,CAACC,GAAG,CAAC;QAEpB,MAAMN,OAAO,GAAGb,iBAAiB,CAACsD,YAAY,CAACjD,2BAA2B,CAAC8C,kBAAkB,CAAC,EAAE,MAAM;UAClG,MAAMI,IAAI,GAAG,IAAI,CAACvC,OAAO,CAACU,GAAG,CAACP,GAAG,CAAC;;UAElC;UACA,IAAI,CAACoC,IAAI,EAAE;YACP1C,OAAO,CAAC,CAAC;YAET;UACJ;UAEA,MAAM2C,qBAAqB,GAAGvD,iBAAiB,CAAC0C,qBAAqB,CAACJ,iBAAiB,CAAC;UACxF,MAAMkB,QAAQ,GAAGD,qBAAqB,CAAClB,UAAU,CAA4D;UAC7G,MAAMU,MAAM,GAAG,OAAOS,QAAQ,KAAK,UAAU,GACvCA,QAAQ,CAAC,GAAGV,IAAI,CAAC,GACjBU,QAAQ;UACd,MAAM;YAAER;UAAe,CAAC,GAAGJ,MAAM,CAACK,WAAW,CAAC3C,WAAW,CAAC;YAAE0C,cAAc,EAAED;UAAO,CAAC,EAAEJ,QAAQ,CAAC,CAAC;UAChG,MAAMO,kBAAkB,GAAGjD,gBAAgB,CAAC8C,MAAM,EAAEC,cAAc,IAAI,CAAC,CAAC,CAAC;UAEzEhD,iBAAiB,CAACyD,WAAW,CAACH,IAAI,EAAExD,gBAAgB,CAACoD,kBAAkB,CAAC,CAAC;QAC7E,CAAC,CAAC;QAEF,OAAOA,kBAAkB;MAC7B,CAAC,CAAC;IACN,CAAC,CAAC;IACF,MAAMQ,cAAc,GAAGzD,gBAAgB,CAAC,GAAG4B,YAAY,CAAC;IACxD,MAAM8B,SAAS,GAAG,IAAI,CAAC9C,UAAU,CAACY,GAAG,CAACP,GAAG,CAAC;IAE1C,IAAIhB,KAAK,CAACwD,cAAc,EAAEC,SAAS,CAAC,EAAE;MAClC;IACJ;IAEA,MAAMC,aAAa,GAAG,IAAI,CAAC5C,aAAa,CAACS,GAAG,CAACP,GAAG,CAAC;;IAEjD;IACA,IAAIyC,SAAS,EAAE;MACX3D,iBAAiB,CAAC2B,MAAM,CAACgC,SAAS,CAAC;IACvC;;IAEA;IACAC,aAAa,EAAEtC,OAAO,CAACuC,SAAS,IAAI3C,GAAG,CAAC4C,SAAS,CAACnC,MAAM,CAACkC,SAAS,CAAC,CAAC;IACpE,IAAI,CAAChD,UAAU,CAACkD,GAAG,CAAC7C,GAAG,EAAEwC,cAAc,CAAC;IAExC,MAAM;MAAEJ,IAAI;MAAEU;IAAa,CAAC,GAAGhE,iBAAiB,CAACiB,GAAG,CAACyC,cAAc,CAAC;IACpE,MAAMO,kBAAkB,GAAGP,cAAc,EAAEQ,IAAI,EAAEC,WAAW,IAAI,EAAE;IAClE,MAAMC,aAAa,GAAG,CAACC,KAAK,CAACC,OAAO,CAACL,kBAAkB,CAAC,GAAGA,kBAAkB,GAAG,CAACA,kBAAkB,CAAC,EAAEM,MAAM,CAACjB,IAAI,CAAC;IAElH,IAAI,CAACtC,aAAa,CAAC+C,GAAG,CAAC7C,GAAG,EAAEkD,aAAa,CAAC;IAC1C;IACAlD,GAAG,CAAC4C,SAAS,CAAC7C,GAAG,CAAC,GAAGmD,aAAa,CAAC;;IAEnC;IACA,IAAI,CAACJ,YAAY,EAAE;MACf,IAAI,CAACjD,OAAO,CAACgD,GAAG,CAAC7C,GAAG,EAAEoC,IAAI,CAAC;IAC/B;IAEA,OAAOc,aAAa;EACxB,CAAC;EAEDzC,MAAM,GAAGA,CAAA,KAAM,CAAC,CAAC;AACrB;AAEA,OAAO,MAAM6C,uBAAuB,GAAG,IAAIjE,8BAA8B,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/components/Pressable.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { type PressableStateCallbackType } from 'react-native';
 import type { PressableProps as Props, View } from 'react-native';
 export declare const Pressable: React.ForwardRefExoticComponent<Props & {
-    rawStyle?: Array<any>;
+    rawStyle?: Array<any> | ((event: PressableStateCallbackType) => Array<any>);
     variants?: Record<string, string | boolean>;
 } & React.RefAttributes<View>>;
 //# sourceMappingURL=Pressable.d.ts.map

package/lib/typescript/src/components/Pressable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,cAAc,IAAI,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AASjE,eAAO,MAAM,SAAS;eAJP,KAAK,CAAC,GAAG,CAAC;eACV,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;8BA4F7C,CAAA"}
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,EAA2C,KAAK,0BAA0B,EAAE,MAAM,cAAc,CAAA;AACvG,OAAO,KAAK,EAAE,cAAc,IAAI,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AASjE,eAAO,MAAM,SAAS;eAJP,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,0BAA0B,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC;eAChE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;8BAgF7C,CAAA"}

package/lib/typescript/src/components/Pressable.web.d.ts

@@ -5,9 +5,10 @@ type WebPressableState = {
     hovered: boolean;
     focused: boolean;
 };
+type WebPressableStyle = ((state: WebPressableState) => ViewStyle) | ViewStyle;
 export declare const Pressable: React.ForwardRefExoticComponent<Props & {
     variants?: Record<string, string | boolean>;
-    style?: ((state: WebPressableState) => ViewStyle) | ViewStyle;
+    style?: WebPressableStyle;
 } & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=Pressable.web.d.ts.map

package/lib/typescript/src/components/Pressable.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAE5D,OAAO,KAAK,EAAE,cAAc,IAAI,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG5E,KAAK,iBAAiB,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAA;CACnB,CAAA;AAsBD,eAAO,MAAM,SAAS;eAnBP,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;YACnC,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,GAAG,SAAS;8BAyF/D,CAAA"}
+{"version":3,"file":"Pressable.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAE5D,OAAO,KAAK,EAAE,cAAc,IAAI,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG5E,KAAK,iBAAiB,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,KAAK,iBAAiB,GAAG,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;AA4D9E,eAAO,MAAM,SAAS;eAzDP,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;YACnC,iBAAiB;8BAiH3B,CAAA"}

package/lib/typescript/src/web/shadowRegistry.d.ts

@@ -9,7 +9,7 @@ declare class UnistylesShadowRegistryBuilder {
     private resultsMap;
     private hashMap;
     private classNamesMap;
-    add: (ref: any, _style: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => string[] | undefined;
+    add: (ref: any, styles: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => string[] | undefined;
     remove: () => void;
 }
 export declare const UnistylesShadowRegistry: UnistylesShadowRegistryBuilder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.43",
+  "version": "3.0.0-alpha.44",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/plugin/index.js

@@ -131,7 +131,7 @@ module.exports = function ({ types: t }) {
                     return
                 }
 
-                const metadata = getStyleMetadata(t, styleAttr.value.expression)
+                const metadata = getStyleMetadata(t, styleAttr.value.expression, null, state)
 
                 if (openingElementName === 'Pressable') {
                     return handlePressable(t, path, styleAttr, metadata, state)

package/plugin/style.js

@@ -1,4 +1,4 @@
-function getStyleMetadata(t, node, dynamicFunction = null) {
+function getStyleMetadata(t, node, dynamicFunction = null, state) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
         const members = t.isMemberExpression(node.object)
@@ -18,12 +18,12 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleMetadata(t, element))
+        return node.elements.flatMap(element => getStyleMetadata(t, element, null, state))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleMetadata(t, node.argument)
+        return getStyleMetadata(t, node.argument, null, state)
     }
 
     // {{ ...styles.container }}
@@ -42,14 +42,14 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
                     }]
                 }
 
-                return getStyleMetadata(t, prop.argument)
+                return getStyleMetadata(t, prop.argument, null, state)
             })
             .filter(Boolean)
     }
 
     // {styles.container(arg1, arg2)}
     if (t.isCallExpression(node)) {
-        return getStyleMetadata(t, node.callee, node)
+        return getStyleMetadata(t, node.callee, node, state)
     }
 
     if (t.isIdentifier(node)) {
@@ -73,7 +73,7 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
     }
 
     if (t.isArrowFunctionExpression(node)) {
-        return getStyleMetadata(t, node.body, node)
+        return getStyleMetadata(t, node.body, node, state)
     }
 
     // {condition && styles.container}
@@ -87,6 +87,15 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
         }]
     }
 
+    // only when pressable is used
+    if (t.isBlockStatement(node) && state.file.shouldIncludePressable) {
+        const returnStatement = node.body.find(t.isReturnStatement)
+
+        return returnStatement
+            ? getStyleMetadata(t, returnStatement.argument, null, state)
+            : []
+    }
+
     return []
 }
 
@@ -132,7 +141,7 @@ function styleAttributeToArray(t, path) {
     styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
 }
 
-function metadataToRawStyle(t, metadata) {
+function metadataToRawStyle(t, metadata, styleExpression) {
     const expressions = []
 
     metadata.forEach(meta => {
@@ -149,16 +158,43 @@ function metadataToRawStyle(t, metadata) {
         }
 
         if (meta.logicalExpression) {
-            if (t.isIdentifier(meta.logicalExpression.left)) {
-                if (t.isMemberExpression(meta.logicalExpression.right)) {
-                    return expressions.push(meta.logicalExpression.right)
+            const expression = t.cloneNode(meta.logicalExpression)
+
+            if (t.isIdentifier(expression.left)) {
+                if (t.isCallExpression(expression.right)) {
+                    expression.right = expression.right.callee
                 }
 
-                expressions.push(meta.logicalExpression.right.callee)
+                expressions.push(expression)
+            }
+        }
+
+        if (meta.conditionalExpression) {
+            const expression = t.cloneNode(meta.conditionalExpression)
+
+            if (t.isCallExpression(expression.alternate)) {
+                expression.alternate = expression.alternate.callee
+            }
+
+            if (t.isCallExpression(expression.consequent)) {
+                expression.consequent = expression.consequent.callee
             }
+
+            expressions.push(expression)
         }
     })
 
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 1) {
+        return t.jsxAttribute(
+            t.jsxIdentifier('rawStyle'),
+            t.jsxExpressionContainer(
+                t.arrowFunctionExpression(styleExpression.params, t.arrayExpression([
+                ...expressions
+                ])
+            ))
+        )
+    }
+
     return t.jsxAttribute(
         t.jsxIdentifier('rawStyle'),
         t.jsxExpressionContainer(t.arrayExpression([
@@ -181,6 +217,7 @@ function wrapInGetBoundArgs(t, toWrap, extraArgs) {
 
 function handlePressableFromMemberExpression(t, path, metadata, wrapInArrowFunction) {
     let expression = undefined
+    let args = []
 
     const members = metadata.at(0).members
 
@@ -194,11 +231,20 @@ function handlePressableFromMemberExpression(t, path, metadata, wrapInArrowFunct
         expression = metadata.at(0)
     }
 
+    if (t.isCallExpression(metadata.at(0))) {
+        expression = metadata.at(0).callee
+        args = metadata.at(0).arguments
+    }
+
     if (!expression) {
         return
     }
 
-    const bindCall = wrapInGetBoundArgs(t , expression, wrapInArrowFunction ? [t.identifier("state")] : [])
+    const bindCall = wrapInGetBoundArgs(t , expression, wrapInArrowFunction ? [t.identifier("state")] : args)
+
+    if (t.isCallExpression(metadata.at(0))) {
+        return bindCall
+    }
 
     if (!wrapInArrowFunction) {
         return t.conditionalExpression(
@@ -240,12 +286,18 @@ function handlePressableArgs(t, path, styleExpression, metadata, parentWrapper,
         return
     }
 
-    if (t.isMemberExpression(wrapper)) {
+    if (t.isMemberExpression(wrapper) && t.isArrayExpression(parentWrapper)) {
         parentWrapper.elements[index] = handlePressableFromMemberExpression(t, path, [metadata[index]])
 
         return
     }
 
+    if (t.isMemberExpression(wrapper) && !t.isArrayExpression(parentWrapper)) {
+        parentWrapper = handlePressableFromMemberExpression(t, path, metadata)
+
+        return
+    }
+
     if (t.isLogicalExpression(wrapper)) {
         if (t.isIdentifier(wrapper.left) && t.isMemberExpression(wrapper.right)) {
             parentWrapper.elements[index].right = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].right])
@@ -256,18 +308,30 @@ function handlePressableArgs(t, path, styleExpression, metadata, parentWrapper,
         return
     }
 
-    if (t.isConditionalExpression(wrapper)) {
-        if (t.isMemberExpression(wrapper.alternate)) {
+    if (t.isConditionalExpression(wrapper) && t.isArrayExpression(parentWrapper)) {
+        if (t.isMemberExpression(wrapper.alternate) || t.isCallExpression(wrapper.alternate)) {
             parentWrapper.elements[index].alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].alternate])
         }
 
-        if (t.isMemberExpression(wrapper.consequent)) {
+        if (t.isMemberExpression(wrapper.consequent) || t.isCallExpression(wrapper.consequent)) {
             parentWrapper.elements[index].consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].consequent])
         }
 
         return
     }
 
+    if (t.isConditionalExpression(wrapper) && !t.isArrayExpression(parentWrapper)) {
+        if (t.isMemberExpression(wrapper.alternate) || t.isCallExpression(wrapper.alternate)) {
+            parentWrapper.alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.alternate])
+        }
+
+        if (t.isMemberExpression(wrapper.consequent) || t.isCallExpression(wrapper.consequent)) {
+            parentWrapper.consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.consequent])
+        }
+
+        return
+    }
+
     const pressableArgs = t.isCallExpression(wrapper)
         ? wrapper.arguments
         : wrapper.argument.arguments
@@ -307,7 +371,7 @@ function handlePressable(t, path, styleAttr, metadata, state) {
     }
 
     // add raw C++ style as prop to be bound
-    path.node.openingElement.attributes.push(metadataToRawStyle(t, metadata))
+    path.node.openingElement.attributes.push(metadataToRawStyle(t, metadata, styleAttr.value.expression))
 
     const styleExpression = styleAttr.value.expression
 
@@ -343,7 +407,7 @@ function handlePressable(t, path, styleAttr, metadata, state) {
 
     // {() => style.pressable(1, 2)}
     if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
-        const parentWrapper = t.isBlockStatement(styleExpression.body)
+        let parentWrapper = t.isBlockStatement(styleExpression.body)
             ? styleExpression.body.body.find(node => t.isReturnStatement(node))
             : styleExpression.body
 
@@ -355,6 +419,12 @@ function handlePressable(t, path, styleAttr, metadata, state) {
             return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index))
         }
 
+        if (t.isReturnStatement(parentWrapper)) {
+            parentWrapper = parentWrapper.argument
+
+            return handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper)
+        }
+
         const pressableArgs = t.isCallExpression(parentWrapper)
             ? parentWrapper.arguments
             : parentWrapper.argument.arguments
@@ -387,12 +457,16 @@ function handlePressable(t, path, styleAttr, metadata, state) {
     if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length > 0) {
         // user used state with custom args we need to getBoundArgs
         // detect between arrow function with body and arrow function
-        const parentWrapper = t.isBlockStatement(styleExpression.body)
+        let parentWrapper = t.isBlockStatement(styleExpression.body)
             ? styleExpression.body.body.find(node => t.isReturnStatement(node))
             : styleExpression.body
 
         if (t.isArrayExpression(parentWrapper)) {
-            return parentWrapper.elements.forEach((wrapper, index) =>handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index))
+            return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index))
+        }
+
+        if (t.isReturnStatement(parentWrapper)) {
+            parentWrapper = parentWrapper.argument
         }
 
         handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper)

package/plugin/stylesheet.js

@@ -44,7 +44,7 @@ function isUnistylesStyleSheet(t, path, state) {
 
 function addStyleSheetTag(t, path, state) {
     const callee = path.get('callee')
-    const uniqueId = stringToUniqueId(state.filename) + ++state.file.tagNumber
+    const uniqueId = stringToUniqueId(state.filename.replace(state.cwd, '')) + ++state.file.tagNumber
 
     callee.container.arguments.push(t.numericLiteral(uniqueId))
 }

package/src/components/Pressable.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef, useRef } from 'react'
-import { Pressable as NativePressableReactNative } from 'react-native'
+import { Pressable as NativePressableReactNative, type PressableStateCallbackType } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { getId } from '../core'
 
 type PressableProps = Props & {
-    rawStyle?: Array<any>
+    rawStyle?: Array<any> | ((event: PressableStateCallbackType) => Array<any>)
     variants?: Record<string, string | boolean>
 }
 
@@ -36,18 +36,12 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ra
                 const returnFn = typeof passedRef === 'function'
                     ? passedRef(ref)
                     : () => {}
-                const unistyles = (rawStyle ?? [])
-                    .map((style, index) => {
-                        if (fnArgs[index]) {
-                            return style
-                        }
-
-                        return undefined
-                    })
-                    .filter(Boolean)
+                const unistyles = typeof rawStyle === 'function'
+                    ? rawStyle({ pressed: false })
+                    : (rawStyle ?? [])
 
                 // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(ref, unistyles, variants, [...fnArgs])
+                UnistylesShadowRegistry.add(ref, unistyles, variants, Array.isArray(styleResult) ? fnArgs : [fnArgs])
 
                 return () => {
                     // @ts-expect-error - this is hidden from TS
@@ -71,21 +65,15 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ra
                             .map(style => typeof style === 'function' ? style.getBoundArgs() : [])
                         : []
                 const pressId = getId()
-                const unistyles = (rawStyle ?? [])
-                    .map((style, index) => {
-                        if (fnArgs[index]) {
-                            return style
-                        }
-
-                        return undefined
-                    })
-                    .filter(Boolean)
+                const unistyles = typeof rawStyle === 'function'
+                    ? rawStyle(state)
+                    : (rawStyle ?? [])
 
                 if (storedRef.current) {
                     // @ts-expect-error - this is hidden from TS
                     UnistylesShadowRegistry.remove(storedRef.current)
                     // @ts-expect-error - this is hidden from TS
-                    UnistylesShadowRegistry.add(storedRef.current, unistyles, variants, [...fnArgs], pressId)
+                    UnistylesShadowRegistry.add(storedRef.current, unistyles, variants, Array.isArray(styleResult) ? fnArgs : [fnArgs], pressId)
                 }
 
                 return typeof styleResult === 'function'