react-native-unistyles 3.0.0-alpha.41 → 3.0.0-alpha.42

package/lib/typescript/src/web/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../../../src/web/runtime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC3F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAMjD,cAAM,uBAAuB;IACzB,UAAU,wBAAuB;IACjC,SAAS,wBAAsB;IAE/B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAYpB,IAAI,WAAW,gBASd;IAED,IAAI,SAAS,cAMZ;IAED,IAAI,mBAAmB,2BAEtB;IAED,IAAI,WAAW,sCAEd;IAED,IAAI,UAAU,wDAEb;IAED,IAAI,WAAW,gBAMd;IAED,IAAI,KAAK,UAER;IAED,IAAI,UAAU,WAEb;IAED,IAAI,MAAM;;;MAYT;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,MAAM;;;;;;MAQT;IAED,IAAI,SAAS,oDAEZ;IAED,IAAI,GAAG,YAEN;IAED,IAAI,iBAAiB,YAEpB;IAED,IAAI,aAAa,2DAEhB;IAED,IAAI,WAAW,IAAI,oBAAoB,CAuBtC;IAED,QAAQ,cAAe,YAAY,UAQlC;IAED,iBAAiB,cAAe,OAAO,UAQtC;IAED,0BAA0B,UAAW,MAAM,UAM1C;IAED,gBAAgB,aAAW;IAE3B,WAAW,cAAe,YAAY,WAAW,CAAC,YAAY,EAAE,QAAQ,KAAK,QAAQ,UAQpF;IAED,QAAQ,mCAYP;CACJ;AAED,eAAO,MAAM,gBAAgB,yBAAgC,CAAA"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../../../src/web/runtime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC3F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAMjD,cAAM,uBAAuB;IACzB,UAAU,wBAAuB;IACjC,SAAS,wBAAsB;IAE/B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAYpB,IAAI,WAAW,gBASd;IAED,IAAI,SAAS,cAMZ;IAED,IAAI,mBAAmB,2BAEtB;IAED,IAAI,WAAW,sCAEd;IAED,IAAI,UAAU,wDAEb;IAED,IAAI,WAAW,gBAMd;IAED,IAAI,KAAK,UAER;IAED,IAAI,UAAU,WAEb;IAED,IAAI,MAAM;;;MAYT;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,MAAM;;;;;;MAQT;IAED,IAAI,SAAS,oDAEZ;IAED,IAAI,GAAG,YAEN;IAED,IAAI,iBAAiB,YAEpB;IAED,IAAI,aAAa,2DAEhB;IAED,IAAI,WAAW,IAAI,oBAAoB,CAuBtC;IAED,QAAQ,cAAe,YAAY,UAYlC;IAED,iBAAiB,cAAe,OAAO,UAQtC;IAED,0BAA0B,UAAW,MAAM,UAM1C;IAED,gBAAgB,aAAW;IAE3B,WAAW,cAAe,YAAY,WAAW,CAAC,YAAY,EAAE,QAAQ,KAAK,QAAQ,UAQpF;IAED,QAAQ,mCAQP;CACJ;AAED,eAAO,MAAM,gBAAgB,yBAAgC,CAAA"}

package/lib/typescript/src/web/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/web/state.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAY,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC3E,OAAO,KAAK,EAAE,oBAAoB,EAAmB,MAAM,WAAW,CAAA;AAMtE,cAAM,qBAAqB;IACvB,MAAM,qBAAoC;IAC1C,SAAS,CAAC,EAAE,YAAY,CAAA;IAExB,OAAO,CAAC,mBAAmB,CAA6B;IAExD,IAAI,UAAU,IAKkB,aAAa,GAAG,SAAS,CACxD;IAED,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAElC,iBAAiB,UAAQ;IAEzB,IAAI,WAAY,eAAe,UAU9B;IAED,OAAO,CAAC,UAAU,CAIjB;IAED,OAAO,CAAC,YAAY,CAyBnB;IAED,OAAO,CAAC,eAAe,CAkBtB;CACJ;AAED,eAAO,MAAM,cAAc,uBAA8B,CAAA"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/web/state.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAY,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC3E,OAAO,KAAK,EAAE,oBAAoB,EAAmB,MAAM,WAAW,CAAA;AAStE,cAAM,qBAAqB;IACvB,MAAM,qBAAoC;IAC1C,SAAS,CAAC,EAAE,YAAY,CAAA;IAExB,OAAO,CAAC,mBAAmB,CAA6B;IAExD,IAAI,UAAU,IAKkB,aAAa,GAAG,SAAS,CACxD;IAED,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAElC,iBAAiB,UAAQ;IAEzB,IAAI,WAAY,eAAe,UAa9B;IAED,OAAO,CAAC,UAAU,CAIjB;IAED,OAAO,CAAC,YAAY,CA6BnB;IAED,OAAO,CAAC,eAAe,CA2BtB;CACJ;AAED,eAAO,MAAM,cAAc,uBAA8B,CAAA"}

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

