From 5d29a74dd4e8cdb3be07a4ab5058c568c5f10864 Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Tue, 31 May 2022 11:09:11 +1000
Subject: [PATCH] fix: warnings when hmr on native. Move baseClassName to
 styled() props

---
 __tests__/styled/props.tsx   | 10 +++++-----
 src/babel/root-visitor.ts    |  3 +++
 src/styled.tsx               |  5 +++--
 src/tailwind/native/index.ts |  2 ++
 src/utils/styled.ts          |  9 +++++----
 src/with-class-names.ts      |  9 +++++++--
 6 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/__tests__/styled/props.tsx b/__tests__/styled/props.tsx
index a4888a1..d434463 100644
--- a/__tests__/styled/props.tsx
+++ b/__tests__/styled/props.tsx
@@ -56,9 +56,10 @@ describe("Styled - Values Props", () => {
 });
 
 describe("Styled - Base Class Name", () => {
-  const StyledView = styled(View, {
+  const StyledView = styled(View);
+  StyledView.defaultProps = {
     baseClassName: "flex-row",
-  });
+  };
 
   test("can set base classNames", () => {
     const tree = render(
@@ -82,11 +83,10 @@ describe("Styled - Base Class Name", () => {
 });
 
 describe("Styled - Default props", () => {
-  const StyledText = styled(Text, {
-    baseClassName: "p-4",
-  });
+  const StyledText = styled(Text);
   StyledText.defaultProps = {
     accessibilityRole: "header",
+    baseClassName: "p-4",
   };
 
   test("can render with default props", () => {
diff --git a/src/babel/root-visitor.ts b/src/babel/root-visitor.ts
index ca5ac43..c18897d 100644
--- a/src/babel/root-visitor.ts
+++ b/src/babel/root-visitor.ts
@@ -101,6 +101,9 @@ export default function rootVisitor(
             const { styles } = extractStyles({
               ...tailwindConfig,
               content: [filename],
+              // If the file doesn't have any Tailwind styles, it will print a warning
+              // We force an empty style to prevent this
+              safelist: [".native-hmr-empty"],
             });
 
             const bodyNode = path.node.body;
diff --git a/src/styled.tsx b/src/styled.tsx
index 0e90186..a67e25e 100644
--- a/src/styled.tsx
+++ b/src/styled.tsx
@@ -25,7 +25,6 @@ export interface StyledOptions<P> {
   spreadProps?: Array<keyof P & string>;
   classProps?: Array<keyof P & string>;
   supportsClassName?: boolean;
-  baseClassName?: string;
 }
 
 type ForwardRef<T, P> = ForwardRefExoticComponent<
@@ -68,13 +67,14 @@ export function styled<
     spreadProps,
     classProps,
     supportsClassName = false,
-    baseClassName,
   }: StyledOptions<T> = {}
 ) {
   function Styled(
     {
       className,
       tw: twClassName,
+      baseClassName,
+      baseTw,
       style: styleProp,
       children: componentChildren,
       ...componentProps
@@ -87,6 +87,7 @@ export function styled<
       baseClassName,
       className,
       twClassName,
+      baseTw,
       componentProps,
       propsToTransform,
       spreadProps,
diff --git a/src/tailwind/native/index.ts b/src/tailwind/native/index.ts
index 9313626..1f78727 100644
--- a/src/tailwind/native/index.ts
+++ b/src/tailwind/native/index.ts
@@ -39,6 +39,8 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
     }
 
     return (helpers) => {
+      helpers.addUtilities({ ".native-empty": {} });
+
       color(helpers, notSupported);
       space(helpers, notSupported);
       divide(helpers, notSupported);
diff --git a/src/utils/styled.ts b/src/utils/styled.ts
index 14e394b..3800f59 100644
--- a/src/utils/styled.ts
+++ b/src/utils/styled.ts
@@ -1,12 +1,13 @@
 export type StyledProps<P> = P & {
   className?: string;
   tw?: string;
+  baseClassName?: string;
+  baseTw?: string;
 };
 
-export type StyledPropsWithKeys<P, K extends keyof P> = P & {
-  className?: string;
-  tw?: string;
-} & { [key in K]: P[key] | string };
+export type StyledPropsWithKeys<P, K extends keyof P> = StyledProps<P> & {
+  [key in K]: P[key] | string;
+};
 
 export type RWNCssStyle = {
   $$css: true;
diff --git a/src/with-class-names.ts b/src/with-class-names.ts
index 712f0f7..e9b12ea 100644
--- a/src/with-class-names.ts
+++ b/src/with-class-names.ts
@@ -1,6 +1,7 @@
 export interface WithClassNames {
   baseClassName?: string;
   className?: string;
+  baseTw?: string;
   twClassName?: string;
   propsToTransform?: string[];
   componentProps: Record<string, unknown>;
@@ -8,15 +9,19 @@ export interface WithClassNames {
   classProps?: string[];
 }
 export function withClassNames({
-  baseClassName = "",
+  baseClassName,
   className,
+  baseTw,
   twClassName,
   componentProps,
   propsToTransform = [],
   spreadProps = [],
   classProps = [],
 }: WithClassNames) {
-  const classes = [baseClassName, twClassName ?? className ?? ""].join(" ");
+  const classes = [
+    baseTw ?? baseClassName ?? "",
+    twClassName ?? className ?? "",
+  ].join(" ");
   const isComponent = classes.split(/\s+/).includes("component");
 
   const allClasses = [];