Require a specific class format

Rule ID:: class-pattern
Category:: Style
Standards:: -

Requires all classes to match a given pattern.

Rule details

Examples of incorrect code for this rule:

<div class="fooBar"></foobar>

error: class "fooBar" does not match the configured pattern "kebabcase" (class-pattern) at inline:1:13:
> 1 | <div class="fooBar"></foobar>
    |             ^^^^^^


1 error found.

Examples of correct code for this rule:

<div class="foo-bar"></div>

Options

This rule takes an optional object:

{
  "pattern": "kebabcase"
}

Pattern

type: string | string[]
default: "kebabcase"

Either one of the presets or a custom regular expression.

"kebabcase" matches lowercase letters, digits and hyphen (e.g. kebab-case)) (default)
"camelcase" matches lowercase letter followed by letters and digits (e.g. camelCase)
"snakecase" matches lowercase letters, digits and underscore (e.g. snake_case)
"bem" matches BEM naming convention (e.g. block__elem--modifier)
"tailwind" matches Tailwind CSS classes

Multiple patterns can be set as an array. If value matches either of the patterns it is considered valid.

Version history

10.6.0 - Support tailwind pattern.
8.18.0 - Support snakecase (previously underscore) and bem.
8.17.0 - Support multiple patterns.