@stylex/open-props import

dsongman commented 7 months ago

I'm trying to include variables from StyleX's implementation of Open Props that seems to indicate that third party stylex.js files aren't being included property.

I can define and import regular variables just fine but as soon as I try to pull a var from one of the @stylex/open-props/libs/*.stylex files, I see Uncaught Error: stylex.defineVars should never be called. It should be compiled away. in the console linking back to the defineVars call in the imported .stylex file.

Hopefully this is just some extra configuration I haven't setup; but I was looking at this Stackblitz that uses the Next.js Rollup and don't see them including anything from @stylex/open-props in their configs.

Sample

// myColors.stylex.ts
import { grayOKLCH } from "@stylexjs/open-props/lib/grayOKLCH.stylex";
import stylex from "@stylexjs/stylex";

export const myColors = stylex.defineVars({
  myColor: `oklch(${grayOKLCH.grey1} 0 0)`,
});

Thanks for looking into it!

HorusGoul commented 7 months ago

Definitely a bug + lack of docs. I've included a section in the README.md to explain what needs to be configured for this to work, and ensured it would work with @stylexjs/open-props with a fix included in 0.4.1.

Essentially:

upgrade to 0.4.1, and you don't need to do anything else if you're using @stylexjs/open-props.
If you're using a different external library that exports StyleX files, use the optimizeDeps config to exclude that library from prebundling:

// vite.config.ts
export defineConfig({
  ...
  optimizeDeps: {
    exclude: ['cool-stylex-library']
  }
})

Thanks for the report!

dsongman commented 6 months ago

Updated my project to your latest version (0.4.1) and it worked great… until I also updated to the latest StyleX (also 0.4.1) and am getting an error:

colorsOKLCH.stylex.js?v=d567eb5e:12 Uncaught TypeError: __stylex__.inject is not a function

Happy to open a new issue if desired!

HorusGoul commented 6 months ago

Updated my project to your latest version (0.4.1) and it worked great… until I also updated to the latest StyleX (also 0.4.1) and am getting an error:
colorsOKLCH.stylex.js?v=d567eb5e:12 Uncaught TypeError: __stylex__.inject is not a function
Happy to open a new issue if desired!

See #29, there's a workaround while we merge #30.

HorusGoul / vite-plugin-stylex

@stylex/open-props import #23

Sample