Bug: key-spacing change has broken alignment of single-line and multi-line keys when mixed

[pdl]

Environment

Node version: v16.13.2
npm version: v8.3.2
Local ESLint version: Not found
Global ESLint version: Not found
Operating System: linux 4.15.0-194-generic

NB: $ yarn -s eslint --version returns v8.29.0.

What parser are you using?

(Initially noticed with an environment which I think uses) vue-eslint-parser (but reproduced as below).

What did you do?

In ESLint demo, paste the following, or use this link:

/* eslint key-spacing: [ "error", {"singleLine" : { "beforeColon": false, "afterColon": true }, "multiLine" : { "beforeColon": false, "afterColon": true }, "align" : { "beforeColon": true, "afterColon": true, "on": "colon" } }] */

// I use the rules above to line up my colons

// Lining these up used to be ok
const a = {
  item       : 123,
  longerItem : (
    1 + 1
  ),
};

// This is still fine
const b = {
  item       : 123,
  longerItem : 456,
};

// No, I specifically don't want this style, it used to be an error, I want my colons to align
const c = {
  item: 123,
  longerItem: (
    1 + 1
  ),
};

// these lines just to get rid of output about a, b, c being unused
a.item++;
b.item++;
c.item++;

What did you expect to happen?

The first two const assignments to a and b should have no error and c should raise an error, fixable to become like a.

What actually happened?

Errors are reported in case a, not c. ESLint will attempt to 'correct' to c.

Error
7:7
Extra space after key 'item'.  ([key-spacing](https://eslint.org/docs/rules/key-spacing))

Error
8:13
Extra space after key 'longerItem'.  ([key-spacing](https://eslint.org/docs/rules/key-spacing))

Participation

• I am willing to submit a pull request for this issue.

Additional comments

I assume it was broken by #16532.

[pdl]

@fasttime could you confirm whether this was an intentional outcome of your change?

[mdjermanovic]

Looks like a bug to me. Marked accepted.

// No, I specifically don't want this style, it used to be an error, I want my colons to align
const c = {
  item: 123,
  longerItem: (
    1 + 1
  ),
};

This is because the parentheses are not considered to be part of Property#value, so it starts on a separate line. We can fix this by getting the first token after : and then using its line instead of the property value's line.

[fasttime]

@pdl This was not intentional. I did not consider that property values wrapped in parentheses would not align correctly after my change, although it's obvious in afterthought. My apologies for the slip!
The fix suggested by @mdjermanovic should solve it already. I would be happy to do a PR.

[mdjermanovic]

PR is welcome!