Merge branch 'main' into next

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.7.1](https://github.com/marklawlor/tailwindcss-react-native/compare/v1.7.0...v1.7.1) (2022-05-31)
+
+
+### Bug Fixes
+
+* prevent duplicate identifiers when accidentally importing RWN ([ef1e83e](https://github.com/marklawlor/tailwindcss-react-native/commit/ef1e83ed9c01f6cf7864ef05aa0714ff404f1474))
+
+# [1.7.0](https://github.com/marklawlor/tailwindcss-react-native/compare/v1.6.3...v1.7.0) (2022-05-31)
+
+
+### Features
+
+* allow styled to accep baseClassName as second parameter ([469c6af](https://github.com/marklawlor/tailwindcss-react-native/commit/469c6af4b813bbc8e0a830fc58ce017a57390ae6))
+
 ## [1.6.3](https://github.com/marklawlor/tailwindcss-react-native/compare/v1.6.2...v1.6.3) (2022-05-31)
 
 ### Bug Fixes

README.md

@@ -186,7 +186,7 @@ Add the paths to all of your component files in your tailwind.config.js file.
 // tailwind.config.js
 module.exports = {
 - content: [],
-+ content: ["./**/*.{js,jsx,ts,tsx}"],
++ content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },

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

website/docs/quick-start.md

@@ -38,7 +38,7 @@ Add the paths to all of your component files in your tailwind.config.js file.
 // tailwind.config.js
 module.exports = {
 - content: [],
-+ content: ["./**/*.{js,jsx,ts,tsx}"],
++ content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },

website/docs/troubleshooting.md

@@ -47,3 +47,33 @@ The TailwindCSS compiler [does not allow for dynamic class names](https://tailwi
 ## className is not passed to child components
 
 The `className` prop is not passed to child components, it is transformed into a style object and passed via the `style` prop.
+
+## Identifier '\*\*\*' has already been declared inside a node_module
+
+Example error:
+
+```
+/node_modules/react-native-web/dist/vendor/react-native/FlatList/index.js 105:7
+Module parse failed: Identifier 'StyleSheet' has already been declared (105:7)
+File was processed with these loaders:
+
+./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
+You may need an additional loader to handle the result of these loaders.
+| import deepDiffer from "../deepDiffer";
+| import * as React from 'react';
+```
+
+This can occur when your `tailwind.config.js` processes an unexpected file in your `node_modules`. You need to avoid [broad content patterns](https://tailwindcss.com/docs/content-configuration#pattern-recommendations), as it will process things like your `node_modules`
+
+```diff
+// tailwind.config.js
+module.exports = {
+  content: [
+-   './**/*.{html,js,jsx}',
++   './src/**/*.{html,js,jsx}',
+  ],
+  // ...
+}
+```
+
+After changing your `tailwind.config.js` you will need to reset your cache either by `expo start -c` or `react-native start --reset-cache`.