createGlobalVar

Similar to createVar, createGlobalVar creates a global CSS variable reference:

vars.css.ts
import {
  createGlobalVar,
  style
} from '@vanilla-extract/css';

const opacityVar = createGlobalVar('opacity');

export const content = style({
  opacity: opacityVar
});
CSS
.vars_content__l19d8b0 {
  opacity: var(--opacity);
}

@property rules can also be created using createGlobalVar:

vars.css.ts
import {
  createGlobalVar,
  style
} from '@vanilla-extract/css';

const opacityVar = createGlobalVar('opacity', {
  syntax: '<number>',
  inherits: false,
  initialValue: '0.5'
});

export const content = style({
  opacity: opacityVar
});
CSS
@property --opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.5;
}
.vars_content__l19d8b0 {
  opacity: var(--opacity);
}