Using StyleX in design system?

[simpel]

Hi all!

I must be missing something here. But how can I use StyleX for components in a distributed design library, in a NPM package?

Currently we have a bunch of components that gets compiled and distributed using emotion CSS but if StyleX generate ONE css file how would that work? I don't want consumers of the package to have to use that complete file when only using a component or two.

[nmn]

The process works exactly how @stylexjs/open-props works in the NextJS example. Here's the TLDR;

1. The consumers of your component library will need to setup StyleX in their own application. Even if they don't use StyleX directly.
2. Then styleX will compile any file, including within node_modules that uses StyleX and extract the relevant CSS.
3. The bundle generated for them will only include styles for the components they import.

So, don't worry, the consumers will only pay for what they use. And if they're using StyleX for their own projects, the costs for all the common CSS will be shared.

---

Some things to remember:

• You probably still want to run Autoprefixr on the generated CSS file if you're using new CSS features that need it.
• If you're defining a large number of CSS variables and expect your consumers to only use a few of them, a PostCSS (or LighteningCSS) plugin to remove unused variables might be helpful. We will take care of this automatically soon.

[simpel]

Then its all awesome! Thanks!

[olivierpascal]

2. Then styleX will compile any file, including within node_modules that uses StyleX and extract the relevant CSS.

Does it also work with Next.js? Is there any special considerations to make that works?

In short, my package (built with rollup) exports this:

import React from 'react';
import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  container: { border: '2px solid red' },
});

export const Test: React.FC = () => <div {...stylex.props(styles.container)}>Test</div>;

In the consumer (Next.js) app with stylex set up, I use it like this:

import React from 'react';
import { Test } from '@my/design-system';

const TestDemo: React.FC = () => <Test />;

export default TestDemo;

Everything else is styled, but the Test component is not styled.

---

Edit: I thought that the npm package should not pre-compile stylex, and let that work to the consumer app.

But this led to Error: stylex.create should never be called. It should be compiled away., which mean that stylex did not compile the file in node_modules.

[nmn]

Does it also work with Next.js? Is there any special considerations to make that works?

You need to configure Next to transpile the relevant packages with the transpilePackages option. See the NextJS example in the repo for an example.

Edit: I thought that the npm package should not pre-compile stylex, and let that work to the consumer app.

This is correct.

[olivierpascal]

I am using transpilePackages, with no luck. I will dig again into this tomorrow.

[nmn]

There is likely a build configuration issue. We are working on better Webpack and NextJS integration. If you are unable to solve this, you may have to wait a few weeks for a better solution.

[olivierpascal]

@nmn after digging a bit, I notice that the cause of the issue is that my package is compiled to:

import stylex from './node_modules/@stylexjs/stylex/lib/stylex.js';

If I manually change it to:

import * as stylex from '@stylexjs/stylex';

It seems to work.

[olivierpascal]

Ok, adding '@stylexjs/stylex' to external array in rollup config fixed this issue.

I am now facing another related issue #348