Bundling token.stylex.js files

[BMCwebdev]

I may have run into another issue when dealing with Vite(? possibly?) and the way Vite uses Rollup? Not sure yet. Thought I'd check in on a couple of things.

So I have added some tokens to my component library, colors.stylex.js file for example. Followed the pattern of open-props.

import { defineVars } from '@stylexjs/stylex';

export const colors = defineVars({
  peri_50: "#dce0ff",
  peri_100: "#b9c1ff",
...

Paired with colors.stylex.d.ts files

import { VarGroup } from '@stylexjs/stylex';

type TColors = Readonly<{
  peri_50: string;
  peri_100: string;
...
export declare const colors: VarGroup<TColors>;

I am using one color var in my Button component as a test. Everything works fine in the component library.
But, when importing the libary into my App, I am getting this error
The return value of stylex.defineVars() must be bound to a named export.

Any suggestions where to start? Happy to provide any more information. Also think it's high time I get a public repo set up to share all my woes with :-)

[BMCwebdev]

Made some public repos/package.

Component library that uses React Aria Components starter kit (Tailwind version) that I am converting to Stylex. So far only Button component has been converted.
https://github.com/BMCwebdev/rac-stylex

Example Remix-Vite app that imports the above component library.
https://github.com/BMCwebdev/remix-app

[derekjwilliams]

Excellent, I ended up using Radix with StyleX after having no luck with React Aria + StyleX. Let me know if you need help with other components.

[BMCwebdev]

Thanks @derekjwilliams for now I have one last to-do and that is to get RAC render props into the Stylex spread function. My last post in this thread mentions it as does the readme in the component library repo

[BMCwebdev]

This isn't reflected in the above repos, but I tried doing something similar to Stylex's repo. I took my token files and placed them into a workspace in the parent repo. Published them as their own package (no bundling, the files remain as is). The component library now imports from import { colors } from '@acme/lib-tokens/colors.stylex';
Everything works in the component library, but when trying to consume the component library in an app, I get the same error as before (originating from the component library es.js file)
The return value of stylex.defineVars() must be bound to a named export.
I could update the example repos above, but seeing as moving the token files to their own un-compiled package didn't help, not sure if I should.

[BMCwebdev]

Ah, I needed to add each file to the vite.config build > rollupOptions > external array

'@acme/lib-tokens/colors.stylex',
'@acme/lib-tokens/fonts.stylex',
'@acme/lib-tokens/sizes.stylex',

etc

[BMCwebdev]

I have updated the repositories to use the new token setup of

• tokens as an independent workspace package in the monorepo
• token files set up to remain unaltered, and package is just the original files
• consuming app needs to have the following as dependencies
  • the component library package
  • the token package
  • stylex
• token files set up as external in vite config

Should also mention that if you are using @HorusGoul Vite plugin, you need to add the component library and the tokens to the libraries key. See the Vite config file in the example Vite App repo

I think there as been a lot of specific config wrangling to get this to work with Vite, and I am super grateful for the Vite plugins that are currently available. Hopefully the upcoming CLI or perhaps an official Vite plugin will reduce these complexities. Looking forward to other work that has been discussed.

Okay I am going to make this thread as answered but I might open a new one specifically for the last thing on my to-do list:

Figure a way to get the React Aria Component render props into the Stylex spread function.

• React Aria Components Render Props
• React Aria Components Button Styling
• Stylex using styles
• Stylex discussion about helper function possible answer

[BMCwebdev]

Follow up about RAC render props into Stylex spread function

[nmn]

Great work here @BMCwebdev

I've responded to you in a couple of other threads so I'm skipping some of this. Let me know if need any specific help.