value-keyword-case.md

Pattern: Inconsistent keyword value case

Issue: -

Description

Specify lowercase or uppercase for keywords values.

This rule ignores <custom-idents> of known properties. Values which are paired with non-properties (e.g. $vars and custom properties), and do not conform to the primary option, can be ignored using the ignoreValues: [] secondary option.

Examples

"lower"

The following patterns are considered violations:

a {
  display: Block;
}

a {
  display: bLoCk;
}

a {
  display: BLOCK;
}

a {
  transition: -WEBKIT-TRANSFORM 2s;
}

The following patterns are not considered violations:

a {
  display: block;
}

a {
  transition: -webkit-transform 2s;
}

"upper"

The following patterns are considered violations:

a {
  display: Block;
}

a {
  display: bLoCk;
}

a {
  display: block;
}

a {
  transition: -webkit-transform 2s;
}

The following patterns are not considered violations:

a {
  display: BLOCK;
}

a {
  transition: -WEBKIT-TRANSFORM 2s;
}

Configuration

ignoreKeywords: ["/regex/", "non-regex"]

Ignore case of keywords values.

For example, with "lower".

Given:

["Block", "/^(f|F)lex$/"]

The following patterns are considered violations:

a {
  display: bLoCk;
}

a {
  display: BLOCK;
}

a {
  display: fLeX;
}

a {
  display: FLEX;
}

The following patterns are not considered violations:

a {
  display: block;
}

a {
  display: Block;
}

a {
  display: flex;
}

a {
  display: Flex;
}

ignoreProperties: ["/regex/", "non-regex"]

Ignore case of the values of the listed properties.

For example, with "lower".

["/^(b|B)ackground$/", "display"]

The following patterns are considered violations:

a {
  text-align: LEFT;
}

a {
  text-align: Left;
}

The following patterns are not considered violations:

a {
  display: bloCk;
}

a {
  display: BloCk;
}

a {
  display: BLOCK;
}

a {
  display: block;
}

a {
  background: Red;
}

a {
  Background: deepPink;
}

Further Reading

• stylelint - value-keyword-case