globalStyle

Creates styles attached to a global selector.

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

// app.css.ts

import { globalStyle } from '@vanilla-extract/css';

globalStyle('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.

// app.css.ts

import { style, globalStyle } from '@vanilla-extract/css';

export const parentClass = style({});

globalStyle(`${parentClass} > a`, {
  color: 'pink'
});