[babel-plugin] Allow `stylex.create` nested within TS namespaces (and more?)

[nmn]

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?

namespace A {
  const styles = stylex.create({
    foo: { ... },
    bar: { ... },
  });
  
  export function Foo() { return <div {...stylex.props(styles.foo)} /> }
  export function Bar() { return <div {...stylex.props(styles.bar)} /> }
}

namespace B {
  const styles = stylex.create({
    foo: { ... },
    bar: { ... },
  });
  
  export function Foo() { return <div {...stylex.props(styles.foo)} /> }
  export function Bar() { return <div {...stylex.props(styles.bar)} /> }
}

...

<A.Foo />
<B.Foo />

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:

[zaydek]

It's worth commenting that, in case anyone works on this, it would be ideal if this works for all StyleX APIs and not just stylex.create.

I'd really enjoy being able to do something like:

export namespace Theme {
  export const Spacing = stylex.defineVars({
    ...
  })
  
  ...
}

[nonzzz]

Let me do it.