feat: replace tailwind-rn with twrnc, enable parentheses in styles

packages/react-native-tailwind.macro/jest-twrnc-resolver.js

@@ -0,0 +1,11 @@
+/**
+ * Currently, jest doesn't support the `exports` fields in package.json that twrnc relies on.
+ * If the required module is twrnc/create, resolve the actual cjs path.
+ *
+ * Note: This is not ideal, but works for now until `exports` is supported in Jest 28.
+ */
+module.exports = (request, options) => {
+  if (request === "twrnc/create")
+    return options.defaultResolver("twrnc/dist/cjs/create.js", options)
+  else return options.defaultResolver(request, options)
+}

packages/react-native-tailwind.macro/package.json

@@ -49,7 +49,7 @@
     "babel-plugin-macros": "^3.1.0",
     "nanoid": "^3.1.25",
     "react-native-media-query": "^1.0.9",
-    "tailwind-rn": "^3.0.1"
+    "twrnc": "2.1.0-beta.5"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
@@ -91,7 +91,8 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/dist/",
       "<rootDir>/src/__tests__/__fixtures__"
-    ]
+    ],
+    "resolver": "./jest-twrnc-resolver.js"
   },
   "husky": {
     "hooks": {

packages/react-native-tailwind.macro/src/__tests__/__snapshots__/macro.test.ts.snap

@@ -48,13 +48,11 @@ const Prepend = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -96,13 +94,11 @@ const Append = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -155,52 +151,36 @@ const Comp = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
-        backgroundColor: "rgba(59, 130, 246, 1)",
+        backgroundColor: "#3b82f6",
       },
-      dark: false,
     },
   ],
 })
 
 const _useStyles2 = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-2": [
     {
-      platforms: null,
-      media: {
-        sm: false,
-        md: true,
-        lg: false,
-        xl: false,
-        xxl: false,
-      },
+      dark: false,
+      breakpoint: "md",
       style: {
         "@media(min-width: 768px)": {
           paddingLeft: 32,
           paddingRight: 32,
         },
       },
-      dark: false,
     },
   ],
   "mockId-3": [
     {
-      platforms: null,
-      media: {
-        sm: false,
-        md: false,
-        lg: true,
-        xl: false,
-        xxl: false,
-      },
+      dark: false,
+      breakpoint: "lg",
       style: {
         "@media(min-width: 1024px)": {
           paddingTop: 64,
         },
       },
-      dark: false,
     },
   ],
 })
@@ -243,12 +223,10 @@ const Comp = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingTop: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -302,27 +280,23 @@ const Comp2 = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
 
 const _useStyles2 = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-2": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -384,24 +358,20 @@ const Comp = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
   "mockId-2": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 64,
         paddingRight: 64,
       },
-      dark: false,
     },
   ],
 })
@@ -441,13 +411,11 @@ const Comp = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -485,13 +453,11 @@ const useMyCustomHook = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -538,54 +504,36 @@ const Comp = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
-        backgroundColor: "rgba(59, 130, 246, 1)",
+        backgroundColor: "#3b82f6",
       },
-      dark: false,
     },
     {
-      platforms: null,
-      media: {
-        sm: false,
-        md: true,
-        lg: false,
-        xl: false,
-        xxl: false,
-      },
+      dark: false,
+      breakpoint: "md",
       style: {
         "@media(min-width: 768px)": {
-          backgroundColor: "rgba(236, 72, 153, 1)",
+          backgroundColor: "#ec4899",
         },
       },
-      dark: false,
     },
   ],
   "mockId-2": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
-        fontWeight: "700",
+        fontWeight: "bold",
       },
-      dark: false,
     },
     {
-      platforms: null,
-      media: {
-        sm: false,
-        md: true,
-        lg: false,
-        xl: false,
-        xxl: false,
-      },
+      dark: false,
+      breakpoint: "md",
       style: {
         "@media(min-width: 768px)": {
           fontWeight: "100",
         },
       },
-      dark: false,
     },
   ],
 })
@@ -624,13 +572,11 @@ const Prepend = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -669,13 +615,11 @@ const Append = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -723,13 +667,11 @@ const Prepend = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -763,13 +705,11 @@ const Append = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -812,13 +752,11 @@ const useMyCustomHook = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })
@@ -852,13 +790,11 @@ const Comp = () => {
 const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
-      platforms: null,
-      media: null,
+      dark: false,
       style: {
         paddingLeft: 32,
         paddingRight: 32,
       },
-      dark: false,
     },
   ],
 })