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.

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

export const sidebarContainer = createContainer();

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

.sidebar_sidebar__1xig7mo1 {
  container-name: sidebar_sidebarContainer__1xig7mo0;
  container-type: inline-size;
}