feat: change useTailwind to a factory function

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

__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",

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]

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;
+  };
 }