fix: better matching with relative content paths in tailwind.config.js

fixes: #57

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

@@ -1,8 +1,10 @@
 import { Text } from "react-native";
+import { TestComponent } from "./test";
 export function Test() {
   return (
     <>
       <Text className="font-bold">Hello world!</Text>
+      <TestComponent className="text-red-500" />
     </>
   );
 }

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

@@ -1,12 +1,14 @@
 import { StyleSheet } from "react-native";
 import { StyledComponent } from "tailwindcss-react-native";
 import { Text } from "react-native";
+import { TestComponent } from "./test";
 export function Test() {
   return (
     <>
       <StyledComponent className="font-bold" component={Text}>
         Hello world!
       </StyledComponent>
+      <StyledComponent className="text-red-500" component={TestComponent} />
     </>
   );
 }
@@ -16,6 +18,9 @@ Object.assign(
     "font-bold": {
       fontWeight: "700",
     },
+    "text-red-500": {
+      color: "#ef4444",
+    },
   })
 );
 Object.assign(globalThis.tailwindcss_react_native_media, {});

__tests__/visitor/content-positive-match/tailwind.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  content: [`./content-positive-match/code.{js,ts,jsx,tsx}`],
+  content: [`./content-positive-match/*.{js,ts,jsx,tsx}`],
 };

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

@@ -0,0 +1,5 @@
+import { Text, TextProps } from "react-native";
+
+export function TestComponent(props: TextProps & { className?: string }) {
+  return <Text {...props}>Hello world!</Text>;
+}

src/babel/root-visitor.ts

@@ -1,3 +1,4 @@
+import { resolve } from "node:path";
 import { Program } from "@babel/types";
 import { NodePath } from "@babel/traverse";
 
@@ -16,7 +17,12 @@ export default function rootVisitor(
 ) {
   const errors: StyleError[] = [];
 
-  const tailwindConfig = getTailwindConfig(cwd, {
+  const tailwindConfigPath = resolve(
+    cwd,
+    options.tailwindConfigPath || "./tailwind.config.js"
+  );
+
+  const tailwindConfig = getTailwindConfig(tailwindConfigPath, {
     ...options,
     onError(error) {
       errors.push(error);
@@ -57,8 +63,8 @@ export default function rootVisitor(
           }
 
           const visitorState: VisitorState = {
+            cwd,
             rem: 16,
-            tailwindConfigPath: "tailwind.config.js",
             platform: "native",
             hmr: true,
             mode: "compileAndTransform",
@@ -75,6 +81,7 @@ export default function rootVisitor(
             hasProvider: false,
             hasStyleSheetImport: false,
             tailwindConfig,
+            tailwindConfigPath,
           };
 
           // Traverse the file

src/babel/utils/get-import-blocked-components.ts

@@ -1,5 +1,5 @@
 import { createRequire } from "node:module";
-import { join, dirname, basename } from "node:path";
+import { join, dirname, basename, resolve } from "node:path";
 import { readdirSync, lstatSync, existsSync } from "node:fs";
 import micromatch from "micromatch";
 
@@ -24,6 +24,7 @@ export function getImportBlockedComponents(
     allowRelativeModules,
     blockModuleTransform,
     filename,
+    cwd,
   } = state;
 
   const require = createRequire(filename);
@@ -85,12 +86,13 @@ export function getImportBlockedComponents(
     isAllowed ??= micromatch.isMatch(moduleName, allowModuleTransform);
     returnComponentsAsBlocked = isBlocked || !isAllowed;
   } else {
-    const isNotAllowedRelative =
-      Array.isArray(allowRelativeModules) &&
-      allowRelativeModules.length > 0 &&
-      !modulePaths.some((modulePath) =>
-        micromatch.isMatch(modulePath, allowRelativeModules)
-      );
+    const normalizedAllowRelativeModules = !Array.isArray(allowRelativeModules)
+      ? []
+      : allowRelativeModules.map((modulePath) => resolve(cwd, modulePath));
+
+    const isNotAllowedRelative = !modulePaths.some((modulePath) =>
+      micromatch.isMatch(modulePath, normalizedAllowRelativeModules)
+    );
 
     returnComponentsAsBlocked = isNotAllowedRelative;
   }

src/babel/utils/get-tailwind-config.ts

@@ -1,4 +1,3 @@
-import { join } from "node:path";
 import { existsSync } from "node:fs";
 
 import resolveTailwindConfig from "tailwindcss/resolveConfig";
@@ -11,18 +10,12 @@ export interface GetTailwindConfigOptions extends NativePluginOptions {
 }
 
 export function getTailwindConfig(
-  cwd: string,
+  fullConfigPath: string,
   options: GetTailwindConfigOptions
 ): TailwindConfig {
   const { tailwindConfigPath } = options;
 
-  let userConfig;
-  const fullConfigPath = join(
-    cwd,
-    tailwindConfigPath || "./tailwind.config.js"
-  );
-
-  // Throw an error if configPath was set but we were unable to find it
+  let userConfig: Partial<TailwindConfig> = {};
   if (existsSync(fullConfigPath)) {
     // eslint-disable-next-line unicorn/prefer-module
     userConfig = require(fullConfigPath);
@@ -37,5 +30,5 @@ export function getTailwindConfig(
     plugins: [nativePlugin(options), ...(userConfig.plugins ?? [])],
   };
 
-  return resolveTailwindConfig(mergedConfig);
+  return resolveTailwindConfig(mergedConfig as TailwindConfig);
 }

src/babel/visitor.ts

@@ -18,6 +18,7 @@ import {
 export interface VisitorState
   extends State,
     Required<TailwindcssReactNativeBabelOptions> {
+  cwd: string;
   allowRelativeModules: AllowPathOptions;
   blockList: Set<string>;
   hasClassNames: boolean;
@@ -25,6 +26,7 @@ export interface VisitorState
   hasProvider: boolean;
   hasStyleSheetImport: boolean;
   tailwindConfig: TailwindConfig;
+  tailwindConfigPath: string;
   canCompile: boolean;
   canTransform: boolean;
 }