feat(macro): add base macro implementation, fix eslint issues

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ["module:metro-react-native-babel-preset"],
 }

example/example/babel.config.js

@@ -1,19 +1,19 @@
-const path = require('path')
-const pak = require('../package.json')
+const path = require("path")
+const pak = require("../package.json")
 
 module.exports = function (api) {
   api.cache(true)
 
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
     plugins: [
       [
-        'module-resolver',
+        "module-resolver",
         {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
+          extensions: [".tsx", ".ts", ".js", ".json"],
           alias: {
             // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
+            [pak.name]: path.join(__dirname, "..", pak.source),
           },
         },
       ],

example/example/index.js

@@ -1,6 +1,6 @@
-import { registerRootComponent } from 'expo'
+import { registerRootComponent } from "expo"
 
-import App from './src/App'
+import App from "./src/App"
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in the Expo client or in a native build,

example/example/metro.config.js

@@ -1,9 +1,9 @@
-const path = require('path')
-const blacklist = require('metro-config/src/defaults/blacklist')
-const escape = require('escape-string-regexp')
-const pak = require('../package.json')
+const path = require("path")
+const blacklist = require("metro-config/src/defaults/blacklist")
+const escape = require("escape-string-regexp")
+const pak = require("../package.json")
 
-const root = path.resolve(__dirname, '..')
+const root = path.resolve(__dirname, "..")
 
 const modules = Object.keys({
   ...pak.peerDependencies,
@@ -19,12 +19,12 @@ module.exports = {
     blacklistRE: blacklist(
       modules.map(
         (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+          new RegExp(`^${escape(path.join(root, "node_modules", m))}\\/.*$`)
       )
     ),
 
     extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name)
+      acc[name] = path.join(__dirname, "node_modules", name)
       return acc
     }, {}),
   },

example/example/src/App.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { StyleSheet, View, Text } from 'react-native'
-import TailwindMacro from 'react-native-tailwind.macro'
+import { StyleSheet, View, Text } from "react-native"
+import TailwindMacro from "react-native-tailwind.macro"
 
 export default function App() {
   const [result, setResult] = React.useState<number | undefined>()
@@ -20,8 +20,8 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   },
   box: {
     width: 60,

example/example/webpack.config.js

@@ -1,24 +1,24 @@
-const path = require('path')
-const createExpoWebpackConfigAsync = require('@expo/webpack-config')
-const { resolver } = require('./metro.config')
+const path = require("path")
+const createExpoWebpackConfigAsync = require("@expo/webpack-config")
+const { resolver } = require("./metro.config")
 
-const root = path.resolve(__dirname, '..')
-const node_modules = path.join(__dirname, 'node_modules')
+const root = path.resolve(__dirname, "..")
+const node_modules = path.join(__dirname, "node_modules")
 
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv)
 
   config.module.rules.push({
     test: /\.(js|jsx|ts|tsx)$/,
-    include: path.resolve(root, 'src'),
-    use: 'babel-loader',
+    include: path.resolve(root, "src"),
+    use: "babel-loader",
   })
 
   // We need to make sure that only one version is loaded for peerDependencies
   // So we alias them to the versions in example's node_modules
   Object.assign(config.resolve.alias, {
     ...resolver.extraNodeModules,
-    'react-native-web': path.join(node_modules, 'react-native-web'),
+    "react-native-web": path.join(node_modules, "react-native-web"),
   })
 
   return config

example/next-example/App.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import { View, Text } from 'react-native'
+import React from "react"
+import { View, Text } from "react-native"
 
 export default function App() {
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
       <Text>Welcome to React Native</Text>
     </View>
   )

example/next-example/babel.config.js

@@ -1,4 +1,4 @@
 // @generated: @expo/next-adapter@2.1.32
 // Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#shared-steps
 
-module.exports = { presets: ['@expo/next-adapter/babel'] }
+module.exports = { presets: ["@expo/next-adapter/babel"] }

example/next-example/next.config.js

@@ -1,10 +1,9 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 // @generated: @expo/next-adapter@2.1.0
 // Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#withexpo
-const { withExpo } = require('@expo/next-adapter')
-const withPlugins = require('next-compose-plugins')
+const { withExpo } = require("@expo/next-adapter")
+const withPlugins = require("next-compose-plugins")
 
-const withTM = require('next-transpile-modules')([])
+const withTM = require("next-transpile-modules")([])
 
 module.exports = withPlugins([
   withTM({

example/next-example/package.json

@@ -25,7 +25,7 @@
   },
   "prettier": {
     "quoteProps": "consistent",
-    "singleQuote": true,
+    "singleQuote": false,
     "tabWidth": 2,
     "trailingComma": "es5",
     "useTabs": false,

example/next-example/pages/_document.js

@@ -1,9 +1,9 @@
 // Based on https://github.com/zeit/next.js/tree/canary/examples/with-react-native-web
 // and https://github.com/expo/expo-cli/blob/master/packages/webpack-config/web-default/index.html
-import NextDocument, { Head, Main, NextScript } from 'next/document'
-import * as React from 'react'
+import NextDocument, { Head, Main, NextScript } from "next/document"
+import * as React from "react"
 
-import { AppRegistry } from 'react-native'
+import { AppRegistry } from "react-native"
 
 export const style = `
 /**
@@ -46,8 +46,8 @@ body {
 `
 
 export async function getInitialProps({ renderPage }) {
-  AppRegistry.registerComponent('Main', () => Main)
-  const { getStyleElement } = AppRegistry.getApplication('Main')
+  AppRegistry.registerComponent("Main", () => Main)
+  const { getStyleElement } = AppRegistry.getApplication("Main")
   const page = renderPage()
   const styles = [
     <style

example/next-example/pages/index.tsx

@@ -1 +1 @@
-export { default } from '../App'
+export { default } from "../App"

macro.babel.config.js

@@ -1,3 +1,9 @@
 module.exports = {
-  plugins: ['@babel/plugin-syntax-jsx'],
+  plugins: [
+    "@babel/plugin-syntax-jsx",
+    [
+      "module-resolver",
+      { alias: { "react-native-tailwind.macro": "./src/index.tsx" } },
+    ],
+  ],
 }

package.json

@@ -54,6 +54,7 @@
     "@types/jest": "^26.0.0",
     "@types/react": "^16.9.19",
     "@types/react-native": "0.62.13",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-tester": "^10.1.0",
     "commitlint": "^11.0.0",
     "eslint": "^7.2.0",
@@ -116,11 +117,12 @@
       "prettier"
     ],
     "rules": {
+      "react-native/no-inline-styles": "off",
       "prettier/prettier": [
         "error",
         {
           "quoteProps": "consistent",
-          "singleQuote": true,
+          "singleQuote": false,
           "tabWidth": 2,
           "trailingComma": "es5",
           "useTabs": false,
@@ -136,7 +138,7 @@
   ],
   "prettier": {
     "quoteProps": "consistent",
-    "singleQuote": true,
+    "singleQuote": false,
     "tabWidth": 2,
     "trailingComma": "es5",
     "useTabs": false,
@@ -158,6 +160,7 @@
   },
   "dependencies": {
     "@babel/template": "^7.15.4",
-    "babel-plugin-macros": "^3.1.0"
+    "babel-plugin-macros": "^3.1.0",
+    "nanoid": "^3.1.25"
   }
 }

scripts/bootstrap.js

@@ -1,24 +1,24 @@
-const path = require('path')
-const child_process = require('child_process')
+const path = require("path")
+const child_process = require("child_process")
 
-const root = path.resolve(__dirname, '..')
+const root = path.resolve(__dirname, "..")
 const args = process.argv.slice(2)
 const options = {
   cwd: process.cwd(),
   env: process.env,
-  stdio: 'inherit',
-  encoding: 'utf-8',
+  stdio: "inherit",
+  encoding: "utf-8",
 }
 
 let result
 
 if (process.cwd() !== root || args.length) {
   // We're not in the root of the project, or additional arguments were passed
   // In this case, forward the command to `yarn`
-  result = child_process.spawnSync('yarn', args, options)
+  result = child_process.spawnSync("yarn", args, options)
 } else {
   // If `yarn` is run without arguments, perform bootstrap
-  result = child_process.spawnSync('yarn', ['bootstrap'], options)
+  result = child_process.spawnSync("yarn", ["bootstrap"], options)
 }
 
 process.exitCode = result.status

src/__tests__/__fixtures__/array-style-prop-append.js

@@ -0,0 +1,5 @@
+import tw from '../../macro'
+
+const Append = () => (
+  <View style={[styles.a, { backgroundColor: 'pink' }]} tw="px-8" />
+)

src/__tests__/__fixtures__/array-style-prop.js

@@ -0,0 +1,5 @@
+import tw from '../../macro'
+
+const Prepend = () => (
+  <View tw="px-8" style={[styles.a, { backgroundColor: 'pink' }]} />
+)

src/__tests__/__fixtures__/conditional-style.js

@@ -0,0 +1,8 @@
+import tw from '../../macro'
+
+const Comp = () => (
+  <View
+    tw="pt-8"
+    style={[styles.a, isFocused ? tw`bg-blue-400` : tw`bg-pink-500`]}
+  />
+)

src/__tests__/__fixtures__/existing-data-set-prop.js

@@ -0,0 +1,5 @@
+import tw from "../../macro"
+
+const Comp = () => <View tw="px-8" dataSet={{ foo: "bar" }} />
+
+const Comp2 = () => <View tw="px-8" dataSet={{ foo: "bar", media: "baz" }} />

src/__tests__/__fixtures__/object-style-prop-append.js

@@ -0,0 +1,3 @@
+import tw from '../../macro'
+
+const Append = () => <View style={{ backgroundColor: 'pink' }} tw="px-8" />

src/__tests__/__fixtures__/object-style-prop.js

@@ -0,0 +1,3 @@
+import tw from '../../macro'
+
+const Prepend = () => <View tw="px-8" style={{ backgroundColor: 'pink' }} />

src/__tests__/__fixtures__/reference-style-prop-append.js

@@ -0,0 +1,3 @@
+import tw from '../../macro'
+
+const Append = () => <View style={styles.a} tw="px-8" />

src/__tests__/__fixtures__/reference-style-prop.js

@@ -0,0 +1,3 @@
+import tw from '../../macro'
+
+const Prepend = () => <View tw="px-8" style={styles.a} />