diff --git a/__tests__/visitor/content-positive-match/code.tsx b/__tests__/visitor/content-positive-match/code.tsx index 1ef8651..c2488e8 100644 --- a/__tests__/visitor/content-positive-match/code.tsx +++ b/__tests__/visitor/content-positive-match/code.tsx @@ -1,8 +1,10 @@ import { Text } from "react-native"; +import { TestComponent } from "./test"; export function Test() { return ( <> Hello world! + ); } diff --git a/__tests__/visitor/content-positive-match/output.tsx b/__tests__/visitor/content-positive-match/output.tsx index e46d85a..ade2571 100644 --- a/__tests__/visitor/content-positive-match/output.tsx +++ b/__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 ( <> Hello world! + ); } @@ -16,6 +18,9 @@ Object.assign( "font-bold": { fontWeight: "700", }, + "text-red-500": { + color: "#ef4444", + }, }) ); Object.assign(globalThis.tailwindcss_react_native_media, {}); diff --git a/__tests__/visitor/content-positive-match/tailwind.config.js b/__tests__/visitor/content-positive-match/tailwind.config.js index 7bd2065..eb10346 100644 --- a/__tests__/visitor/content-positive-match/tailwind.config.js +++ b/__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}`], }; diff --git a/__tests__/visitor/content-positive-match/test.tsx b/__tests__/visitor/content-positive-match/test.tsx new file mode 100644 index 0000000..740ee70 --- /dev/null +++ b/__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 Hello world!; +} diff --git a/src/babel/root-visitor.ts b/src/babel/root-visitor.ts index fc9d338..867dcbc 100644 --- a/src/babel/root-visitor.ts +++ b/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 diff --git a/src/babel/utils/get-import-blocked-components.ts b/src/babel/utils/get-import-blocked-components.ts index 4f004be..39a5b44 100644 --- a/src/babel/utils/get-import-blocked-components.ts +++ b/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; } diff --git a/src/babel/utils/get-tailwind-config.ts b/src/babel/utils/get-tailwind-config.ts index 6f12e29..792ff25 100644 --- a/src/babel/utils/get-tailwind-config.ts +++ b/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 = {}; 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); } diff --git a/src/babel/visitor.ts b/src/babel/visitor.ts index 6d2e89c..ad45895 100644 --- a/src/babel/visitor.ts +++ b/src/babel/visitor.ts @@ -18,6 +18,7 @@ import { export interface VisitorState extends State, Required { + cwd: string; allowRelativeModules: AllowPathOptions; blockList: Set; hasClassNames: boolean; @@ -25,6 +26,7 @@ export interface VisitorState hasProvider: boolean; hasStyleSheetImport: boolean; tailwindConfig: TailwindConfig; + tailwindConfigPath: string; canCompile: boolean; canTransform: boolean; }