feat: allow passing in custom tailwind config path

Author: finkef

README.md

@@ -241,6 +241,42 @@ const App = () => {
 }
 ```
 
+### Macro Options
+
+You can apply options to the macro by adding a `babel-plugin-macros.config.js` or specifying them in your `package.json` like below:
+
+```js
+// babel-plugin-macros.config.js
+module.exports = {
+  reactNativeTailwind: {
+    // your options
+  },
+}
+```
+
+Alternatively:
+
+```js
+// package.json
+{
+  //...
+  "babelMacros": {
+    "reactNativeTailwind": {
+      // your options
+    }
+  }
+}
+```
+
+<details>
+<summary><strong>Available Options</strong></summary>
+
+| Name   | Default                  | Description                       |
+| ------ | ------------------------ | --------------------------------- |
+| config | `"./tailwind.config.js"` | The path to your Tailwind config. |
+
+</details>
+
 ## Next.js SSR Setup
 
 In order to enable SSR support via media queries on Next.js, update your [custom document](https://nextjs.org/docs/advanced-features/custom-document) as follows:

examples/next/tailwind.config.js renamed to examples/next/custom-tailwind-config-name.js

@@ -30,5 +30,10 @@
     "trailingComma": "es5",
     "useTabs": false,
     "semi": false
+  },
+  "babelMacros": {
+    "reactNativeTailwind": {
+      "config": "./custom-tailwind-config-name.js"
+    }
   }
 }

examples/next/package.json

@@ -1,6 +1,13 @@
-import { createMacro, MacroHandler, MacroParams } from "babel-plugin-macros"
+import {
+  createMacro,
+  MacroError,
+  MacroHandler,
+  MacroParams,
+} from "babel-plugin-macros"
 import { NodePath } from "@babel/core"
 import { JSXAttribute, ObjectExpression } from "@babel/types"
+import fs from "fs"
+import { resolve } from "path"
 import {
   addCreateUseTailwindStyles,
   addImport,
@@ -22,15 +29,24 @@ const macro = (params: MacroParams & { source: string }) => {
     },
     state,
     babel: { types: t },
+    config = {},
   } = params
 
   const program = state.file.path
 
   addImport({ ...params, t, path: program, program })
 
-  program.state.tailwindConfig = resolveTailwindConfig(
-    state.file.opts.filename!
+  // Resolve custom tailwind config
+  const sourceRoot = state.file.opts.sourceRoot ?? "."
+  const configPath = resolve(
+    sourceRoot,
+    config.config ?? "./tailwind.config.js"
   )
+  if (config.config && !fs.existsSync(configPath))
+    throw new MacroError(
+      `Couldn't find custom tailwind config at ${configPath}.`
+    )
+  program.state.tailwindConfig = resolveTailwindConfig(configPath)
 
   /**
    * Traverse and collect all tw props on the surrounding component function in a first run.
@@ -110,4 +126,6 @@ const macro = (params: MacroParams & { source: string }) => {
   program.scope.crawl()
 }
 
-export default createMacro(macro as MacroHandler)
+export default createMacro(macro as MacroHandler, {
+  configName: "reactNativeTailwind",
+})

packages/react-native-tailwind.macro/src/macro/index.tsx

@@ -1,32 +1,11 @@
 import resolveConfig from "tailwindcss/resolveConfig"
-import path from "path"
 import fs from "fs"
 
-const findConfigFilePath = (currentDir: string): string | null => {
-  const files = fs.readdirSync(currentDir)
-
-  const configFile = files.find((file) => file === "tailwind.config.js")
-
-  if (configFile) return path.resolve(currentDir, configFile)
-
-  // Check if package.json exists on this level, in which case we conclude that there is no config file
-  const packageJson = files.find((file) => file === "package.json")
-  if (packageJson) return null
-
-  // Otherwise, recursively move upwards
-  return findConfigFilePath(path.resolve(currentDir, ".."))
-}
-
 export const resolveTailwindConfig = (filePath: string | undefined | null) => {
-  if (!filePath) return resolveConfig({ theme: {}, darkMode: "media" })
-
-  const configFilePath = fs.lstatSync(filePath).isDirectory()
-    ? findConfigFilePath(filePath)
-    : findConfigFilePath(path.dirname(filePath))
-
-  const config = configFilePath
-    ? require(configFilePath)
-    : { theme: {}, darkMode: "media" }
+  const config =
+    filePath && fs.existsSync(filePath)
+      ? require(filePath)
+      : { theme: {}, darkMode: "media" }
 
   return resolveConfig(config)
 }