From 590ff76c2caac03a2847c67b80a5ba0376a03582 Mon Sep 17 00:00:00 2001
From: firefoxic <firefoxic.dev@gmail.com>
Date: Fri, 17 May 2024 13:16:28 -0700
Subject: [PATCH] Require alignment of grid area names (#2)

Resolves #1
---
 CHANGELOG.md                                  |   1 +
 stylelint.config.js                           |   7 ++
 test/@stylistic/named-grid-areas-alignment.js | 106 ++++++++++++++++++
 3 files changed, 114 insertions(+)
 create mode 100644 test/@stylistic/named-grid-areas-alignment.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4cd434..891e6ed 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/stylelint.config.js b/stylelint.config.js
index 940841e..da60e09 100644
--- a/stylelint.config.js
+++ b/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,
diff --git a/test/@stylistic/named-grid-areas-alignment.js b/test/@stylistic/named-grid-areas-alignment.js
new file mode 100644
index 0000000..8d244ad
--- /dev/null
+++ b/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})`,
+		},
+	],
+})