Coverage similar to Griffel?

[paulm17]

Griffel is a similar package to Stylex however it's mainly clientside based.

I saw on the HN announcement that the two repo owners know each other (which is kinda cool tbh). Will StyleX have the same functionality coverage? Much like: https://griffel.js.org/react/api/make-styles

If it already does, does that mean you guys need more help covering the same use cases in the docs?

Thanks!

[nmn]

I'm not sure I understand what "same functionality coverage" means. StyleX already supports almost everything that Griffel supports. That said StyleX is stricter and provides more guarantees:

1. StyleX is always meant to be compiled. We don't believe in ever using runtime style injection.
2. We don't support complex selectors that do "style at a distance" and will never do.

[paulm17]

StyleX already supports almost everything that Griffel supports

Awesome, that's what I was looking for.

It's just that in the documents I didn't see things that Griffel was demonstrating. For example:

const useClasses = makeStyles({
  root: {
    ':global(html[data-whatintent="mouse"])': { backgroundColor: 'yellow' },
  },
});

I didn't see any data attribute examples and I think I tried but didn't get working. But it's probably my fault as I didn't have much time. This weekend, I'll be able to do a more thorough investigation with stylex.

[nmn]

That particular selector is not supported in StyleX. By design. As I mentioned:

We don't support complex selectors that do "style at a distance" and will never do.

We will support applying styles conditionally when say a parent element is :hovered. We're working on an API design for this right now.

We will never support applying styles to an element other than the one you're applying the styles to. A parent element will never apply styles to a child element or vice-versa. This is a Core Principle that is documented on the website.

StyleX is designed for a much higher level of consistency and guarantee when applying and merging styles, at the cost of some complex selectors and patterns.

[dd-jonas]

@nmn

We will support applying styles conditionally when say a parent element is :hovered. We're working on an API design for this right now.

Is there a way to do this at the moment or has this not yet been released? I can't find anything about it in the docs.

[nmn]

Currently there is a workaround to set the value of a variable on a parent and use its value on the child.

The official way to do positional selectors is not ready.