@@ -1,7 +1,7 @@
 export declare const reduceObject: <TObj extends Record<string, any>, TReducer>(obj: TObj, reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer) => { [K in keyof TObj]: TReducer; };
 export declare const keyInObject: <T extends Record<string, any>>(obj: T, key: PropertyKey) => key is keyof T;
 export declare const isServer: () => boolean;
-export declare const warn: (message: string) => void;
+export declare const error: (message: string) => Error;
 export declare const equal: <T>(a: T, b: T) => boolean;
 export declare const generateHash: (value: any) => string;
 export declare const hyphenate: (propertyName: string) => string;

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,OAC9D,IAAI,WACA,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,IAAI,KAAK,QAAQ,KACmD,GAAG,CAAe,IAAV,MAAM,IAAI,GAAG,QAAQ,GAAE,CAAA;AAErJ,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,OAAO,WAAW,KAAG,GAAG,IAAI,MAAM,CAAe,CAAA;AAElH,eAAO,MAAM,QAAQ,eAAsC,CAAA;AAE3D,eAAO,MAAM,IAAI,YAAa,MAAM,SAA2D,CAAA;AAE/F,eAAO,MAAM,KAAK,GAAI,CAAC,KAAK,CAAC,KAAK,CAAC,YAqBlC,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,GAAG,WAQtC,CAAA;AAED,eAAO,MAAM,SAAS,iBAAkB,MAAM,WAAyE,CAAA"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,OAC9D,IAAI,WACA,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,IAAI,KAAK,QAAQ,KACmD,GAAG,CAAC,IAAI,MAAM,IAAI,GAAG,QAAQ,GAAE,CAAA;AAErJ,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,OAAO,WAAW,KAAG,GAAG,IAAI,MAAM,CAAe,CAAA;AAElH,eAAO,MAAM,QAAQ,eAAsC,CAAA;AAE3D,eAAO,MAAM,KAAK,YAAa,MAAM,UAAuC,CAAA;AAE5E,eAAO,MAAM,KAAK,GAAI,CAAC,KAAK,CAAC,KAAK,CAAC,YAqBlC,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,GAAG,WAQtC,CAAA;AAED,eAAO,MAAM,SAAS,iBAAkB,MAAM,WAAyE,CAAA"}

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

@@ -2,7 +2,6 @@ import type { UnistyleDependency } from '../../specs/NativePlatform';
 import { ColorScheme } from '../../specs/types';
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet';
 export declare const schemeToTheme: (scheme: ColorScheme) => "light" | "dark";
