Use CSS files for Global styles

[michaldromi]

Is it possible to create global styles with stylex so I can have reset styles? (similar to createGlobalStyle in styled-components).

[nmn]

Use a CSS file for this. StyleX is encapsulated component styles only. And global styles should never be shared with components, as they break encapsulation.

[michaldromi]

Thanks, that makes sense, but it doesn't allow the use of theme variables in global styles (e.g. having all links in the color of the light/dark theme)

[steida]

@nmn Does Facebook use some global styles or reset or both? Thank you

[nmn]

We use something on the lines of a reset, for newer UIs. We also happen to use raw CSS variables which work as strings within StyleX as the theming APIs were created earlier this year.

[edamascus]

This issue has been discussed a couple of times before. From what I understand this library was originally developed for Meta apps, which are based on components. So, the way of thinking -as far as I understand- is that all styles should be declared or overridden at a component scope.

From my short experience so far, this works very well... until you want to set styles for commonly used elements like <p>, <h1>, <a>.

For example, you need to tell every <a> element to inherit the font-family value and this can be achieved in a globals.css file once. However, in case you want to set the font-size of <h1> and the color of <a> and the line-height of <p> to be the same as the applied theme variables, you have two options:

1. Copy the variable value to the globals.css file.
2. Create a component for those elements like <A> and <H1> and <P> and consume those variables.

I find option 2 to be a bit too much, especially when those elements may be retrieved from an API (text editor). On the other hand, option 1 is not a complete disaster; but in case you make a change to your design system you have to remember to update those values in the globals.css file.

I assume in facbook.com everything is a component but there is also some global styles like fonts.

[nmn]

This is spot on. Internally, our architecture uses 2, where we use component for all elements.

Using StyleX variables within global styles isn't something we considered and are thinking about possible solutions for it.
Specifically, we are focussed on making the generated CSS variable names stable and readable so you can use them in your global CSS.

As long as you're not using StyleX within third-party packages with pnpm, the variable names are already stable based on file-path, constName and key. You can find the variable name in the generated CSS file and use it. The process will get better in the future.