How to use nested selectors for children?

[itsjavi]

I know that with vanilla-extract it is not possible to use child element selectors when defining the styles, e.g.:

export const myList = style({
  position: 'relative',
  display: 'block',
  listStyle: 'none',
  color: 'inherit',
  '> li': {
     padding: '1rem',
  }
})

Is it possible to accomplish something like this in macaron or does it have the same limitation?

Having to write a separate style for each child selector is IMHO a lot of boilerplate & an overkill, and it defeats the purpose of cascade style sheets.

[theMosaad]

Macaron is 100% Vanilla-Extract's API. Only thing Macaron adds is static extraction. So, this won't be possible unless Macaron diverges away from Vanilla-Extract which I don't see a big motive for.

[Mokshit06]

Hey @itsjavi, yeah macaron doesn't support this right now. I looked into adding this on top of vanilla-extract, but it complicated the types and implementation quite a bit, as it would also need to set this up for nested selectors etc.