Fix declaration-block-no-redundant-longhand-properties autofix for …

…`grid-template` with `repeat()` (#7230)

Closes #7228.

Added the test case from the issue + the swapped version with `rows` instead of `columns`.

Are we interested in making a `repeat` parser? I could add it to my personal backlog (though this would probably be after the ESM migration, etc.). I'm also not sure what existing tooling is here (maybe there's some existing csstools/postcss/other parser that we can use)?

---------

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

.changeset/tricky-horses-watch.md

@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `declaration-block-no-redundant-longhand-properties` autofix for `grid-template` with `repeat()`

lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.mjs

@@ -373,6 +373,20 @@ testRule({
 			description: 'explicit scroll-padding test',
 			message: messages.expected('scroll-padding'),
 		},
+		{
+			code: 'a { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; grid-template-areas: "left center right"; }',
+			unfixable: true,
+			description:
+				'the repeat() notation has non-trivial semantics and is currently not fixable (columns)',
+			message: messages.expected('grid-template'),
+		},
+		{
+			code: 'a { grid-template-columns: auto; grid-template-rows: repeat(3, 1fr); grid-template-areas: "left center right"; }',
+			unfixable: true,
+			description:
+				'the repeat() notation has non-trivial semantics and is currently not fixable (rows)',
+			message: messages.expected('grid-template'),
+		},
 	],
 });
 

lib/rules/declaration-block-no-redundant-longhand-properties/index.js

@@ -96,6 +96,12 @@ const customResolvers = new Map([
 
 			if (!(areas && columns && rows)) return;
 
+			// repeat() is not allowed inside track listings for grid-template.
+			// related issue: https://github.com/stylelint/stylelint/issues/7228
+			// spec ref: https://drafts.csswg.org/css-grid/#explicit-grid-shorthand
+
+			if (columns.includes('repeat(') || rows.includes('repeat(')) return;
+
 			const splitAreas = [...areas.matchAll(/"[^"]+"/g)].map((x) => x[0]);
 			const splitRows = rows.split(' ');