From 7c2cc8b3fced2abe45f16482ee413af2103924db Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Thu, 26 May 2022 16:57:56 +1000
Subject: [PATCH] fix: ensure spreadProps use flat styles on preview

---
 src/use-tailwind.web.ts  | 12 ++++++++----
 src/with-styled-props.ts |  9 ++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/use-tailwind.web.ts b/src/use-tailwind.web.ts
index 228e2a9..4fb4a6b 100644
--- a/src/use-tailwind.web.ts
+++ b/src/use-tailwind.web.ts
@@ -4,6 +4,7 @@ import { usePlatform } from "./context/platform";
 import {
   RWNCssStyle,
   UseTailwindCallback,
+  UseTailwindCallbackOptions,
   UseTailwindOptions,
 } from "./use-tailwind";
 
@@ -11,16 +12,19 @@ import { useTailwind as useNativeTailwind } from "./use-tailwind.native";
 
 export function useTailwind<
   P extends ViewStyle | TextStyle | ImageStyle | RWNCssStyle
->(options?: UseTailwindOptions): UseTailwindCallback<P> {
+>(useTailwindOptions?: UseTailwindOptions): UseTailwindCallback<P> {
   const { platform, preview } = usePlatform();
 
   if (platform === "web" && preview) {
-    return ((className = "") => {
-      return options?.flatten
+    return (<F extends boolean | undefined = true>(
+      className = "",
+      { flatten = true }: UseTailwindCallbackOptions<F> = {}
+    ) => {
+      return flatten
         ? classNameToInlineStyle(className)
         : { $$css: true, tailwindClassName: className };
     }) as UseTailwindCallback<P>;
   }
 
-  return useNativeTailwind<P>(options);
+  return useNativeTailwind<P>(useTailwindOptions);
 }
diff --git a/src/with-styled-props.ts b/src/with-styled-props.ts
index 51e66a3..e5d241a 100644
--- a/src/with-styled-props.ts
+++ b/src/with-styled-props.ts
@@ -40,9 +40,12 @@ export function withStyledProps<S, T extends string>({
     if (typeof value === "string") {
       if (preview) {
         styledProps[prop] = undefined;
-        (mainStyles as unknown as Record<string, unknown>)[prop] = tw(value, {
-          flatten: false,
-        });
+        (mainStyles as unknown as Record<string, unknown>)[prop] = (
+          tw(value, {
+            flatten: false,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          }) as any
+        ).tailwindClassName;
       } else {
         const entries = Object.entries(tw(value, { flatten: true }));
         if (entries.length > 0) {