Fix false positives regression in named-grid-areas-no-invalid

[ai]

What steps are needed to reproduce the bug?

$ pnpm add stylelint@14.8.0
$ echo "body { grid-template: 1fr / auto 1fr auto }" > test.css
$ echo '{ "rules": { "named-grid-areas-no-invalid": true } }' > .stylelintrc
$ pnpm stylelint test.css

test.css
 1:23  ✖  Expected same number of cell tokens in    named-grid-areas-no-invalid
          each string

What Stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "named-grid-areas-no-invalid": true
  }
}

How did you run Stylelint?

stylelint test.css

Which version of Stylelint are you using?

14.8.0

What did you expect to happen?

No error

What actually happened?

False positive error:

 1:23  ✖  Expected same number of cell tokens in    named-grid-areas-no-invalid
          each string

Does the bug relate to non-standard syntax?

No

Proposal to fix the bug

I saw this error just after update to 14.8 so it could be a regression

[ybiquitous]

@ai Thank you for reporting the issue and using the template. I can confirm the regression also on the demo.

I've labeled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to fix a bug in a rule in the Developer guide.

[ybiquitous]

The cause seems the change in PR #5983: 👀

https://github.com/stylelint/stylelint/pull/5983/files#diff-fb2387c00b7cdea515a799b21420dbf6725898783f743ae70f40e74fb4cdb6d8

b013ac0

[ybiquitous]

@jeddy3 Thanks for creating the quick fix #6042. I believe the fix is enough to suppress the regression. 👍🏼

---

I've looked into the real cause of the regression. See the change below of the isRectangular() utility.

Previous:

stylelint/lib/rules/named-grid-areas-no-invalid/utils/isRectangular.js

Lines 8 to 10 in 3fc7fa0

	function isRectangular(areas) {
	return areas.every((row, _i, arr) => row.length === arr[0].length);
	}

Current:

stylelint/lib/rules/named-grid-areas-no-invalid/utils/isRectangular.js

Lines 8 to 14 in 74b35b7

	function isRectangular(areas) {
	const firstArea = areas[0];
	if (firstArea === undefined) return false;
	return areas.every((row) => row.length === firstArea.length);
	}

When the area argument is an empty array,

• the previous version returned true
• the current version returns false instead

I was careless with the behavior of the Array.prototype.every() method. MDN says about the Array method:

every acts like the "for all" quantifier in mathematics. In particular, for an empty array, it returns true.

In summary, I believe the current behavior of isRectangular() and the #6042 change (that checks array.length before calling isRectangular) is reasonable.