Skip to content

platformSelect does not work with boxShadow and css syntax #275

@kristiankostecky

Description

@kristiankostecky

Describe the bug
Unable to use platformSelect with boxShadow values containing CSS box-shadow syntax like 0px 1px 4px rgba(0, 0, 0, 1). The build fails with error ERROR Unexpected token CloseCurlyBracket.

Reproduction
Using the StackBlitz template: https://stackblitz.com/edit/nativewind-test-yxqpx1nh?file=nativewind.test.tsx

Steps to reproduce:

  1. Add the following code to tailwind.config.js:
theme: {
  extend: {
    boxShadow: {
      custom: platformSelect({
        ios: '0px 1px 4px rgba(0, 0, 0, 1)',
        android: '0px 1px 4px rgba(0, 0, 0, 1)',
      }),
    },
  },
}
  1. Try to build the project
  2. Observe the build error

Expected behavior
Should be able to use platformSelect with box-shadow values to specify different shadow styles for iOS and Android platforms, similar to how it works with other style properties.

Additional context

  • NativeWind version: 4.1.23
  • React Native version: 0.76.9
  • The error suggests there might be an issue with how NativeWind parses or transforms box-shadow values when used with platformSelect
  • This functionality is critical for implementing platform-specific shadow styles in React Native applications
  • More detail about error
  /project/node_modules/@expo/cli/build/src/utils/errors.js:123
    throw error;
    ^

SyntaxError: Unexpected token CloseCurlyBracket
    at cssToReactNativeRuntime (/project/node_modules/react-native-css-interop/src/css-to-rn/index.ts:125:15)
    at Object.onChange (/project/node_modules/react-native-css-interop/src/metro/index.ts:339:52)
    at ChildProcess.<anonymous> (/project/node_modules/nativewind/src/metro/tailwind/v3/index.ts:70:23)
    at ChildProcess.emit (node:events:518:28)
    at emit (node:internal/child_process:949:14)
    at processTicksAndRejections (node:internal/process/task_queues:91:21) {
  fileName: 'style.css',

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Todo

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions