How to use an external lib that uses StyleX?

[olivierpascal]

I have a Next.js project which depends of a lib that uses StyleX. How to make it works without including the whole generated stylex.css of the lib?

[olivierpascal]

Why I don't want to just import the compiled stylex.css:

• I want styles to be compiled at runtime, only for the actually used component from the third-party lib ;
• I want to share css vars ;

Is this usecase covered by stylex? Do I have to use monorepo for that?

[olivierpascal]

So I guess the solution for that is monorepo. I am digging. Related topics:

• Using Monorepo packages in a Next.JS app #63
• Sharing `defineVars` in monorepo #204
• Is it possible to createTheme in run time? #276
• [RFC] Better support for Variables, Mono-repos and PNPM #111

[necolas]

The lib shouldn't be compiling styles before publish. When you bundle the components in your project and any components from dependencies using StyleX, that is when StyleX should be used to compile all styles and a bundler can extract them to a CSS file

[olivierpascal]

Mm yes that's what I figured out but it still does not work unfortunately as per my last edit.

[necolas]

Is your bundler ignoring directories like node_modules? That would prevent babel from processing files

[olivierpascal]

I don't ask him specifically to do so. I am using nextjs.

[olivierpascal]

Sorry, I was on my phone. When I wrote about 'my last edit', I was referencing this discussion #228 (comment)

So maybe this is a nextjs specific issue.

[nmn]

NextJS ignores node_modules by default. You can use the transpilePackages option to make it compile certain packages. See the NextJS example in the repo and how it include @stylexjs/open-props as an example.

https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages