fix: prevent duplicate identifiers when accidentally importing RWN

__tests__/visitor/allow-modules-with-content/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
 import { TailwindProvider } from "tailwindcss-react-native";
@@ -19,7 +19,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },

__tests__/visitor/allow-modules/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text, View } from "react-native";
 import { TailwindProvider } from "tailwindcss-react-native";
@@ -17,7 +17,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     container: {
       width: "100%",
     },

__tests__/visitor/basic-tw/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text, View } from "react-native";
 import { TailwindProvider } from "tailwindcss-react-native";
@@ -15,7 +15,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     container: {
       width: "100%",
     },

__tests__/visitor/basic/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text, View } from "react-native";
 import { TailwindProvider } from "tailwindcss-react-native";
@@ -15,7 +15,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     container: {
       width: "100%",
     },

__tests__/visitor/block-modules/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
 import { MotiText } from "moti";
@@ -14,7 +14,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },

__tests__/visitor/className-expression/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
 import { TailwindProvider } from "tailwindcss-react-native";
@@ -16,7 +16,7 @@ export function Test({ isBold, isUnderline }) {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },

__tests__/visitor/compile-only/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { Text, View } from "react-native";
 import { TailwindProvider } from "tailwindcss-react-native";
 export function Test() {
@@ -12,7 +12,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     container: {
       width: "100%",
     },

__tests__/visitor/content-directory-no-index/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
 import { TestComponent } from "./test-directory";
@@ -14,7 +14,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },

__tests__/visitor/content-directory/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
 import { TestComponent } from "./test-directory";
@@ -14,7 +14,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },

__tests__/visitor/content-ignore-unmatched-relative-import/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
 import { ShouldNotBeTransformed } from "./should-not-be-transformed";
@@ -14,7 +14,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },

__tests__/visitor/content-positive-match/output.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
 import { TestComponent } from "./test";
@@ -14,7 +14,7 @@ export function Test() {
 }
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },

__tests__/visitor/empty-className/output.tsx

@@ -1,4 +1,3 @@
-import { StyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
 import { TailwindProvider } from "tailwindcss-react-native";
@@ -11,11 +10,3 @@ export function Test() {
     </TailwindProvider>
   );
 }
-globalThis.tailwindcss_react_native_style = Object.assign(
-  globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({})
-);
-globalThis.tailwindcss_react_native_media = Object.assign(
-  globalThis.tailwindcss_react_native_media || {},
-  {}
-);

__tests__/visitor/existing-style/output.tsx

@@ -1,3 +1,4 @@
+import { StyleSheet as RNStyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { StyleSheet, Text } from "react-native";
 import { TailwindProvider } from "tailwindcss-react-native";
@@ -21,7 +22,7 @@ const styles = StyleSheet.create({
 });
 globalThis.tailwindcss_react_native_style = Object.assign(
   globalThis.tailwindcss_react_native_style || {},
-  StyleSheet.create({
+  RNStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },

src/babel/root-visitor.ts

@@ -116,10 +116,17 @@ export default function rootVisitor(
               );
             }
 
+            // If there are no styles, early exit
+            if (Object.keys(styles).length === 0) return;
+
             appendVariables(bodyNode, styles);
 
             if (!hasStyleSheetImport) {
-              prependImport(bodyNode, "StyleSheet", "react-native");
+              prependImport(
+                bodyNode,
+                ["RNStyleSheet", "StyleSheet"],
+                "react-native"
+              );
             }
           } else {
             if (!hasProvider) {
@@ -131,11 +138,18 @@ export default function rootVisitor(
              */
             const { styles } = extractStyles(tailwindConfig);
 
+            // If there are no styles, early exit
+            if (Object.keys(styles).length === 0) return;
+
             const bodyNode = path.node.body;
             appendVariables(bodyNode, styles);
 
             if (!hasStyleSheetImport) {
-              prependImport(bodyNode, "StyleSheet", "react-native");
+              prependImport(
+                bodyNode,
+                ["RNStyleSheet", "StyleSheet"],
+                "react-native"
+              );
             }
           }
         },

src/babel/transforms/append-import.ts

@@ -8,12 +8,14 @@ import {
 
 export function prependImport(
   body: Statement[],
-  variable: string,
+  variable: string | string[],
   source: string
 ) {
   body.unshift(
     importDeclaration(
-      [importSpecifier(identifier(variable), identifier(variable))],
+      typeof variable === "string"
+        ? [importSpecifier(identifier(variable), identifier(variable))]
+        : [importSpecifier(identifier(variable[0]), identifier(variable[1]))],
       stringLiteral(source)
     )
   );

src/babel/transforms/append-variables.ts

@@ -43,7 +43,10 @@ export function appendVariables(body: Statement[], styleRecord: StyleRecord) {
               identifier("{}")
             ),
             callExpression(
-              memberExpression(identifier("StyleSheet"), identifier("create")),
+              memberExpression(
+                identifier("RNStyleSheet"),
+                identifier("create")
+              ),
               [serialize(styles)]
             ),
           ]
@@ -86,7 +89,7 @@ function serialize(literal: unknown): Expression {
     case "string":
       if (literal === "hairlineWidth") {
         return memberExpression(
-          identifier("StyleSheet"),
+          identifier("RNStyleSheet"),
           identifier("hairlineWidth")
         );
       }

src/babel/utils/has-named-import.ts

@@ -21,7 +21,7 @@ export function hasNamedImport(
 
       return isStringLiteral(specifier.imported)
         ? specifier.imported.value === variable
-        : specifier.imported.name === variable;
+        : specifier.local.name === variable;
     });
   }
 

src/babel/visitor.ts

@@ -42,7 +42,7 @@ export const visitor: Visitor<VisitorState> = {
 
     state.hasStyleSheetImport ||= hasNamedImport(
       path,
-      "StyleSheet",
+      "RNStyleSheet",
       "react-native"
     );