-export declare const hexToRGBA: (hex: string, opacity: number) => string;
 export type UnistyleSecrets = {
     __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>;
     __uni__key: string;

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

@@ -1 +1 @@
-{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAKpG,eAAO,MAAM,aAAa,WAAY,WAAW,qBAQhD,CAAA;AAED,eAAO,MAAM,SAAS,QAAS,MAAM,WAAW,MAAM,WAM5B,CAAA;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC1B,iBAAiB,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,UAAU,CAAC,WAAW,eAAe,MAKnE,CAAA;AAED,eAAO,MAAM,cAAc,WAAY,GAAG,sBAUzC,CAAA;AAED,eAAO,MAAM,SAAS,WAAY,eAAe,OAUhD,CAAA;AAED,eAAO,MAAM,YAAY,YAAa,WAAW,YAAoC,CAAA;AAErF,eAAO,MAAM,sBAAsB,UAAW,MAAM,uBAUnD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,MAAM,WAmB1C,CAAA;AAED,eAAO,MAAM,2BAA2B,UAAW,GAAG,yBAQrD,CAAA"}
+{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAKpG,eAAO,MAAM,aAAa,WAAY,WAAW,qBAQhD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,iBAAiB,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,UAAU,CAAC,WAAW,eAAe,MAKnE,CAAA;AAED,eAAO,MAAM,cAAc,WAAY,GAAG,sBAUzC,CAAA;AAED,eAAO,MAAM,SAAS,WAAY,eAAe,OAUhD,CAAA;AAED,eAAO,MAAM,YAAY,YAAa,WAAW,YAAoC,CAAA;AAErF,eAAO,MAAM,sBAAsB,UAAW,MAAM,uBAYnD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,MAAM,WAmB1C,CAAA;AAED,eAAO,MAAM,2BAA2B,UAAW,GAAG,yBAQrD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.41",
+  "version": "3.0.0-alpha.42",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -8,7 +8,7 @@
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
     "lint": "biome lint",
     "prepare": "husky && bob build",
-    "precommit": "concurrently 'bun tsc' 'bun lint' 'bun test'",
+    "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
     "release": "release-it"
   },
   "main": "lib/commonjs/index",
@@ -42,11 +42,7 @@
     "react-native",
     "ios",
     "android",
-    "react-native-macos",
-    "react-native-windows",
     "react-native-web",
-    "react-native-tvos",
-    "react-native-visionos",
     "expo"
   ],
   "repository": "https://github.com/jpudysz/react-native-unistyles",
@@ -62,26 +58,26 @@
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "7.25.9",
     "@biomejs/biome": "1.9.4",
-    "@commitlint/config-conventional": "19.5.0",
-    "@react-native/normalize-colors": "0.76.0",
+    "@commitlint/config-conventional": "19.6.0",
+    "@react-native/normalize-colors": "0.76.3",
     "@release-it/conventional-changelog": "8.0.2",
-    "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.12",
     "babel-plugin-tester": "11.0.4",
-    "commitlint": "19.5.0",
-    "concurrently": "8.2.2",
-    "husky": "9.1.6",
+    "commitlint": "19.6.0",
+    "concurrently": "9.1.0",
+    "husky": "9.1.7",
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
     "nitro-codegen": "0.17.0",
     "react": "18.3.1",
-    "react-native": "0.76.0",
-    "react-native-builder-bob": "0.30.2",
+    "react-native": "0.76.3",
+    "react-native-builder-bob": "0.33.1",
     "react-native-nitro-modules": "0.17.0",
+    "react-native-web": "0.19.13",
     "react-test-renderer": "18.3.1",
-    "release-it": "17.10.0",
-    "typescript": "5.6.3"
+    "release-it": "17.6.0",
+    "typescript": "5.7.2"
   },
   "peerDependencies": {
     "@react-native/normalize-colors": "*",

package/plugin/common.js

@@ -138,10 +138,7 @@ function getSecondPropertyName(t, memberExpression) {
     return []
 }
 
-const PRESSABLE_STATE_NAME = '__uni_pressable_state'
-
 module.exports = {
     getIdentifierNameFromExpression,
-    getSecondPropertyName,
-    PRESSABLE_STATE_NAME
+    getSecondPropertyName
 }

package/plugin/import.js

@@ -1,8 +1,34 @@
-module.exports = function addShadowRegistryImport(t, path) {
+module.exports = function addUnistylesImport(t, path, state) {
     const newImport = t.importDeclaration(
-        [t.importSpecifier(t.identifier('UnistylesShadowRegistry'), t.identifier('UnistylesShadowRegistry'))],
+        [
+            t.importSpecifier(t.identifier('UnistylesShadowRegistry'), t.identifier('UnistylesShadowRegistry')),
+            ...state.file.shouldIncludePressable
+                ? [
+                    t.importSpecifier(t.identifier('Pressable'), t.identifier('Pressable')),
+                    t.importSpecifier(t.identifier('getBoundArgs'), t.identifier('getBoundArgs'))
+                ]
+                : []
+        ].filter(Boolean),
         t.stringLiteral('react-native-unistyles')
     )
 
-    path.unshiftContainer('body', newImport)
+    if (state.file.shouldIncludePressable) {
+        const rnImport = path.node.body.find(node => t.isImportDeclaration(node) && node.source.value === 'react-native')
+
+        if (rnImport) {
+            rnImport.specifiers = rnImport.specifiers.filter(specifier => specifier.local.name !== 'Pressable')
+        }
+
+        const rnWebImport = path.node.body.find(node => t.isImportDeclaration(node) && node.source.value === 'react-native-web/dist/exports/Pressable')
+        const unistylesImport = path.node.body.find(node => t.isImportDeclaration(node) && node.source.value === 'react-native-unistyles')
+        const hasUniPressable = unistylesImport && unistylesImport.specifiers
+            ? unistylesImport.specifiers.find(specifier => specifier.imported.name === 'Pressable' && specifier.local.name !== "NativePressableReactNative")
+            : false
+
+        if (rnWebImport && !hasUniPressable) {
+            rnWebImport.specifiers = []
+        }
+    }
+
+    path.node.body.unshift(newImport)
 }

package/plugin/index.js

@@ -1,4 +1,4 @@
-const addShadowRegistryImport = require('./import')
+const addUnistylesImport = require('./import')
 const { getStyleMetadata, getStyleAttribute, styleAttributeToArray, handlePressable } = require('./style')
 const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
 const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyle } = require('./stylesheet')
@@ -32,6 +32,8 @@ module.exports = function ({ types: t }) {
                 enter(path, state) {
                     state.file.hasAnyUnistyle = false
                     state.file.hasUnistylesImport = false
+                    state.file.shouldIncludePressable = false
+                    state.file.hasVariants = false
                     state.file.styleSheetLocalName = ''
                     state.file.tagNumber = 0
                     state.file.isClassComponent = false
@@ -39,7 +41,7 @@ module.exports = function ({ types: t }) {
                 },
                 exit(path, state) {
                     if (state.file.hasAnyUnistyle) {
-                        addShadowRegistryImport(t, path)
+                        addUnistylesImport(t, path, state)
                     }
                 }
             },
@@ -90,11 +92,19 @@ module.exports = function ({ types: t }) {
 
                 if (importSource.includes('react-native')) {
                     path.node.specifiers.forEach(specifier => {
+                        if (specifier.imported && specifier.imported.name === 'Pressable' && specifier.local.name !== 'NativePressableReactNative') {
+                            state.file.shouldIncludePressable = true
+                        }
+
                         if (specifier.imported && reactNativeComponentNames.includes(specifier.imported.name)) {
                             state.reactNativeImports[specifier.local.name] = true
                         }
                     })
                 }
+
+                if (importSource.includes('react-native-web/dist/exports/Pressable')) {
+                    state.file.shouldIncludePressable = true
+                }
             },
             JSXElement(path, state) {
                 if (state.file.isClassComponent) {
@@ -123,15 +133,15 @@ module.exports = function ({ types: t }) {
 
                 const metadata = getStyleMetadata(t, styleAttr.value.expression)
 
+                if (openingElementName === 'Pressable') {
+                    return handlePressable(t, path, styleAttr, metadata, state)
+                }
+
                 // style prop is using unexpected expression
                 if (metadata.length === 0) {
                     return
                 }
 
-                const uniquePressableId = openingElementName === 'Pressable'
-                    ? handlePressable(t, path, styleAttr, metadata)
-                    : undefined
-
                 styleAttributeToArray(t, path)
 
                 // to add import
@@ -144,8 +154,8 @@ module.exports = function ({ types: t }) {
                 }
 
                 refProp
-                    ? overrideRef(t, path, refProp, metadata, state, uniquePressableId)
-                    : addRef(t, path, metadata, state, uniquePressableId)
+                    ? overrideRef(t, path, refProp, metadata, state)
+                    : addRef(t, path, metadata, state)
             },
             CallExpression(path, state) {
                 if (isUsingVariants(t, path)) {

package/plugin/ref.js

@@ -1,9 +1,3 @@
-const { PRESSABLE_STATE_NAME } = require('./common')
-
-function generateUniqueId() {
-    return `${Math.random().toString(36).substring(2, 9)}`
-}
-
 function getRefProp(t, path) {
     return path.node.openingElement.attributes.find(attr =>
         t.isJSXAttribute(attr) &&
@@ -37,65 +31,16 @@ function arrayExpressionFromMetadata(t, metadata) {
 }
 
 function arrayFromDynamicFunctionArgs(t, metadata, path) {
-    const hasPressableDynamicFunction = path.node.openingElement.attributes
-        .find(attr => t.isJSXIdentifier(attr.name) && attr.name.name === "style" && t.isArrowFunctionExpression(attr.value.expression))
-
     const memberExpressions = metadata
-        .map(meta => {
-            if (meta.dynamicFunction && meta.dynamicFunction.arguments) {
-                const args = meta.dynamicFunction.arguments.map(arg => {
-                    // special case for pressable
-                    if (t.isIdentifier(arg) && arg.name === PRESSABLE_STATE_NAME) {
-                        // replace with { pressed: false }
-                        return t.objectExpression([
-                            t.objectProperty(
-                                t.identifier("pressed"),
-                                t.booleanLiteral(false)
-                            )
-                        ])
-                    }
-
-                    if (t.isMemberExpression(arg) && arg.object.name === PRESSABLE_STATE_NAME) {
-                        return t.identifier('false')
-                    }
-
-                    return arg
-                })
-
-                return t.arrayExpression(args)
-            }
-
-            // typeof styles.pressable === "function" ? { pressed: false } : []
-            if (hasPressableDynamicFunction) {
-                return t.arrayExpression([
-                    t.conditionalExpression(
-                        t.binaryExpression(
-                            "===",
-                            t.unaryExpression(
-                                "typeof",
-                                t.identifier("styles.pressable")
-                            ),
-                            t.stringLiteral("function")
-                        ),
-                        t.objectExpression([
-                            t.objectProperty(
-                                t.identifier("pressed"),
-                                t.booleanLiteral(false)
-                            )
-                        ]),
-                        t.arrayExpression([])
-                    )
-                ])
-            }
-
-            return t.arrayExpression([])
-        })
+        .map(meta => meta.dynamicFunction
+            ? t.arrayExpression(meta.dynamicFunction.arguments)
+            : t.arrayExpression([]))
         .filter(Boolean)
 
     return t.arrayExpression(memberExpressions)
 }
 
-function addRef(t, path, metadata, state, uniquePressableId) {
+function addRef(t, path, metadata, state) {
     const hasVariants = state.file.hasVariants
 
     const newRefFunction = t.arrowFunctionExpression(
@@ -108,9 +53,8 @@ function addRef(t, path, metadata, state, uniquePressableId) {
                         t.identifier('ref'),
                         arrayExpressionFromMetadata(t, metadata),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        arrayFromDynamicFunctionArgs(t, metadata, path),
-                        uniquePressableId ? t.stringLiteral(uniquePressableId) : undefined
-                    ].filter(Boolean)
+                        arrayFromDynamicFunctionArgs(t, metadata, path)
+                    ]
                 )
             ),
             t.returnStatement(
@@ -132,7 +76,7 @@ function addRef(t, path, metadata, state, uniquePressableId) {
     path.node.openingElement.attributes.push(newRefProp)
 }
 
-function overrideRef(t, path, refProp, metadata, state, uniquePressableId) {
+function overrideRef(t, path, refProp, metadata, state) {
     const hasVariants = state.file.hasVariants
     const uniqueRefName = path.scope.generateUidIdentifier('ref').name
     const isIdentifier = t.isIdentifier(refProp.value.expression)
@@ -158,9 +102,8 @@ function overrideRef(t, path, refProp, metadata, state, uniquePressableId) {
                             t.identifier(uniqueRefName),
                             arrayExpressionFromMetadata(t, metadata),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                            arrayFromDynamicFunctionArgs(t, metadata, path),
-                            uniquePressableId ? t.stringLiteral(uniquePressableId) : undefined
-                        ].filter(Boolean)
+                            arrayFromDynamicFunctionArgs(t, metadata, path)
+                        ]
                     )
                 ),
                 t.returnStatement(
@@ -204,9 +147,8 @@ function overrideRef(t, path, refProp, metadata, state, uniquePressableId) {
                             t.identifier(userRefName),
                             arrayExpressionFromMetadata(t, metadata),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                            arrayFromDynamicFunctionArgs(t, metadata, path),
-                            uniquePressableId ? t.stringLiteral(uniquePressableId) : undefined
-                        ].filter(Boolean)
+                            arrayFromDynamicFunctionArgs(t, metadata, path)
+                        ]
                     )
                 ),
                 // Merged cleanup function
@@ -267,9 +209,8 @@ function overrideRef(t, path, refProp, metadata, state, uniquePressableId) {
                         t.identifier(uniqueRefName),
                         arrayExpressionFromMetadata(t, metadata),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        arrayFromDynamicFunctionArgs(t, metadata, path),
-                        uniquePressableId ? t.stringLiteral(uniquePressableId) : undefined
-                    ].filter(Boolean)
+                        arrayFromDynamicFunctionArgs(t, metadata, path)
+                    ]
                 )
             ),
             t.returnStatement(
@@ -300,6 +241,5 @@ module.exports = {
     getRefProp,
     addRef,
     overrideRef,
-    hasStringRef,
-    generateUniqueId
+    hasStringRef
 }

package/plugin/style.js

@@ -1,6 +1,3 @@
-const { PRESSABLE_STATE_NAME } = require('./common')
-const { generateUniqueId } = require('./ref')
-
 function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
@@ -71,7 +68,6 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
         }]
     }
 
-    // pressable
     if (t.isArrowFunctionExpression(node)) {
         return getStyleMetadata(t, node.body, node)
     }
@@ -90,12 +86,6 @@ function getStyleAttribute(t, path) {
 function styleAttributeToArray(t, path) {
     const styleAttribute = getStyleAttribute(t, path)
 
-    // special case for pressable
-    // {state => styles.pressable(state)}
-    if (t.isArrowFunctionExpression(styleAttribute.value.expression)) {
-        return
-    }
-
     // {{...style.container, ...style.container}}
     if (t.isObjectExpression(styleAttribute.value.expression)) {
         const properties = styleAttribute.value.expression.properties
@@ -127,12 +117,35 @@ function styleAttributeToArray(t, path) {
     styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
 }
 
-function handlePressable(t, path, styleAttr, metadata) {
-    const styleExpression = styleAttr.value.expression
+function handlePressable(t, path, styleAttr, metadata, state) {
+    if (state.file.hasVariants) {
+        const variants = t.jsxAttribute(
+            t.jsxIdentifier('variants'),
+            t.jsxExpressionContainer(t.identifier('__uni__variants'))
+        )
+
+        path.node.openingElement.attributes.push(variants)
+    }
+
+    // add raw C++ style as prop to be bound
+    const props = metadata
+        .map(meta => meta.members)
+        .filter(members => members.length > 0)
+        .flatMap(members => t.memberExpression(...members.map(member => t.identifier(member))))
 
+    const rawStyles = t.jsxAttribute(
+        t.jsxIdentifier('rawStyle'),
+        t.jsxExpressionContainer(t.arrayExpression([
+            ...props
+        ]))
+    )
+
+    path.node.openingElement.attributes.push(rawStyles)
+
+    const styleExpression = styleAttr.value.expression
     // {style.pressable}
-    // the worst case, we don't know if user rely on state
     if (t.isMemberExpression(styleExpression)) {
+        // user may care about state, but didn't pass any arguments
         const members = metadata.at(0).members
 
         if (members.length === 0) {
@@ -143,10 +156,18 @@ function handlePressable(t, path, styleAttr, metadata) {
             (acc, property) => t.memberExpression(acc, t.identifier(property)),
             t.identifier(members[0])
         )
+        const expression = t.callExpression(
+            t.identifier('getBoundArgs'),
+            [stylePath]
+        )
+        const bindCall = t.callExpression(
+            t.memberExpression(expression, t.identifier('bind')),
+            [t.identifier('undefined'), t.identifier("state")]
+        )
 
-        const uniquePressableId = generateUniqueId()
-
-        // state => typeof style.pressable === 'function' ? style.pressable(state) : style.pressable
+        // state => typeof style.pressable === 'function'
+        // ? getBoundArgs(style.pressable).bind(undefined, state)
+        // : style.pressable
         styleAttr.value.expression = t.arrowFunctionExpression(
             [t.identifier("state")],
             t.conditionalExpression(
@@ -158,81 +179,114 @@ function handlePressable(t, path, styleAttr, metadata) {
                     ),
                     t.stringLiteral("function")
                 ),
-                t.callExpression(
-                    stylePath,
-                    [t.identifier("state"), t.objectExpression([
-                        t.objectProperty(
-                            t.identifier("__uni_pressable_id"),
-                            t.stringLiteral(uniquePressableId)
-                        )
-                    ])]
-                ),
+                bindCall,
                 stylePath
             )
         )
 
-        return uniquePressableId
+        return
     }
 
     // {style.pressable(1, 2)}
     if (t.isCallExpression(styleExpression)) {
         // user already called dynamic function
-        // there is no work to do
-        return
-    }
+        const expression = t.callExpression(
+            t.identifier('getBoundArgs'),
+            [styleExpression.callee]
+        )
+        const bindCall = t.callExpression(
+            t.memberExpression(expression, t.identifier('bind')),
+            [t.identifier('undefined'), ...styleExpression.arguments]
+        )
 
-    // {() => style.pressable(1, 2)}
-    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
-        // user doesn't care about the state
-        // we can safely unwrap the function
-        styleAttr.value.expression = styleExpression.body
+        path.node.openingElement.attributes = path.node.openingElement.attributes.map(attribute => {
+            if (attribute.name.name === "style") {
+                attribute.value.expression = t.arrowFunctionExpression([], bindCall)
+            }
+
+            return attribute
+        })
 
         return
     }
 
-    // {state => style.pressable(state, 1, 2)}
-    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length > 0) {
-        // already a function, we need to set state to false
-        // and pass it to C++ as in background it will never be true
-        const args = metadata.at(0).dynamicFunction
+    // {() => style.pressable(1, 2)}
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
+        const wrapper = t.isBlockStatement(styleExpression.body)
+            ? styleExpression.body.body.find(node => t.isReturnStatement(node))
+            : styleExpression.body
 
-        if (!t.isCallExpression(args) || args.arguments.length === 0) {
+        if (t.isMemberExpression(wrapper)) {
             return
         }
 
-        // get state local name
-        const stateIdentifier = styleExpression.params[0]
+        const pressableArgs = t.isCallExpression(wrapper)
+            ? wrapper.arguments
+            : wrapper.argument.arguments
+        const callee = t.isCallExpression(wrapper)
+            ? wrapper.callee
+            : wrapper.argument.callee
+        const getBoundArgsCall = t.callExpression(
+            t.identifier('getBoundArgs'),
+            [callee]
+        )
+        const bindCall = t.callExpression(
+            t.memberExpression(getBoundArgsCall, t.identifier('bind')),
+            [t.identifier('undefined'), ...pressableArgs]
+        )
+
+        if (t.isCallExpression(wrapper)) {
+            styleExpression.body = bindCall
 
-        if (!stateIdentifier || !t.isIdentifier(stateIdentifier)) {
             return
         }
 
-        // replace state name with matching identifier
-        args.arguments.map(arg => {
-            if (t.isIdentifier(arg) && arg.name === stateIdentifier.name) {
-                arg.name = PRESSABLE_STATE_NAME
-            }
+        if (wrapper) {
+            wrapper.argument = bindCall
+        }
 
-            if (t.isMemberExpression(arg) && arg.object.name === stateIdentifier.name) {
-                arg.object.name = PRESSABLE_STATE_NAME
-            }
+        return
+    }
 
-            return arg
-        })
+    // {state => style.pressable(state, 1, 2)}
+    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 wrapper = t.isBlockStatement(styleExpression.body)
+            ? styleExpression.body.body.find(node => t.isReturnStatement(node))
+            : styleExpression.body
 
-        const uniquePressableId = generateUniqueId()
+        if (t.isMemberExpression(wrapper)) {
+            return
+        }
 
-        args.arguments.push(t.objectExpression([
-            t.objectProperty(
-                t.identifier("__uni_pressable_id"),
-                t.stringLiteral(uniquePressableId)
-            )
-        ]))
+        const pressableArgs = t.isCallExpression(wrapper)
+            ? wrapper.arguments
+            : wrapper.argument.arguments
+        const callee = t.isCallExpression(wrapper)
+            ? wrapper.callee
+            : wrapper.argument.callee
 
-        // update arrow function arg name
-        styleExpression.params[0].name = PRESSABLE_STATE_NAME
+        const getBoundArgsCall = t.callExpression(
+            t.identifier('getBoundArgs'),
+            [callee]
+        )
+        const bindCall = t.callExpression(
+            t.memberExpression(getBoundArgsCall, t.identifier('bind')),
+            [t.identifier('undefined'), ...pressableArgs]
+        )
+
+        // arrow function
+        if (t.isCallExpression(wrapper)) {
+            styleExpression.body = bindCall
+
+            return
+        }
 
-        return uniquePressableId
+        // arrow function with body
+        if (wrapper) {
+            wrapper.argument = bindCall
+        }
     }
 }
 

package/src/components/Display.tsx

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react'
-import { useMedia } from './useMedia'
+import { useMedia } from '../hooks'
 
 type DisplayProps = { mq: symbol } & PropsWithChildren
 

package/src/components/Hide.tsx

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react'
-import { useMedia } from './useMedia'
+import { useMedia } from '../hooks'
 
 type HideProps = { mq: symbol } & PropsWithChildren