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);
}

A leading -- is optional and will be trimmed. This can be useful if you want to keep the full variable name searchable in your codebase:

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

// The value of both variables is `"var(--opacity)"`
const opacityVar1 = createGlobalVar('opacity');
const opacityVar2 = createGlobalVar('--opacity');

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

@property rules

@property rules can also be created using createGlobalVar. CSS variables with @property rules are used in the same way as regular CSS variables:

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);
}