From 56b4a29941d82fb415977fdfbebd852060659982 Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Thu, 28 Apr 2022 17:16:34 +1000
Subject: [PATCH] feat: change useTailwind to a factory function

---
 README.md                       |   6 +-
 __tests__/use-tailwind.spec.tsx |  14 ++---
 src/styled.ts                   |   2 +-
 src/use-tailwind.ts             | 101 ++++++++++++++++----------------
 4 files changed, 63 insertions(+), 60 deletions(-)

diff --git a/README.md b/README.md
index ed5f57c..c0fc774 100644
--- a/README.md
+++ b/README.md
@@ -171,8 +171,10 @@ import { MotiView } from "moti";
 import { useTailwind } from "tailwindcss-react-native";
 
 export function MyComponent() {
-  const opacity0 = useTailwind('opacity-0')
-  const opacity1 = useTailwind('opacity-1')
+  const tw = useTailwind()
+
+  const opacity0 = tw('opacity-0')
+  const opacity1 = tw('opacity-1')
 
   return (
     <MotiView
diff --git a/__tests__/use-tailwind.spec.tsx b/__tests__/use-tailwind.spec.tsx
index 787e67c..2236bfc 100644
--- a/__tests__/use-tailwind.spec.tsx
+++ b/__tests__/use-tailwind.spec.tsx
@@ -37,7 +37,7 @@ const wrapper = ({
 
 describe("web", () => {
   test("can accept no arguments", () => {
-    const { result } = renderHook(() => useTailwind<RWNCssStyle>(), {
+    const { result } = renderHook(() => useTailwind<RWNCssStyle>()(), {
       wrapper,
       initialProps: { platform: "web" },
     });
@@ -48,7 +48,7 @@ describe("web", () => {
 
   test("will pass-through any arguments", () => {
     const { result } = renderHook(
-      () => useTailwind<RWNCssStyle>("hello-world"),
+      () => useTailwind<RWNCssStyle>()("hello-world"),
       {
         wrapper,
         initialProps: { platform: "web" },
@@ -62,7 +62,7 @@ describe("web", () => {
 
 describe("native", () => {
   test("can accept no arguments", () => {
-    const { result } = renderHook(() => useTailwind(), {
+    const { result } = renderHook(() => useTailwind()(), {
       wrapper,
       initialProps: { platform: "native" },
     });
@@ -71,7 +71,7 @@ describe("native", () => {
   });
 
   test("will return nothing is no styles match", () => {
-    const { result } = renderHook(() => useTailwind("hello-world"), {
+    const { result } = renderHook(() => useTailwind()("hello-world"), {
       wrapper,
       initialProps: { platform: "native" },
     });
@@ -80,7 +80,7 @@ describe("native", () => {
   });
 
   test("will return matched styles", () => {
-    const { result } = renderHook(() => useTailwind("font-bold"), {
+    const { result } = renderHook(() => useTailwind()("font-bold"), {
       wrapper,
       initialProps: {
         platform: "native",
@@ -103,7 +103,7 @@ describe("native", () => {
       width: 1000,
     });
 
-    const { result } = renderHook(() => useTailwind("container"), {
+    const { result } = renderHook(() => useTailwind()("container"), {
       wrapper,
       initialProps: {
         platform: "native",
@@ -147,7 +147,7 @@ describe("native", () => {
   });
 
   test("media - platform prefix", () => {
-    const { result } = renderHook(() => useTailwind("w-px"), {
+    const { result } = renderHook(() => useTailwind()("w-px"), {
       wrapper,
       initialProps: {
         platform: "ios",
diff --git a/src/styled.ts b/src/styled.ts
index 9c17ccf..0edd843 100644
--- a/src/styled.ts
+++ b/src/styled.ts
@@ -21,7 +21,7 @@ export function styled<P>(
     style: styleProperty,
     ...props
   }: StyledProps<P>) {
-    const tailwindStyleIds = useTailwind(tw ?? className);
+    const tailwindStyleIds = useTailwind()(tw ?? className);
 
     const style = styleProperty
       ? [tailwindStyleIds, styleProperty]
diff --git a/src/use-tailwind.ts b/src/use-tailwind.ts
index 8454683..1261ca1 100644
--- a/src/use-tailwind.ts
+++ b/src/use-tailwind.ts
@@ -23,26 +23,12 @@ export type RWNCssStyle = {
   tailwindClassName: string;
 };
 
-export function useTailwind<P extends ViewStyle>(className?: string): P;
-export function useTailwind<P extends TextStyle>(className?: string): P;
-export function useTailwind<P extends ImageStyle>(className?: string): P;
-export function useTailwind<P extends RWNCssStyle>(className?: string): P;
-export function useTailwind<P>(className = "") {
+export function useTailwind<P extends ViewStyle>(): (className?: string) => P;
+export function useTailwind<P extends TextStyle>(): (className?: string) => P;
+export function useTailwind<P extends ImageStyle>(): (className?: string) => P;
+export function useTailwind<P extends RWNCssStyle>(): (className?: string) => P;
+export function useTailwind<P>() {
   const platform = useContext(TailwindPlatformContext);
-
-  if (!platform) {
-    throw new Error(
-      "No platform details found. Make sure all components are within a TailwindProvider with the platform attribute set."
-    );
-  }
-
-  if (platform === "web") {
-    return {
-      $$css: true,
-      tailwindClassName: className,
-    } as unknown as StyleProp<P>;
-  }
-
   const styles = useContext(TailwindStyleContext);
   const mediaRules = useContext(TailwindMediaContext);
   const colorScheme = useContext(TailwindColorSchemeContext);
@@ -52,37 +38,52 @@ export function useTailwind<P>(className = "") {
     ? "portrait"
     : "landscape";
 
-  const tailwindStyleIds: StyleProp<P> = [];
-
-  for (const name of className.split(" ")) {
-    const selector = normaliseSelector(name);
-
-    if (styles[selector]) {
-      tailwindStyleIds.push(styles[selector] as P);
-    }
-
-    const rules = mediaRules[selector];
-
-    if (!rules) {
-      continue;
-    }
-
-    for (let index = 0, length = rules.length; index < length; index++) {
-      const isMatch = match(rules[index], {
-        type: platform,
-        width,
-        height,
-        "device-width": width,
-        "device-height": width,
-        orientation,
-        "prefers-color-scheme": colorScheme,
-      });
-
-      if (isMatch) {
-        tailwindStyleIds.push(styles[`${selector}_${index}`] as P);
-      }
-    }
+  if (!platform) {
+    throw new Error(
+      "No platform details found. Make sure all components are within a TailwindProvider with the platform attribute set."
+    );
   }
 
-  return tailwindStyleIds;
+  return (className = "") => {
+    if (platform === "web") {
+      return {
+        $$css: true,
+        tailwindClassName: className,
+      } as unknown as StyleProp<P>;
+    }
+
+    const tailwindStyleIds: StyleProp<P> = [];
+
+    for (const name of className.split(" ")) {
+      const selector = normaliseSelector(name);
+
+      if (styles[selector]) {
+        tailwindStyleIds.push(styles[selector] as P);
+      }
+
+      const rules = mediaRules[selector];
+
+      if (!rules) {
+        continue;
+      }
+
+      for (let index = 0, length = rules.length; index < length; index++) {
+        const isMatch = match(rules[index], {
+          type: platform,
+          width,
+          height,
+          "device-width": width,
+          "device-height": width,
+          orientation,
+          "prefers-color-scheme": colorScheme,
+        });
+
+        if (isMatch) {
+          tailwindStyleIds.push(styles[`${selector}_${index}`] as P);
+        }
+      }
+    }
+
+    return tailwindStyleIds;
+  };
 }