Fix autofix for variable name matching property name

[guoyunhe]

Clearly describe the bug

In React JSX/TSX files, the stylelint plugin try to auto fix variable casing in the style property. But this will cause the code not working.

What code is needed to reproduce this issue?

e.g.

// Container.jsx
import React from 'react';

export default function Container({maxWidth, children}) {
  return <div style={{ maxWidth: maxWidth + 10 }}>{children}</div>
}

What vscode-stylelint configuration is needed to reproduce the bug?

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
}

Is this issue related to autofix? (editor.codeActionsOnSave)

Yes

Which version of vscode-stylelint are you using?

0.84.0

Which version of stylelint are you using?

13.2.0

Does your issue relate to non-standard syntax (e.g. SCSS, nesting, etc.)?

It is related to JSX

What did you expect to happen?

The code is valid and should not be touched.

What actually happened (e.g. what warnings or errors you are getting)?

The code is changed, maxWidth --> maxwidth, and thus not working anymore.

[jeddy3]

@guoyunhe Thanks for the report and for using the template.

I've transferred your issue because the problem is in stylelint itself, rather than the VS Code extension.

The underlying problem is likely with the parser stylelint uses to support CSS-in-JS. I've added this issue to #4574, which is a growing list of the problems with the syntax that we need help to fix.

Please consider contributing to the parser if you have time.

[rbong]

The parser is not the issue. The parser interprets the expression appropriately and does not turn it into lowercase when stringifying the parsed expression. The issue is with the value-keyword-case rule, which transforms parts of expressions even if they are not string literals.

[rbong]

This appears to come down to the exact same issue described here: #5185 (comment)

This is probably a duplicate of that issue, I don't believe it's related to the "variable name matching property name" as indicated in the title. Using another property name results in the same issue:

return <div style={{ minWidth: maxWidth + 10 }}>{children}</div>

[jeddy3]

Closing as the syntax option was removed for the 14.0.0 release. (See the migration guide.)

We'll also be deprecating our forked CSS-in-JS package, in favour of leaner custom syntaxes.

Please consider writing a custom syntax specific to the CSS-in-JS library in this issue and fixing the bug there.