Enable camelCaseSvgKeywords option for value-keyword-case

[rohm1]

What steps are needed to reproduce the bug?

* {
	text-rendering: optimizeLegibility;
}

What Stylelint configuration is needed to reproduce the bug?

{
  "extends": [
    "stylelint-config-standard"
  ]
}

How did you run Stylelint?

Demo website: https://stylelint.io/demo/#N4Igxg9gJgpiBcIBUACYAdAdugLjmAHjgLQBOMmspAlpgObwoQAOO1AttQF4wAyMdagCNqAG2o4AngG4sAXxAAaEADMxMAHIBDdnESEdzUTAB0YAM7ml4CJjV0EIDJhQp0IQvkrn3jANpYrq7u5lLG4pgkkHbUdMShWpRapFDugSgAuvLW0fYAYhCk7Fo4jgBW5rbWsMxWiM7BIKGS4bQ4vm4goiUwoe6K6SFhMBFRtvbxOIlQyakInd34fSDZckA

Which version of Stylelint or dependencies are you using?

latest

What did you expect to happen?

No problems to be reported

What actually happened?

Error: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)

Does the bug relate to non-standard syntax?

no

Proposal to fix the bug

Possibly related to stylelint/stylelint#6517

[ybiquitous]

@rohm1 Thanks for the report. But I believe this is not a bug. You can avoid the error by the camelCaseSvgKeywords option:

{
  "rules": {
    "value-keyword-case": ["lower", {"camelCaseSvgKeywords": true}]
  }
}

See also this demo.

[rohm1]

@ybiquitous thanks, but this is at least a default config bug. I should not have to configure anything for standard CSS properties and values.

[ybiquitous]

Make sense. Let's move this into the standard config repo and continue discussing.

Ref:

stylelint-config-standard/index.js

Line 111 in 5aa5dd5

'value-keyword-case': 'lower',

[ybiquitous]

Revisit old issues:

• value-keyword-case shouldn't throw an error for: optimizeSpeed, optimizeLegibility, geometricPrecision  stylelint#1089
• Add camelCaseSvgKeywords to value-keyword-case and set default to false stylelint#4884
• value-keyword-case for currentColor in non SVG CSS is breaking code stylelint#5863

[ybiquitous]

Just to confirm, are both valid, e.g., optimizeLegibility and optimizelegibility?

[rohm1]

Not sure, the specs make only mention of the camel case option (https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty). But both Firefox and Chrome seem to accept camel case and lowercase.

[ybiquitous]

Umm, if we enable camelCaseSvgKeywords, the following valid CSS using the currentcolor keyword will be reported:

a {
  color: currentcolor;
/*       ^ Expected "currentcolor" to be "currentColor"
 */
}

See this demo.

What do you think?

[rohm1]

Looks like this is wrong: https://github.com/stylelint/stylelint/blob/main/lib/reference/keywords.js#L265 currentcolor is expected to be camel case but the spec you mention states lowercase.

[ybiquitous]

Does the SVG spec support currentColor, right?

[rohm1]

The link you provided is CSS Color Module Level 4 (https://www.w3.org/TR/css-color-4/#currentcolor-color), keyword is only mentioned in lowercase.
In CSS Color Module Level 3 (https://www.w3.org/TR/css-color-3/#currentcolor) keyword is written in camel case, and references SVG 1.0 specifications which also use camel case.
Finaly, SVG2 draft also mentions the keyword in camel case: https://svgwg.org/svg2-draft/painting.html#ColorProperty.

To summarize:

• CSS3, SVG1 and SVG2: currentColor
• CSS4: currentcolor

[ybiquitous]

Umm..., it seems we cannot enable camelCaseSvgKeywords until fixing the problem. 🤔

[Mouvedia]

The CSS color 4 tests are all using currentColor:

https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-001.html
https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-002.html
https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-003.html

[nschonni]

I came across this issue, and trying to trace down any upstream issue I found w3c/csswg-drafts#4599
which points over that the values are case insensitive https://drafts.csswg.org/css-values-4/#keywords, so fixing them to the camelCase should be safe