facebook / facebook/stylex

`stylex.create` function-based styles throw "Unsupported expression: FunctionDeclaration" when nested in a namespace or component

Open
#1,235 1 comment 0 reactions 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

I found a bug with `stylex.create` calls when nested inside components. I'm using `"@stylexjs/postcss-plugin": "^0.15.4",`. This is the simplest repro I can think of to demostrate the issue:

Code:

```tsx
import * as stylex from "@stylexjs/stylex";

export function Repro(): React.ReactNode {
const styles = stylex.create({
center: {
alignItems: "center",
display: "flex",
height: "100vh",
justifyContent: "center",
},
foo: (bar: string) => ({
// ^ This is the issue, specifically the function signature
backgroundColor: bar,
height: "100px",
width: "100px",
}),
});

return (


Mew


);
}
```

Error:

```
[plugin:vite:css] [postcss] /Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/app/idea/v3/editors/components/mew.tsx: Unsupported expression: FunctionDeclaration

1 | import * as stylex from "@stylexjs/stylex";
2 |
> 3 | export function Repro(): React.ReactNode {
| ^
4 | const styles = stylex.create({
5 | center: {
6 | alignItems: "center",
at File.buildError [as buildCodeFrameError] (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/core/src/transformation/file/file.ts:257:12)
at NodePath.buildCodeFrameError (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/index.ts:157:21)
at transformStyleXCreate (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@stylexjs/babel-plugin/lib/index.js:7311:29)
at PluginPass.call (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@stylexjs/babel-plugin/lib/index.js:8706:9)
at call (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/visitors.ts:303:14)
at NodePath.call [as _call] (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:36:20)
at NodePath.call (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:21:18)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:97:31)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:109:19)
at TraversalContext.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:180:19)
at traverseNode (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitMultiple (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:99:17)
at TraversalContext.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:178:19)
at traverseNode (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitMultiple (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:99:17)
at TraversalContext.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:178:19)
at traverseNode (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:109:19)
at TraversalContext.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:180:19)
at traverseNode (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitMultiple (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:99:17)
at TraversalContext.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:178:19)
at traverseNode (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:109:19)
at TraversalContext.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:180:19)
at traverseNode (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:109:19)
at TraversalContext.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:180:19)
at traverseNode (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitMultiple (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:99:17)
at TraversalContext.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:178:19)
at traverseNode (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/traverse-node.ts:208:17)
at NodePath.visit (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/path/context.ts:104:33)
at TraversalContext.visitQueue (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:148:16)
at TraversalContext.visitSingle (/Users/zaydek/Code/2025/aug-1-make-it-count/frontend/react-router/node_modules/@babel/traverse/src/context.ts:109:19
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.
```

If a fix is worked on, please check that it still works inside of namespaces too, please. 🙏

Code:

```tsx
import * as stylex from "@stylexjs/stylex";

namespace Repro {
export function Repro(): React.ReactNode {
const styles = stylex.create({
...
});

return (
...
);
}
}
```

Thank you! Being able to nest `stylex.create` calls has been a big help for me.

### Expected behavior

Invoking `stylex.create` with function calls from inside of functions and or namespaces should work the same as if it were invoked globally.

### 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.