From 8ff922d8617047b71d37b0557b0db66189947aa9 Mon Sep 17 00:00:00 2001
From: norman-ags <63862061+norman-ags@users.noreply.github.com>
Date: Tue, 28 Sep 2021 18:54:34 +0800
Subject: [PATCH] fix: function style not working (#17)

---
 example/src/Example.tsx | 19 +++++++++++++++++--
 src/internals/index.js  | 21 ++++++++++++++-------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/example/src/Example.tsx b/example/src/Example.tsx
index 83182fb..43da143 100644
--- a/example/src/Example.tsx
+++ b/example/src/Example.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch, View, ViewProps } from 'react-native';
+import { Switch, View, ViewProps, SafeAreaView, Text } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 
 import { styled, css, useTheme, theme } from './styled';
@@ -18,7 +18,20 @@ export default function Example({
     <>
       <Wrapper>
         <Switch value={mode === 'dark'} onValueChange={toggleMode} />
-
+        <SafeAreaView>
+          <StyledPressable
+            style={({ pressed }) => {
+              console.log({ pressed });
+              return [
+                {
+                  backgroundColor: pressed ? 'red' : 'blue',
+                },
+              ];
+            }}
+          >
+            <Text style={{ color: '#FFFFFF' }}>Styled function Pressable</Text>
+          </StyledPressable>
+        </SafeAreaView>
         <RowView>
           <Button variant="primary">
             <ButtonText color="white">Hello</ButtonText>
@@ -211,3 +224,5 @@ const ButtonText = styled('Text', {
     variant: 'body',
   },
 });
+
+const StyledPressable = styled('Pressable', {});
diff --git a/src/internals/index.js b/src/internals/index.js
index 77d9aeb..547a695 100644
--- a/src/internals/index.js
+++ b/src/internals/index.js
@@ -187,15 +187,22 @@ export function createStitches(config = {}) {
           })
         : {};
 
+      const stitchesStyles = [
+        styleSheet.base,
+        ...variantStyles,
+        ...compoundVariantStyles,
+        cssStyles,
+      ];
+
+      const allStyles =
+        typeof props.style === 'function'
+          ? (...rest) =>
+              [props.style(...rest), ...stitchesStyles].filter(Boolean)
+          : [...stitchesStyles, props.style].filter(Boolean);
+
       const componentProps = {
         ...props,
-        style: [
-          styleSheet.base,
-          ...variantStyles,
-          ...compoundVariantStyles,
-          cssStyles,
-          props.style,
-        ].filter(Boolean),
+        style: allStyles,
         ref,
       };