diff --git a/src/__tests__/colors.spec.ts b/src/__tests__/colors.spec.ts index 1367944..448a88b 100644 --- a/src/__tests__/colors.spec.ts +++ b/src/__tests__/colors.spec.ts @@ -34,6 +34,10 @@ describe(`colors`, () => { test(`color with opacity shorthand`, () => { expect(tw`bg-black/50`).toEqual({ backgroundColor: `rgba(0, 0, 0, 0.5)` }); expect(tw`text-red-300/75`).toEqual({ color: `rgba(252, 165, 165, 0.75)` }); + // shorthand preferred + expect(tw`bg-black/50 bg-opacity-75`).toEqual({ + backgroundColor: `rgba(0, 0, 0, 0.5)`, + }); }); test(`bg colors with customized configs`, () => { diff --git a/src/__tests__/dark-mode.spec.ts b/src/__tests__/dark-mode.spec.ts index 3fa829e..7c6ea3a 100644 --- a/src/__tests__/dark-mode.spec.ts +++ b/src/__tests__/dark-mode.spec.ts @@ -39,6 +39,16 @@ describe(`dark mode`, () => { backgroundColor: `#fff`, }); + // ignores dark:bg-opacity-25 when merging, not dark mode + expect(tw`bg-white dark:bg-white/50 dark:bg-opacity-25`).toEqual({ + backgroundColor: `#fff`, + }); + + // merges bg-opacity-50 + expect(tw`bg-white dark:bg-white/75 bg-opacity-50`).toEqual({ + backgroundColor: `rgba(255, 255, 255, 0.5)`, + }); + tw.setColorScheme(`dark`); expect(tw`bg-gray-100/50 dark:bg-gray-800/50`).toEqual({ @@ -48,5 +58,10 @@ describe(`dark mode`, () => { expect(tw`bg-white dark:bg-white/50`).toEqual({ backgroundColor: `rgba(255, 255, 255, 0.5)`, }); + + // shorthand opacity wins over "merged" bg-opacity-X + expect(tw`bg-white dark:bg-white/50 bg-opacity-75 dark:bg-opacity-25`).toEqual({ + backgroundColor: `rgba(255, 255, 255, 0.5)`, + }); }); }); diff --git a/src/resolve/color.ts b/src/resolve/color.ts index 899859b..ac17b19 100644 --- a/src/resolve/color.ts +++ b/src/resolve/color.ts @@ -37,6 +37,9 @@ export function color( if (!Number.isNaN(opacity)) { color = addOpacity(color, opacity / 100); return { + // even though we know the bg opacity, return `dependent` to work around + // subtle dark-mode ordering issue when combining shorthand & non-shorthand + // @see https://github.com/jaredh159/tailwind-react-native-classnames/pull/269 kind: `dependent`, complete(style) { style[STYLE_PROPS[type].color] = color;