container-name-pattern

Specify a pattern for container names.

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

The message secondary option can accept the arguments of this rule.

Options

regex|string

A string will be translated into a RegExp like so new RegExp(yourString) — so be sure to escape properly.

Given the string:

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