[babel-plugin] Allow `stylex.create` nested within TS namespaces (and more?)
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### Discussed in https://github.com/facebook/stylex/discussions/827
Originally posted by **zaydek** December 30, 2024
I love using TS namespaces to create conceptual boundaries so it's easier to reason about what different chunks of my code do. Like a `Button` namespace so I can aggregate relevant variables and components for buttons. One thing I've noticed is that StyleX is incompatible with TS namespaces so I can't do something like `namespace Foo { const styles = stylex.create({ ... }); }`.
I believe what's going on is that TS namespaces are syntax sugar for objects and therefore it may be impossible to add support for this. That being said, is there a way for me to colocate styles behind something like a namespace so I can do something like the following in the future?
```tsx
namespace A {
const styles = stylex.create({
foo: { ... },
bar: { ... },
});
export function Foo() { return
export function Bar() { return
}
namespace B {
const styles = stylex.create({
foo: { ... },
bar: { ... },
});
export function Foo() { return
export function Bar() { return
}
...
```
I know I can simply create boundary lines using files but I find namespaces allow me to do the job of several files in one file, but when it comes to StyleX APIs, it breaks this convention and I need to prefix styles, which is OK but slightly annoying.
Any ideas or recommendations?
Here is an example of some code where I'd love to have the ability to nest the styles under the namespace instead of prefixing the styles name:
Contributor guide
Assessment
This issue has not been assessed yet.