No styles for built packages

[paulm17]

Describe the issue

Using turborepo and components within the packages folder.

If a component has the following entry:

"main": "src/index.ts",

StyleX works fine and styles are applied for the component. However it does not scale. My use case is to build the component for installation via npmjs.

The entry for a package to be compiled:

"main": "index.js",
"types": "./dist/index.d.ts",
"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "import": "./dist/index.mjs",
    "require": "./dist/index.js"
  }
},

However no styles are applied.

Expected behavior

For styleX to apply styles for compiled packages imported via npmjs

Steps to reproduce

I have a repo to highlight this issue:

1. clone https://github.com/paulm17/raikou_stylex
2. pnpm i (in root)
3. cd packages/ui/Button
4. pnpm build (to generate the dist folder)
5. pnpm run dev (in root)

Test case

No response

Additional comments

I'm not sure if this has already been covered. Feel free to link an existing issue.

Many thanks!

[nmn]

The transpilePackages option in next.config.js does not include @acme/button which is the package you're importing. Instead it has @acme/badge which doesn't seem to exist.

[paulm17]

My bad. This should have been deleted. I'm moving code from 1 repo to this one. So please ignore it.

transpilePackages doesn't work in this case.

I've updated the repo and removed it.

[paulm17]

@nmn Due to health issues I've only been able to pick this up now.

Within the package (@acme/button) that contains the stylex style:

console.log(styles1.base);
    return (
      <button {...stylex.props(styles1.base)} ref={ref}>
        rrr
      </button>
    );

Outputs:

{
  'index__styles1.base': 'index__styles1.base',
  fontSize: 'xwsyq91',
  lineHeight: 'x1u5lrna',
  color: 'x1gapsv8',
  '$$css': true
}

As shown here, none of the styles are applied:

Also this is the layout.css

The use case that I require to start using stylex. Is for a UI component library that is installed via npmjs.

Is there anything I can do to help this along? Many thanks!

[paulm17]

So I came across material-ui's new css-in-js and came across this:

That's exactly my use case. Good to hear!

If you can make some examples (with turborepo), I'd be keen to see them. As I'm having difficultly achieving the same result! Thanks!

[paulm17]

This morning, I was able to take the non-working stylex poc and test out pigment-css.

Got it working. So my use case is fulfilled with either griffel and pigment-css. But stylex is seems to be my preferred option. 🤔

[nmn]

Setting up StyleX is harder than it should be. We're working to fix that.

[paulm17]

Somewhat works now, but "use client" needs to be utilised otherwise no styles are bundled in the main css file.

Also, when build is run. No styles are bundled in the main css file.

Getting there:

• when using stylex for a component library...

• styles included for server components
• styles included for when components marked as "use client"
• styles included in build process

The cli looks interesting, will wait for that to mature a little until I try it. 😄

Eventually I'm sure this will all be sorted 🚀

[nmn]

I assume you're using Next.js? For now, the best way to use StyleX with Next.js is going to be the new (experimental) CLI. I have it working with Next 15 RC and I'll be sharing a link on the ecosystem page soon.

I'm about to release a point release with some quick bug-fixes for the CLI in the meantime.

[ZelCloud]

I'm trying this with a simple monorepo Vite react app template, and I have the same issue. The vite lib built react component compiles successfully and has a stylex.css file generated but its styles aren't displayed when consumed. Which seems like the opposite off what was said in the following discussion?

#228

If I'm reading this right the parent app should consume and compile the child react component and have one stylex.css file generated with all the styles and be consumed correctly? In my case the built package has no in built styles, and it doesn't get compiled by the parent to display styles either. So in either situation this seems wrong.

[BMCwebdev]

You may want to make a separate discussion as this one is focused on Next and you are using Vite. But while you’re here:

• are you building a library in Vite that is then imported elsewhere?
• If so this discussion and some links here may be helpful for you. I went through a lot of figuring out Vite. There may be some other discussions I started that could be helpful. Also make sure you’ve read up on the Vite plugins available to you.
  Bundling token.stylex.js files #503