diff --git a/changelog.md b/changelog.md index bbc7231..92458fa 100644 --- a/changelog.md +++ b/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`) diff --git a/src/__tests__/borders.spec.ts b/src/__tests__/borders.spec.ts index b396bee..270691f 100644 --- 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 index 448a88b..2150294 100644 --- 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 index 2ef505c..1e37806 100644 --- 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) ?? ``; }