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})`, + }, + ], +})