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.

The message secondary option can accept the arguments of 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);
}

camelCaseSvgKeywords: true | false (default: false)

If true, this rule expects SVG keywords to be camel case when the primary option is "lower".

For example with true:

The following pattern is not considered a problem:

a {
color: currentColor;
}

The following pattern is considered a problem:

a {
color: currentcolor;
}