Negative values throw `Unsupported expression: UnaryExpression`
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### Describe the issue
Given code like this:
```tsx
...
scrollableContentContainer: {
display: "flex",
flexDirection: "column",
marginBlock: -4,
// ^^ This causes StyleX to throw
minBlockSize: 0,
position: "relative",
},
...
```
StyleX throws:
```
1:47:19 PM [vite] Internal server error: /app/routes/_idea/checkbox.tsx: Unsupported expression: UnaryExpression
(This is an error on an internal node. Probably an internal error.)
Plugin: babel-plugin
File: /app/routes/_idea/checkbox.tsx
at File.buildError [as buildCodeFrameError] (/node_modules/@babel/core/src/transformation/file/file.ts:257:12)
at NodePath.buildCodeFrameError (/node_modules/@babel/traverse/src/path/index.ts:157:21)
at transformStyleXCreate (/node_modules/@stylexjs/babel-plugin/lib/index.js:7396:29)
at PluginPass.call (/node_modules/@stylexjs/babel-plugin/lib/index.js:8828:9)
at call (/node_modules/@babel/traverse/src/visitors.ts:303:14)
at NodePath.call [as _call] (/node_modules/@babel/traverse/src/path/context.ts:36:20)
at NodePath.call (/node_modules/@babel/traverse/src/path/context.ts:21:18)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:97:31)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/node_modules/@babel/traverse/src/context.ts:109:19)
at TraversalContext.visit (/node_modules/@babel/traverse/src/context.ts:180:19)
at traverseNode (/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitMultiple (/node_modules/@babel/traverse/src/context.ts:99:17)
at TraversalContext.visit (/node_modules/@babel/traverse/src/context.ts:178:19)
at traverseNode (/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitMultiple (/node_modules/@babel/traverse/src/context.ts:99:17)
at TraversalContext.visit (/node_modules/@babel/traverse/src/context.ts:178:19)
at traverseNode (/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/node_modules/@babel/traverse/src/context.ts:109:19)
at TraversalContext.visit (/node_modules/@babel/traverse/src/context.ts:180:19)
at traverseNode (/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/node_modules/@babel/traverse/src/context.ts:109:19)
at TraversalContext.visit (/node_modules/@babel/traverse/src/context.ts:180:19)
at traverseNode (/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitMultiple (/node_modules/@babel/traverse/src/context.ts:99:17)
at TraversalContext.visit (/node_modules/@babel/traverse/src/context.ts:178:19)
at traverseNode (/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/node_modules/@babel/traverse/src/context.ts:109:19)
at TraversalContext.visit (/node_modules/@babel/traverse/src/context.ts:180:19)
at traverseNode (/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitMultiple (/node_modules/@babel/traverse/src/context.ts:99:17)
at TraversalContext.visit (/node_modules/@babel/traverse/src/context.ts:178:19)
at traverseNode (/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/node_modules/@babel/traverse/src/context.ts:109:19)
```
As a workaround I need to quote negative units like `"-4px"` in this case.
Thanks!
### Expected behavior
`-4` should work for properties that support number-based values such as length-based properties. For example, `inset-*`, `margin-*`, etc.
### Steps to reproduce
See OP.
### Test case
_No response_
### Additional comments
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.