-
Notifications
You must be signed in to change notification settings - Fork 22
Open
Description
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:
- 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)',
}),
},
},
}- Try to build the project
- 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
Labels
No labels
Type
Projects
Status
Todo