Vanilla Extract's globalStyle
function is intended to style global selectors. One of its limitations is that it doesn't support SASS-like nested selectors. The selector passed to the first argument is as deep as the selector can go.
// ✅ Good!
globalStyle('.foo', {
color: 'blue',
});
// ❌ No bueno
globalStyle('.foo', {
color: 'blue',
p: {
color: 'red'
}
});
This little function wraps the globalStyle
utility to support nested selectors. It also supports referencing the parent selector with &
, though it hasn't been thoroughly tested for more complex selectors.
nestedGlobalStyle('.foo', {
color: 'blue',
'li, p': {
color: 'red',
'&:hover': {
color: 'yellow',
}
},
'&::after': {
margin: '23px'
}
})
// .foo { color: blue; }
// .foo li, .foo p { color: red; }
// .foo li:hover, .foo p:hover { color: yellow; }
// .foo::after { margin: 23px; }