feat: improve typings

example/src/App.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { UnistylesTheme } from 'react-native-unistyles'
-import { ExampleScreen } from './ExampleScreen'
+import * as Examples from './examples'
 import { theme } from './styles'
 
 export const App: React.FunctionComponent = () => (
     <UnistylesTheme theme={theme}>
-        <ExampleScreen />
+        <Examples.Extreme />
     </UnistylesTheme>
 )

example/src/examples/Breakpoints.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { createStyles, useStyles } from '../styles'
+
+// Use breakpoints for some values
+export const Breakpoints: React.FunctionComponent = () => {
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <View style={styles.dynamicContainer}>
+            <Text>
+                Breakpoint demo, resize me :)
+            </Text>
+            <Text>
+                Row or column?
+            </Text>
+        </View>
+    )
+}
+
+const stylesheet = createStyles(theme => ({
+    dynamicContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: {
+            // hints for breakpoints are available here
+            xs: 'row',
+            md: 'column'
+        },
+        backgroundColor: theme.colors.sky
+    }
+}))

example/src/examples/Extreme.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { createStyles, useStyles } from '../styles'
+
+// Edge cases
+export const Extreme: React.FunctionComponent = () => {
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <View style={styles.dynamicContainer(1)}>
+            <Text style={styles.text}>
+                Edge cases
+            </Text>
+        </View>
+    )
+}
+
+const stylesheet = createStyles(theme => ({
+    // dynamic function with hints
+    dynamicContainer: (flex: number) => ({
+        flex,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: {
+            xs: theme.colors.oak,
+            md: theme.colors.sky
+        },
+        shadowOpacity: 20
+    }),
+    text: {
+        height: 100,
+        shadowOpacity: {
+            xs: 20
+        },
+        transform: [
+            {
+                scale: 2
+            },
+            {
+                translateX: {
+                    sm: 10
+                }
+            }
+        ]
+    }
+}))

example/src/examples/MediaQueries.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { createStyles, useStyles } from '../styles'
+
+// Media queries
+export const MediaQueries: React.FunctionComponent = () => {
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <View style={styles.dynamicContainer}>
+            <Text>
+                Media queries, resize me :)
+            </Text>
+            <Text>
+                Row of column
+            </Text>
+        </View>
+    )
+}
+
+const stylesheet = createStyles(theme => ({
+    dynamicContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: {
+            xs: 'row',
+            // mixed queries
+            ':w[400]': 'column'
+        },
+        backgroundColor: {
+            ':w[, 300]:h[100]': theme.colors.oak,
+            ':w[301]': theme.colors.barbie
+        }
+    }
+}))

example/src/examples/Minimal.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Text, View, StyleSheet } from 'react-native'
+import { useStyles } from '../styles'
+
+// Compatibility between StyleSheet.create and useStyles
+// access theme from useStyles
+export const Minimal: React.FunctionComponent = () => {
+    const { styles, theme } = useStyles(stylesheet)
+
+    return (
+        <View style={styles.container}>
+            <Text>
+                I'm just a minimal example with {theme.colors.barbie} color
+            </Text>
+        </View>
+    )
+}
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+})

example/src/examples/MinimalWithCreateStyles.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { createStyles, useStyles } from '../styles'
+
+// createStyles with StyleSheet.create compatible Object
+export const MinimalWithCreateStyles: React.FunctionComponent = () => {
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.text}>
+                I'm just a minimal example with createStyles
+            </Text>
+        </View>
+    )
+}
+
+const stylesheet = createStyles({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignContent: 'space-between',
+        resizeMode: 'contain'
+    },
+    text: {
+        borderWidth: 1,
+        borderColor: 'purple',
+        padding: 20
+    }
+})

example/src/ExampleScreen.tsx → example/src/examples/Theme.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import { Text, View } from 'react-native'
-import { createStyles, useStyles } from './styles'
+import { createStyles, useStyles } from '../styles'
 
-export const ExampleScreen: React.FunctionComponent = () => {
+// Injected theme to createStyles
+export const Theme: React.FunctionComponent = () => {
     const { styles } = useStyles(stylesheet)
 
     return (
         <View style={styles.container}>
             <Text>
-                Resize me :)
+                Theme example
             </Text>
         </View>
     )
@@ -19,10 +20,6 @@ const stylesheet = createStyles(theme => ({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: {
-            sm: theme.colors.oak,
-            md: theme.colors.aloes,
-            ':w[800]': theme.colors.fog
-        }
+        backgroundColor: theme.colors.oak
     }
 }))

