Merge pull request #280 from jaredh159/smarter-color-fn

src/__tests__/tw.spec.ts

@@ -230,6 +230,11 @@ describe(`tw`, () => {
     expect(tw.color(`white/25`)).toBe(`rgba(255, 255, 255, 0.25)`);
     expect(tw.color(`black opacity-50`)).toBe(`rgba(0, 0, 0, 0.5)`);
     expect(tw.color(`red-500`)).toBe(`#ef4444`);
+    // @see https://github.com/jaredh159/tailwind-react-native-classnames/issues/273
+    tw = create({
+      theme: { extend: { colors: { text: { primary: `#F9E` } } } },
+    });
+    expect(tw.color(`text-primary`)).toBe(`#F9E`);
   });
 
   test(`merging in user styles`, () => {

src/create.ts

@@ -13,10 +13,10 @@ import type {
 import type { TwConfig } from './tw-config';
 import Cache from './cache';
 import ClassParser from './ClassParser';
+import { configColor, removeOpacityHelpers } from './resolve/color';
 import { parseInputs } from './parse-inputs';
 import { complete, warn } from './helpers';
 import { getAddedUtilities } from './plugin';
-import { removeOpacityHelpers } from './resolve/color';
 
 export function create(customConfig: TwConfig, platform: Platform): TailwindFn {
   const config = resolveConfig(withContent(customConfig) as any) as TwConfig;
@@ -165,9 +165,13 @@ export function create(customConfig: TwConfig, platform: Platform): TailwindFn {
         .map((util) => `bg-${util}`)
         .join(` `),
     );
-    return typeof styleObj.backgroundColor === `string`
-      ? styleObj.backgroundColor
-      : undefined;
+    if (typeof styleObj.backgroundColor === `string`) {
+      return styleObj.backgroundColor;
+    } else if (config.theme?.colors) {
+      return configColor(utils, config.theme.colors) ?? undefined;
+    } else {
+      return undefined;
+    }
   }
 
   tailwindFn.style = style;

src/resolve/color.ts

@@ -25,7 +25,7 @@ export function color(
 
     // search for color in config
   } else {
-    color = findColorInConfigRecursive(value, config);
+    color = configColor(value, config) ?? ``;
   }
 
   if (!color) {
@@ -119,29 +119,29 @@ function hexToRgba(hex: string): string {
   return `rgba(${r}, ${g}, ${b}, 1)`;
 }
 
-function findColorInConfigRecursive(colorName: string, config: TwColors): string {
-  const configColor = config[colorName];
+export function configColor(colorName: string, config: TwColors): string | null {
+  const color = config[colorName];
 
   // the color is found at the current config level
-  if (isString(configColor)) {
-    return configColor;
-  } else if (isObject(configColor) && isString(configColor.DEFAULT)) {
-    return configColor.DEFAULT;
+  if (isString(color)) {
+    return color;
+  } else if (isObject(color) && isString(color.DEFAULT)) {
+    return color.DEFAULT;
   }
 
   // search for a matching sub-string at the current config level
   let [colorNameStart = ``, ...colorNameRest] = colorName.split(`-`);
   while (colorNameStart !== colorName) {
     const subConfig = config[colorNameStart];
     if (isObject(subConfig)) {
-      return findColorInConfigRecursive(colorNameRest.join(`-`), subConfig);
+      return configColor(colorNameRest.join(`-`), subConfig);
     } else if (colorNameRest.length === 0) {
-      return ``;
+      return null;
     }
     colorNameStart = `${colorNameStart}-${colorNameRest.shift()}`;
   }
 
-  return ``;
+  return null;
 }
 
 const MATCH_SHORT_HEX = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;