document & add tests for color shorthand order issue

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`, () => {

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)`,
+    });
   });
 });

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;