example/src/examples/index.ts

@@ -0,0 +1,6 @@
+export { Minimal } from './Minimal'
+export { MinimalWithCreateStyles } from './MinimalWithCreateStyles'
+export { Theme } from './Theme'
+export { Breakpoints } from './Breakpoints'
+export { MediaQueries } from './MediaQueries'
+export { Extreme } from './Extreme'

src/createUnistyles.ts

@@ -5,10 +5,10 @@ import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValid
 import { useDimensions } from './hooks'
 
 export const createUnistyles = <B extends Record<string, number>, T = {}>(breakpoints: B) => {
-    const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints) as B
+    const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
 
     return {
-        createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => styles as S,
+        createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T> | CustomNamedStyles<S, B>) => styles as S,
         useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
             const theme = useContext(UnistylesContext) as T
             const dimensions = useDimensions()

src/types.ts

@@ -1,33 +1,83 @@
-import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native'
-import type { CSSProperties } from 'react'
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type {
+    MatrixTransform,
+    PerpectiveTransform,
+    RotateTransform,
+    RotateXTransform,
+    RotateYTransform,
+    RotateZTransform,
+    ScaleTransform,
+    ScaleXTransform,
+    ScaleYTransform,
+    SkewXTransform,
+    SkewYTransform,
+    TranslateXTransform,
+    TranslateYTransform
+} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 
 export type ScreenSize = {
     width: number,
     height: number
 }
 
-export type CreateStylesFactory<T, Theme> = (theme: Theme) => T
+export type CreateStylesFactory<T, Theme> = ((theme: Theme) => T) | T
 
 type StyleProperty<T, B extends Record<string, number>> = {
-    [key in keyof T]?: {
-        [innerKey in keyof B]?: T[key]
+    [K in keyof T]: {
+        [innerKey in keyof B]?: T[K]
     } | {
-        [innerKey in `:w${string}` | `:h${string}`]?: T[key]
-    } | T[key]
+        [innerKey in string]?: T[K]
+    } | T[K]
 }
 
+type ShadowOffsetProps<B extends Record<string, number>> = {
+    shadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number
+        },
+        height: number | {
+            [innerKey in keyof B]?: number
+        }
+    }
+}
+
+type TransformStyles<B extends Record<string, number>> =
+    PerpectiveTransform | StyleProperty<PerpectiveTransform, B>
+    | RotateTransform | StyleProperty<RotateTransform, B>
+    | RotateXTransform | StyleProperty<RotateXTransform, B>
+    | RotateYTransform | StyleProperty<RotateYTransform, B>
+    | RotateZTransform | StyleProperty<RotateZTransform, B>
+    | ScaleTransform | StyleProperty<ScaleTransform, B>
+    | ScaleXTransform | StyleProperty<ScaleXTransform, B>
+    | ScaleYTransform | StyleProperty<ScaleYTransform, B>
+    | TranslateXTransform | StyleProperty<TranslateXTransform, B>
+    | TranslateYTransform | StyleProperty<TranslateYTransform, B>
+    | SkewXTransform | StyleProperty<SkewXTransform, B>
+    | SkewYTransform | StyleProperty<SkewYTransform, B>
+    | MatrixTransform | StyleProperty<MatrixTransform, B>
+
+type TransformProps<B extends Record<string, number>> = {
+    transform: Array<TransformStyles<B>>
+}
+
+type UnistyleView = Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>
+type UnistyleText = Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>
+type UnistyleImage = Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>
+
 export type CustomNamedStyles<T, B extends Record<string, number>> = {
     [P in keyof T]:
-    | ViewStyle
-    | TextStyle
-    | ImageStyle
-    | TransformsStyle
-    | CSSProperties
-    | StyleProperty<ViewStyle, B>
-    | StyleProperty<ImageStyle, B>
-    | StyleProperty<TextStyle, B>
+    | (UnistyleView| StyleProperty<UnistyleView, B>)
+    | (UnistyleText | StyleProperty<UnistyleText, B>)
+    | (UnistyleImage | StyleProperty<UnistyleImage, B>)
+    | ShadowOffsetProps<B>
+    | TransformProps<B>
     | (
-        (...args: Array<never>) => ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B>
+        (...args: Array<never>) =>
+        | (UnistyleView| StyleProperty<UnistyleView, B>)
+        | (UnistyleText | StyleProperty<UnistyleText, B>)
+        | (UnistyleImage | StyleProperty<UnistyleImage, B>)
+        | ShadowOffsetProps<B>
+        | TransformProps<B>
     )
 }