Question: themes and components

[edamascus]

First, I find StyleX very attractive due to its simplicity and clear principles. I have a question related to Modularity and composability and Applying Themes.

I am trying to integrate StyleX into a React components library. The library will have StyleX variables for theme properties like colors, fonts, spacing, sizes...etc. Components will also be able to receive additional StyleX styles as props.

When a component is imported in another project (or used within the library) the concept of overriding/merging styles via props is clear. However, in the documentation it is mentioned that "themes can be passed around across files or components". How can I pass a theme as a prop to a component, what is the theme type or do I have to pass the theme name instead? Should I be able to create a theme in the consumer project based on the theme variables defined in the library and pass it somehow to the component?

In the documentation it is also mentioned that when applying a theme, variables will be overridden for the element and all its descendants. Will this "overriding" work for descendant which are react components without a "theme provider"?

[nmn]

A theme can be passed around exactly like styles.

what is the theme type...

The type for a theme is Theme.

Assuming you have a VarGroup called colors, a theme for that varGroup has the type Theme<typeof colors>.

...or do I have to pass the theme name instead?

You pass the reference to theme. There are no "names" or magic strings in StyleX. Everything works by reference.

Should I be able to create a theme in the consumer project based on the theme variables defined in the library and pass it somehow to the component?

Yes, a consumer can import varGroup objects, create their own themes and pass them in where a Theme<typeof varGroup> is expected.

Will this "overriding" work for descendant which are react components without a "theme provider"?

I'm not completely sure what this means but when a theme is applied on an HTML element, that element and all descendent elements will have that theme applied. I.e the values of the varGroup overridden by that theme will take the overridden values within that sub-tree. This is just how CSS variables work.

A Theme is simply a single class that sets variables to values.

---

Hope that answers all your questions?

[nmn]

stylex.create can be used in any file. If you see the docs you'll see that the .stylex.ts extension is specifically for stylex.defineVars calls and nothing else.

What you're describing should work as long as the output from tsc leaves the stylex import statements untouched. Also, depending on the bundler you're using, you may need to ensure that the stylex compiler for the app is correctly compiling the library.

For example, nextjs ignores all node_modules by default, and you have to manually configure it to compile certain packages.

[peter-85]

@edamascus great question and topic. I am also trying to do the same UI components library with stylex and tokens which can be reused in a consumer project and overwrite a component from the UI library.
However I have the folowing issue. In your example if the Toast is after build(taken from the dist folder) the theme you are passing in the div is not taken into account(in my case), while if I use the raw Button(taken from the src folder) from the library the theme is applied,
How do you export the components in you library, so the example below is working and <Toast> component is styled according to theme in the outer div?

import { Toast } from library-with-stylex;

// ... other component code

<div {...stylex.props(theme)}>
  <h1 {...stylex.props(styles.base)}>this is a header</h1>
  <Toast
    show={true}
    format="success"
    text="this is text"
  />
</div>;

[edamascus]

@peter-85, in order for this to work, my approach is to export tokens and components in package.json without compiling to a dist folder as follows:

  "module": "./src/index.ts",
  "exports": {
    ".": "./src/index.ts",
    "./tokens.stylex": "./src/theme/tokens.stylex.ts",
    "./themeables.stylex": "./src/theme/themeables.stylex.ts",
    "./breakpoints.stylex": "./src/theme/breakpoints.ts"
  },

The index.ts file includes for example:

export { default as Toast } from './Toast';

The Toast folder, includes two files:

1. index.ts:

export { default } from './Toast';

2. Toast.tsx, which is the actual component. This component consumes the tokens and themes locally and those value can be overridden by the consumer library.

I hope this helps!

[peter-85]

@edamascus Thank you for the quick response and for the help. Yes, it seems that if the components are bundled for production theme cannot be overriden. They should be exported and used in the way that you show above and then the consumer of the component can override with theme tokens used in the desired component.
I guess the consumer project with budle properly the imported component.
So in your package.json of the component library you do not have build command in the scripts, right?

[edamascus]

@peter-85, yes right. The build process takes place at the consumer side only.