A good way to write complex css + compose local styles would be nice.

[pnegahdar]

Describe the feature request

Right now it seems impossible to use vars within more complex css you might need. I regularly find myself working around limited css selector access.

Would be ergonomically nice if the following things existed:

1) stylex.props() can take additional classnames and styles to merge them together, though I may have missed something. I wrote a function to do this and found out that breaks things pretty bad. Classname at least should be relative common for selector workaround in importing css modules to supplement.

2) Perhaps allowing compile time string template css that gets transformed to the right thing. e.g.

const someComplexCss = `
   li:nth-child(4) > p {
         color: ${theme.textHighLight}
    }
`

And someComplexCss becomes a StyleXProp I can use.

[nmn]

We will never support complex CSS selectors. It defeats the purpose of atomic CSS and can become a vector for bloated CSS. Apply styles conditionally instead.

We have RFC open for specific parent / sibling selector based styling. This RFC is only for conditionally applying styles on a child when a parent is hovered for example. Please comment on that RFC.