Skip to main content

value-keyword-case

Specify lowercase or uppercase for keywords values.

    a { display: block; }/**              ↑ *    These values */

This rule ignores <custom-idents> of known properties. Keyword 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 ignoreKeywords: [] secondary option.

The fix option can automatically fix all of the problems reported by this rule.

Options#

string: "lower"|"upper"

"lower"#

The following patterns are considered problems:

a {  display: Block;}
a {  display: bLoCk;}
a {  display: BLOCK;}
a {  transition: -WEBKIT-TRANSFORM 2s;}

The following patterns are not considered problems:

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

"upper"#

The following patterns are considered problems:

a {  display: Block;}
a {  display: bLoCk;}
a {  display: block;}
a {  transition: -webkit-transform 2s;}

The following patterns are not considered problems:

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

Optional secondary options#

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

Ignore case of keywords values.

For example, with "lower".

Given:

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

The following patterns are considered problems:

a {  display: bLoCk;}
a {  display: BLOCK;}
a {  display: fLeX;}
a {  display: FLEX;}

The following patterns are not considered problems:

a {  display: block;}
a {  display: Block;}
a {  display: flex;}
a {  display: Flex;}

ignoreProperties: ["/regex/", /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 problems:

a {  text-align: LEFT;}
a {  text-align: Left;}

The following patterns are not considered problems:

a {  display: bloCk;}
a {  display: BloCk;}
a {  display: BLOCK;}
a {  display: block;}
a {  background: Red;}
a {  Background: deepPink;}

ignoreFunctions: ["/regex/", /regex/, "non-regex"]#

Ignore case of the values inside the listed functions.

For example, with "upper".

["/^(f|F)oo$/", "t"];

The following patterns are considered problems:

a {  display: b(inline);}
a {  color: bar(--camelCase);}

The following patterns are not considered problems:

a {  display: t(flex);}
a {  display: t(fLeX);}
a {  color: t(--camelCase);}
a {  color: foo(--camelCase);}
a {  color: Foo(--camelCase);}