globalStyle

Creates styles attached to a global selector.

Requires a selector string as the first parameter, followed by a style object.

import { globalStyle } from '@vanilla-extract/css';  globalStyle('html, body', {  margin: 0 });

html, body {  margin: 0; }

🧠  The global style object cannot use simple pseudo or complex selectors. This avoids unexpected results when merging with the global selector, e.g. ul li:first-child, a > span.

Global selectors can also contain references to other scoped class names.

import { style, globalStyle } from '@vanilla-extract/css';  export const parentClass = style({});  globalStyle(`${parentClass} > a`, {  color: 'pink' });

.app_parentClass__sznanj0 > a {  color: pink; }