marklawlor / nativewind

React Native utility-first universal design system - powered by Tailwind CSS
https://nativewind.dev
MIT License
4.3k stars 233 forks source link

[v4] Tailwind config: `platformSelect` on color with alpha value breaks css variables on 2nd platform #859

Open mrzachnugent opened 1 month ago

mrzachnugent commented 1 month ago

Describe the bug Given a tailwind config that uses platformSelect for a color with an alpha value,

 background: platformSelect({
          android: 'rgb(var(--android-background) / <alpha-value>)',
          ios: 'rgb(var(--background) / <alpha-value>)',
        })

When you start the app on the second platform (iOS in the example above) Then the css variables no longer work on iOS.

To Reproduce Steps to reproduce the behavior:

  1. Clone the following minimal reproduction repo: https://github.com/mrzachnugent/nw-platform-select-alpha-value
  2. Install the dependencies and start the iOS app: npm i && npm run ios
  3. The screen should be a red color with an opacity of 30%, instead it is the default screen color.

Expected behavior The css variables work for the second platform as it does for the first platform. In the minimal repo, the iOS screen should be a red color with an opacity of 30%.

To Reproduce working version for first platform (2 options) With Android

  1. Run the android app: npm run android
  2. When the app loads, you will see the screen will be a red color with an opacity of 30%

With iOS

  1. Checkout the branch with iOS as first platform in platform select: git checkout @zach/working-first-platform
  2. Run the android app: npm run ios
  3. When the app loads, you will see the screen will be a red color with an opacity of 30%

Screenshots Current behavior: Simulator Screenshot - iPhone 15 Pro - 2024-03-27 at 13 11 28

Expected behavior: Simulator Screenshot - iPhone 15 Pro - 2024-03-27 at 13 11 45

Additional context Add any other context about the problem here.