fix: warnings when hmr on native. Move baseClassName to styled() props

__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", () => {

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;

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,

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);

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;

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 = [];