facebook / facebook/stylex

Negative values throw `Unsupported expression: UnaryExpression`

Open
#1,268 1 comment 1 reaction 0 assignees View on GitHub
bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.