fix: ensure spreadProps use flat styles on preview

marklawlor · May 26, 2022 · 7c2cc8b · 7c2cc8b
1 parent 827a7a1
commit 7c2cc8b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/use-tailwind.web.ts b/src/use-tailwind.web.ts
@@ -4,23 +4,27 @@ import { usePlatform } from "./context/platform";
 import {
   RWNCssStyle,
   UseTailwindCallback,
+  UseTailwindCallbackOptions,
   UseTailwindOptions,
 } from "./use-tailwind";
 
 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
@@ -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) {