support arbitrary named colors

changelog.md

@@ -6,6 +6,12 @@ on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project ad
 
 [comment]: # 'Section Titles: Added/Fixed/Changed/Removed'
 
+## [4.4.0] - 2024-07-09
+
+- added support for arbitrary named colors (eg. `text-[lemonchiffon]`)
+  [(#282)](https://github.com/jaredh159/tailwind-react-native-classnames/issues/306) and
+  [(#293)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/309)
+
 ## [4.3.0] - 2024-06-18
 
 - added support for line-height shorthand with font-size (eg. `text-sm/6`)

src/__tests__/borders.spec.ts

@@ -18,6 +18,7 @@ describe(`borders`, () => {
     [`border-white`, { borderColor: `#fff` }],
     [`border-t-white`, { borderTopColor: `#fff` }],
     [`border-t-[#e9c46a]`, { borderTopColor: `#e9c46a` }],
+    [`border-t-[steelblue]`, { borderTopColor: `steelblue` }],
     [`border-blue-200`, { borderColor: `#bfdbfe` }],
     [`border-black border-opacity-50`, { borderColor: `rgba(0, 0, 0, 0.5)` }],
     [`border-dashed`, { borderStyle: `dashed` }],

src/__tests__/colors.spec.ts

@@ -93,6 +93,7 @@ describe(`colors`, () => {
 
   test(`arbitrary color values`, () => {
     expect(tw`bg-[#012]`).toEqual({ backgroundColor: `#012` });
+    expect(tw`bg-[rebeccapurple]`).toEqual({ backgroundColor: `rebeccapurple` });
     expect(tw`bg-[rgba(3,4,5,0.1)]`).toEqual({
       backgroundColor: `rgba(3,4,5,0.1)`,
     });

src/resolve/color.ts

@@ -19,11 +19,12 @@ export function color(
 
   let color = ``;
 
-  // for arbitrary support: `bg-[#eaeaea]`, `text-[rgba(1, 1, 1, 0.5)]`
+  // arbitrary hex/rgb(a) support: `bg-[#eaeaea]`, `text-[rgba(1, 1, 1, 0.5)]`
   if (value.startsWith(`[#`) || value.startsWith(`[rgb`)) {
     color = value.slice(1, -1);
-
-    // search for color in config
+    // arbitrary named colors: `bg-[lemonchiffon]`
+  } else if (value.startsWith(`[`) && value.slice(1, -1).match(/^[a-z]{3,}$/)) {
+    color = value.slice(1, -1);
   } else {
     color = configColor(value, config) ?? ``;
   }