createContainer

Creates a single scoped container name for use with CSS Container Queries. This avoids potential naming collisions with other containers.

🚧 Ensure your target browsers support container queries. Vanilla-extract supports the container query syntax but does not polyfill the feature in unsupported browsers.

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

export const sidebarContainer = createContainer();

export const sidebar = style({
  containerName: sidebarContainer,
  containerType: 'inline-size'
});

// navigation.css.ts
import {
  style,
  createContainer
} from '@vanilla-extract/css';
import { sidebarContainer } from './sidebar.css.ts';

export const navigation = style({
  '@container': {
    [`${sidebarContainer} (min-width: 400px)`]: {
      display: 'flex'
    }
  }
});