feat: base createUseTailwindStyles implementation

example/example/src/App.tsx

@@ -1,28 +1,17 @@
 import * as React from "react"
 
-import { StyleSheet, View, Text } from "react-native"
-import "react-native-tailwind.macro"
-
-// console.log(tw)
+import { View, Text } from "react-native"
+import { useTailwindStyles } from "react-native-tailwind.macro"
 
 export default function App() {
+  const { box } = useTailwindStyles((tw) => {
+    return { box: tw`flex-1 bg-pink-500 ios:my-20 text-bold` }
+  })
+
   return (
-    // @ts-ignore
-    <View tw="bg-blue-500" style={styles.container}>
-      <Text>Result: 12</Text>
+    <View style={box}>
+      {/* <View tw="bg-pink-400 ios:mb-20" style={styles.container}> */}
+      <Text tw="font-bold">Result: 12</Text>
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
-})

example/next-example/App.tsx

@@ -6,10 +6,10 @@ export default function App() {
   return (
     <View
       // @ts-ignore
-      tw="bg-blue-500"
+      tw="bg-blue-500 md:bg-pink-500"
       style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
     >
-      <Text>Welcome to React Native</Text>
+      <Text tw="font-bold md:font-thin">Welcome to React Native</Text>
     </View>
   )
 }

example/next-example/pages/_document.js

@@ -2,8 +2,8 @@
 // and https://github.com/expo/expo-cli/blob/master/packages/webpack-config/web-default/index.html
 import NextDocument, { Head, Main, NextScript } from "next/document"
 import * as React from "react"
-
 import { AppRegistry } from "react-native"
+import { flush } from "react-native-tailwind.macro"
 
 export const style = `
 /**
@@ -55,6 +55,7 @@ export async function getInitialProps({ renderPage }) {
       dangerouslySetInnerHTML={{ __html: style }}
     />,
     getStyleElement(),
+    flush(),
   ]
   return { ...page, styles: React.Children.toArray(styles) }
 }

src/create-use-tailwind-styles.ts

@@ -1,15 +1,26 @@
-/**
- * Placeholder
- */
-export const createUseTailwindStyles = (styles: Record<string, string>) => {
-  return () =>
+import MediaQueryStyleSheet from "react-native-media-query"
+import { StyleObjectProps } from "./types"
+import { checkPlatform } from "./check-platform"
+
+export const createUseTailwindStyles = (
+  styles: Record<string, StyleObjectProps[]>
+) => {
+  const { styles: styleSheet, ids } = MediaQueryStyleSheet.create(
     Object.fromEntries(
-      Object.entries(styles).map(([key, _value]) => {
-        const style = { backgroundColor: "pink" }
+      Object.entries(styles).map(([key, arr]) => [
+        key,
+        Object.assign({}, ...checkPlatform(arr).map(({ style }) => style)),
+      ])
+    )
+  )
 
-        Object.defineProperty(style, "id", { value: key, enumerable: false })
+  for (const key in styleSheet) {
+    // add id as non-enumerable property to the styles
+    Object.defineProperty(styleSheet[key], "id", {
+      value: ids[key],
+      enumerable: false,
+    })
+  }
 
-        return [key, style]
-      })
-    )
+  return () => styleSheet
 }

src/exports.ts

@@ -1,2 +1,4 @@
 export * from "./create-use-tailwind-styles"
 export * from "./use-tailwind-styles"
+
+export { flush } from "react-native-media-query"

src/use-tailwind-styles.ts

@@ -1,6 +1,6 @@
 /**
  * Placeholder function
  */
-export const useTailwindStyles = () => {
-  return {}
+export const useTailwindStyles = (_: any, _deps: any) => {
+  return _()
 }

tsconfig.json

@@ -23,5 +23,6 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext"
-  }
+  },
+  "exclude": ["example"]
 }