Skip to main content

container-name-pattern

Specify a pattern for container names.

@container foo (width > 400px) {}
/**        ↑
 * The pattern of this */

Options​

string​

Specify a regex string not surrounded with "/".

Given:

{
  "container-name-pattern": "foo-.+"
}

The following patterns are considered problems:

@container foo {}
a { container-name: bar; }
a { container: baz / inline-size; }

The following patterns are not considered problems:

@container foo-bar {}
a { container-name: foo-bar; }
a { container: foo-baz / inline-size; }