fix: function style not working (#17)

Temzasse · Sep 28, 2021 · 8ff922d · 8ff922d
1 parent 2f65863
commit 8ff922d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git 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
@@ -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,
       };