Merge pull request #269 from crjc/fix/shorthand-colours-dark-mode

fix dark mode colour shorthands
jaredh159 · Feb 12, 2024 · 02cb50d · 02cb50d
2 parents 10209f3 + ac03745
commit 02cb50d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/__tests__/dark-mode.spec.ts b/src/__tests__/dark-mode.spec.ts
@@ -35,10 +35,18 @@ describe(`dark mode`, () => {
       backgroundColor: `rgba(243, 244, 246, 0.5)`,
     });
 
+    expect(tw`bg-white dark:bg-white/50`).toEqual({
+      backgroundColor: `#fff`,
+    });
+
     tw.setColorScheme(`dark`);
 
     expect(tw`bg-gray-100/50 dark:bg-gray-800/50`).toEqual({
       backgroundColor: `rgba(31, 41, 55, 0.5)`,
     });
+
+    expect(tw`bg-white dark:bg-white/50`).toEqual({
+      backgroundColor: `rgba(255, 255, 255, 0.5)`,
+    });
   });
 });
diff --git a/src/resolve/color.ts b/src/resolve/color.ts
@@ -1,7 +1,7 @@
 import type { ColorStyleType, Style, StyleIR } from '../types';
 import type { TwColors } from '../tw-config';
 import { isObject, isString } from '../types';
-import { warn, complete } from '../helpers';
+import { warn } from '../helpers';
 
 export function color(
   type: ColorStyleType,
@@ -36,7 +36,12 @@ export function color(
     const opacity = Number(shorthandOpacity);
     if (!Number.isNaN(opacity)) {
       color = addOpacity(color, opacity / 100);
-      return complete({ [STYLE_PROPS[type].color]: color });
+      return {
+        kind: `dependent`,
+        complete(style) {
+          style[STYLE_PROPS[type].color] = color;
+        },
+      };
     }
   }