support arbitrary named colors

jaredh159 · Jul 9, 2024 · 3d6459d · 3d6459d
1 parent 8011d31
commit 3d6459d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/__tests__/borders.spec.ts b/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` }],

diff --git a/src/__tests__/colors.spec.ts b/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)`,
     });

diff --git a/src/resolve/color.ts b/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) ?? ``;
   }