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

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)
@@ -10,19 +10,20 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
                 members: members.filter(Boolean),
                 inlineStyle: undefined,
                 dynamicFunction,
-                conditionalExpression: undefined
+                conditionalExpression: undefined,
+                logicalExpression: undefined
             }
         ]
     }
 
     // [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 }}
@@ -36,18 +37,19 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
                         members: [],
                         inlineStyle: t.objectExpression([prop]),
                         dynamicFunction: undefined,
-                        conditionalExpression: undefined
+                        conditionalExpression: undefined,
+                        logicalExpression: undefined
                     }]
                 }
 
-                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)) {
@@ -55,7 +57,8 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
             members: [node.name],
             inlineStyle: undefined,
             dynamicFunction: undefined,
-            conditionalExpression: undefined
+            conditionalExpression: undefined,
+            logicalExpression: undefined
         }]
     }
 
@@ -64,12 +67,33 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
             members: [],
             inlineStyle: undefined,
             dynamicFunction: undefined,
-            conditionalExpression: node
+            conditionalExpression: node,
+            logicalExpression: undefined
         }]
     }
 
     if (t.isArrowFunctionExpression(node)) {
-        return getStyleMetadata(t, node.body, node)
+        return getStyleMetadata(t, node.body, node, state)
+    }
+
+    // {condition && styles.container}
+    if (t.isLogicalExpression(node)) {
+        return [{
+            members: [],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: undefined,
+            logicalExpression: node
+        }]
+    }
+
+    // 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 []
@@ -117,73 +141,244 @@ function styleAttributeToArray(t, path) {
     styleAttribute.value.expression = t.arrayExpression([styleAttribute.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'))
-        )
+function metadataToRawStyle(t, metadata, styleExpression) {
+    const expressions = []
 
-        path.node.openingElement.attributes.push(variants)
-    }
+    metadata.forEach(meta => {
+        if (meta.inlineStyle) {
+            return meta.inlineStyle.properties.forEach(prop => {
+                if (t.isObjectProperty(prop)) {
+                    expressions.push(t.objectExpression([prop]))
+                }
+            })
+        }
 
-    // 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))))
+        if (meta.members.length > 0) {
+            return expressions.push(t.memberExpression(...meta.members.map(member => t.identifier(member))))
+        }
+
+        if (meta.logicalExpression) {
+            const expression = t.cloneNode(meta.logicalExpression)
+
+            if (t.isIdentifier(expression.left)) {
+                if (t.isCallExpression(expression.right)) {
+                    expression.right = expression.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
+                ])
+            ))
+        )
+    }
 
-    const rawStyles = t.jsxAttribute(
+    return t.jsxAttribute(
         t.jsxIdentifier('rawStyle'),
         t.jsxExpressionContainer(t.arrayExpression([
-            ...props
+            ...expressions
         ]))
     )
+}
 
-    path.node.openingElement.attributes.push(rawStyles)
+function wrapInGetBoundArgs(t, toWrap, extraArgs) {
+    const expression = t.callExpression(
+        t.identifier('getBoundArgs'),
+        [toWrap]
+    )
 
-    const styleExpression = styleAttr.value.expression
-    // {style.pressable}
-    if (t.isMemberExpression(styleExpression)) {
-        // user may care about state, but didn't pass any arguments
-        const members = metadata.at(0).members
+    return  t.callExpression(
+        t.memberExpression(expression, t.identifier('bind')),
+        [t.identifier('undefined'), ...extraArgs].filter(Boolean)
+    )
+}
 
-        if (members.length === 0) {
-            return
-        }
+function handlePressableFromMemberExpression(t, path, metadata, wrapInArrowFunction) {
+    let expression = undefined
+    let args = []
 
-        const stylePath = members.slice(1).reduce(
+    const members = metadata.at(0).members
+
+    if (members) {
+        expression = members.slice(1).reduce(
             (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")]
+            t.identifier(members[0]))
+    }
+
+    if (t.isMemberExpression(metadata.at(0))) {
+        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")] : args)
+
+    if (t.isCallExpression(metadata.at(0))) {
+        return bindCall
+    }
+
+    if (!wrapInArrowFunction) {
+        return t.conditionalExpression(
+            t.binaryExpression(
+                "===",
+                t.unaryExpression(
+                    "typeof",
+                    expression
+                ),
+                t.stringLiteral("function")
+            ),
+            bindCall,
+            expression
         )
+    }
 
-        // state => typeof style.pressable === 'function'
-        // ? getBoundArgs(style.pressable).bind(undefined, state)
-        // : style.pressable
-        styleAttr.value.expression = t.arrowFunctionExpression(
-            [t.identifier("state")],
-            t.conditionalExpression(
-                t.binaryExpression(
-                    "===",
-                    t.unaryExpression(
-                        "typeof",
-                        stylePath
-                    ),
-                    t.stringLiteral("function")
+    // state => typeof style.pressable === 'function'
+    // ? getBoundArgs(style.pressable).bind(undefined, state)
+    // : style.pressable
+    return t.arrowFunctionExpression(
+        [t.identifier("state")],
+        t.conditionalExpression(
+            t.binaryExpression(
+                "===",
+                t.unaryExpression(
+                    "typeof",
+                    expression
                 ),
-                bindCall,
-                stylePath
-            )
+                t.stringLiteral("function")
+            ),
+            bindCall,
+            expression
+        )
+    )
+}
+
+function handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index) {
+    if (t.isObjectExpression(wrapper)) {
+        return
+    }
+
+    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])
+
+            return
+        }
+
+        return
+    }
+
+    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) || 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
+    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) && t.isArrayExpression(parentWrapper)) {
+        parentWrapper.elements[index] = bindCall
+
+        return
+    }
+
+    if (t.isCallExpression(wrapper)) {
+        styleExpression.body = bindCall
+    }
+}
+
+function handlePressable(t, path, styleAttr, metadata, state) {
+    // add variants
+    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
+    path.node.openingElement.attributes.push(metadataToRawStyle(t, metadata, styleAttr.value.expression))
+
+    const styleExpression = styleAttr.value.expression
+
+    // {style.pressable}
+    if (t.isMemberExpression(styleExpression)) {
+        styleAttr.value.expression = handlePressableFromMemberExpression(t, path, metadata, true)
+
         return
     }
 
@@ -212,20 +407,30 @@ function handlePressable(t, path, styleAttr, metadata, state) {
 
     // {() => style.pressable(1, 2)}
     if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
-        const wrapper = t.isBlockStatement(styleExpression.body)
+        let parentWrapper = t.isBlockStatement(styleExpression.body)
             ? styleExpression.body.body.find(node => t.isReturnStatement(node))
             : styleExpression.body
 
-        if (t.isMemberExpression(wrapper)) {
+        if (t.isMemberExpression(parentWrapper)) {
             return
         }
 
-        const pressableArgs = t.isCallExpression(wrapper)
-            ? wrapper.arguments
-            : wrapper.argument.arguments
-        const callee = t.isCallExpression(wrapper)
-            ? wrapper.callee
-            : wrapper.argument.callee
+        if (t.isArrayExpression(parentWrapper)) {
+            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
+        const callee = t.isCallExpression(parentWrapper)
+            ? parentWrapper.callee
+            : parentWrapper.argument.callee
         const getBoundArgsCall = t.callExpression(
             t.identifier('getBoundArgs'),
             [callee]
@@ -235,14 +440,14 @@ function handlePressable(t, path, styleAttr, metadata, state) {
             [t.identifier('undefined'), ...pressableArgs]
         )
 
-        if (t.isCallExpression(wrapper)) {
+        if (t.isCallExpression(parentWrapper)) {
             styleExpression.body = bindCall
 
             return
         }
 
-        if (wrapper) {
-            wrapper.argument = bindCall
+        if (parentWrapper) {
+            parentWrapper.argument = bindCall
         }
 
         return
@@ -252,41 +457,19 @@ 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 wrapper = t.isBlockStatement(styleExpression.body)
+        let parentWrapper = t.isBlockStatement(styleExpression.body)
             ? styleExpression.body.body.find(node => t.isReturnStatement(node))
             : styleExpression.body
 
-        if (t.isMemberExpression(wrapper)) {
-            return
+        if (t.isArrayExpression(parentWrapper)) {
+            return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index))
         }
 
-        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]
-        )
-
-        // arrow function
-        if (t.isCallExpression(wrapper)) {
-            styleExpression.body = bindCall
-
-            return
+        if (t.isReturnStatement(parentWrapper)) {
+            parentWrapper = parentWrapper.argument
         }
 
-        // arrow function with body
-        if (wrapper) {
-            wrapper.argument = bindCall
-        }
+        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>
 }
 
@@ -23,7 +23,11 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ra
                 const fnArgs = typeof styleResult === 'function'
                     // @ts-expect-error - this is hidden from TS
                     ? styleResult.getBoundArgs()
-                    : []
+                    : Array.isArray(styleResult)
+                        ? styleResult
+                            // @ts-expect-error - this is hidden from TS
+                            .map(style => typeof style === 'function' ? style.getBoundArgs() : [])
+                        : []
 
                 if (typeof passedRef === 'object' && passedRef !== null) {
                     passedRef.current = ref
@@ -32,9 +36,12 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ra
                 const returnFn = typeof passedRef === 'function'
                     ? passedRef(ref)
                     : () => {}
+                const unistyles = typeof rawStyle === 'function'
+                    ? rawStyle({ pressed: false })
+                    : (rawStyle ?? [])
 
                 // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(ref, rawStyle ?? [], variants, [fnArgs])
+                UnistylesShadowRegistry.add(ref, unistyles, variants, Array.isArray(styleResult) ? fnArgs : [fnArgs])
 
                 return () => {
                     // @ts-expect-error - this is hidden from TS
@@ -52,20 +59,30 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ra
                 const fnArgs = typeof styleResult === 'function'
                     // @ts-expect-error - this is hidden from TS
                     ? styleResult.getBoundArgs()
-                    : []
+                    : Array.isArray(styleResult)
+                        ? styleResult
+                            // @ts-expect-error - this is hidden from TS
+                            .map(style => typeof style === 'function' ? style.getBoundArgs() : [])
+                        : []
                 const pressId = getId()
+                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, rawStyle ?? [], variants, [fnArgs], pressId)
+                    UnistylesShadowRegistry.add(storedRef.current, unistyles, variants, Array.isArray(styleResult) ? fnArgs : [fnArgs], pressId)
                 }
 
                 return typeof styleResult === 'function'
                     // @ts-expect-error - this is hidden from TS
                     ? styleResult(pressId)
-                    : styleResult
+                    : Array.isArray(styleResult)
+                        // @ts-expect-error - this is hidden from TS
+                        ? styleResult.map(style => typeof style === 'function' ? style(pressId) : style)
+                        : styleResult
             }}
         />
     )