globalStyle support nesting

[Dan503]

I would really like to be able to do this:

globalStyle('button', {
	backgroundColor: 'black',
	color: 'white'
	'&:hover': {
		backgroundColor: 'white',
		color: 'black'
	}
});

but I get the error:

''&:hover'' does not exist in type 'GlobalStyleRule'

[mattcompiles]

Hey Bud. This is something we've chatted about in theory but don't support for now. My main issues with it are as follows:

• Simple cases are easy enough, but you can pass any selector you like to globalStyle and we'd need a way to merge the styles together. It's probably doable but it's not a simple addition. e.g.

globalStyle('.someClass button, .someOtherClass:not(button):active', {
	backgroundColor: 'black',
	color: 'white'
	':hover': {
		backgroundColor: 'white',
		color: 'black'
	}
});

• globalStyle is a good escape hatch but it's not the suggested API for most use-cases. I think you lose a lot of what is good about vanilla-extract if you use it exclusively. So hopefully its use is minimal enough that this doesn't become a huge issue.

[marcingajdatsh]

A temporary workaround for this is to create a second global style:

globalStyle('a', {
  color: 'blue',
});

globalStyle('a:hover', {
  color: 'lightblue',
});

[ubmit]

A temporary workaround for this is to create a second global style:

globalStyle('a', {
  color: 'blue',
});

globalStyle('a:hover', {
  color: 'lightblue',
});

Thanks for the workaround 🙏

[debitan]

Thanks. Migrating from a CSS Modules that has some nested global styles like this and good to be able to move them across to vanilla-extract for the time being.

[sami616]

Would be such a great addition to be able to use the selectors property here, i know that globalStyle isn't recommended for normal usage but it's often very necessary as an escape hatch for styling third party components. 👍🏼👍🏼👍🏼👍🏼

ie

globalStyle('a', {
  color: 'blue',
  selectors: { '&:hover': { color: 'red' } },
});

[Dan503]

It doesn't really solve the problem that mattcompiles talks about in this comment:
#174 (comment)

Also I would prefer writing just &:hover rather than selectors: { '&:hover': { } }

[sami616]

Fair. I'm quite enjoying the selectors property tbh. Using it forces me to keep all my selectors for an element together. Why not have both options? Would make the api more consistent with 'style'