Require alignment of grid area names

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com), and 
 ### Changed
 
 - The custom media queries should now be defined within the same source.
+- The grid area names in the `grid-template-areas` property values should now be aligned.
 
 ### Fixed
 

stylelint.config.js

@@ -156,6 +156,13 @@ export default {
 		"@stylistic/media-query-list-comma-newline-before": `never-multi-line`,
 		"@stylistic/media-query-list-comma-space-after": `always-single-line`,
 		"@stylistic/media-query-list-comma-space-before": `never-single-line`,
+		"@stylistic/named-grid-areas-alignment": [
+			true,
+			{
+				gap: 2,
+				alignQuotes: true,
+			},
+		],
 		"@stylistic/no-eol-whitespace": true,
 		"@stylistic/no-extra-semicolons": true,
 		"@stylistic/no-missing-end-of-source-newline": true,

test/@stylistic/named-grid-areas-alignment.js

@@ -0,0 +1,106 @@
+import { testRule } from "../../utils/testRule.js"
+
+let plugin = {
+	name: `@stylistic/stylelint-plugin`,
+	prefix: `@stylistic/`,
+}
+
+let rule = `${plugin.prefix}named-grid-areas-alignment`
+
+let code = `
+.valid {
+	grid-template-areas:
+		"a         a       "
+		"foo       foo     "
+		"long-one  long-one";
+}
+
+.invalid-1 {
+	grid-template-areas:
+		"a a"
+		"foo foo"
+		"long-one long-one";
+}
+
+.invalid-2 {
+	grid-template-areas:
+		"a        a       "
+		"foo      foo     "
+		"long-one long-one";
+}
+
+.invalid-3 {
+	grid-template-areas:
+		"a         a"
+		"foo       foo"
+		"long-one  long-one";
+}
+
+.invalid-4 {
+	grid-template-areas:
+		"a          a       "
+		"foo        foo     "
+		"long-one   long-one";
+}
+
+.invalid-5 {
+	grid-template-areas:
+		"a  a              "
+		"foo  foo          "
+		"long-one  long-one";
+}
+`
+
+testRule({
+	description: `Grid template areas should be aligned`,
+	rule,
+	plugin,
+	code,
+	expectedWarnings: [
+		{
+			line: 11,
+			column: 3,
+			endLine: 13,
+			endColumn: 22,
+			rule,
+			severity: `error`,
+			text: `Expected \`grid-template-areas\` value to be aligned (${rule})`,
+		},
+		{
+			line: 18,
+			column: 3,
+			endLine: 20,
+			endColumn: 22,
+			rule,
+			severity: `error`,
+			text: `Expected \`grid-template-areas\` value to be aligned (${rule})`,
+		},
+		{
+			line: 25,
+			column: 3,
+			endLine: 27,
+			endColumn: 23,
+			rule,
+			severity: `error`,
+			text: `Expected \`grid-template-areas\` value to be aligned (${rule})`,
+		},
+		{
+			line: 32,
+			column: 3,
+			endLine: 34,
+			endColumn: 24,
+			rule,
+			severity: `error`,
+			text: `Expected \`grid-template-areas\` value to be aligned (${rule})`,
+		},
+		{
+			line: 39,
+			column: 3,
+			endLine: 41,
+			endColumn: 23,
+			rule,
+			severity: `error`,
+			text: `Expected \`grid-template-areas\` value to be aligned (${rule})`,
+		},
+	],
+})