Using stylex defined vars in global css

[meza]

Hey,

I'm trying to wrap my head around stylex and the only outstanding question I have is around global css questions.

I have an app level setup for some of the basic styles for things like headings, body, main, article, img, etc...
I understand that these are supposed to stay as vanilla html for now, although I wish I could define these in StyelX too.

So the question is

How do I deal with something like this?

form:invalid [type="submit"] {
  background-color: var(--colour-background-secondary);
  border: var(--border);
  box-shadow: none;
  color: var(--colour-text-secondary);
  cursor: not-allowed;
}

I would like to define my theme/variables purely in stylex so I could reuse them in all my components.
How can I make sure I can reuse them in the vanilla css parts too without having to duplicate them?

[predaytor]

The best thing here is to propagate the data-invalid state directly to the button component, that way you can keep your styles as close to the source as possible. Or create /form/vars.stylex.ts with stylex.defineVars in there and then reference those variables in your button component down the tree (form -> button) the way css variables work, similar to React.Context.

/form/vars.stylex.ts
/form/form.tsx
/form/index.ts

[meza]

The button is just an example, I could bring the h1,h2,h3 default settings or anything that shouldn't be a component because it has a native html element that is perfectly usable.

I guess the difference is in ideology. If I'd want to use stylex properly, I'd need to accept that I have to redefine native elements just to be able to style them with stylex...

[nonzzz]

Currently @stylexjs does not support defining global css. If you want define global css with stylex's variable, May be you can take a look example But this goes against the design of stylex.

[nmn]

This is a known issue that we're thinking about. Ideally, it would be possible to import CSS variable names from files just like JS files, but @import in CSS doesn't support doing that.

At the same time, we want to avoid exposing a JS API for global CSS.