Fix named-grid-areas-no-invalid false positives for interpolated grid-template-areas in CSS-in-JS (#8606)

shahana308 · Shahana Salam · web-flow · commit b764c238dcda · 2025-06-19T09:07:45.000+01:00
Co-authored-by: Shahana Salam &lt;shahana.salam@cafu.com&gt;
diff --git a/.changeset/sour-spoons-cut.md b/.changeset/sour-spoons-cut.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `named-grid-areas-no-invalid` false positives for interpolated grid-template-areas in CSS-in-JS
diff --git a/lib/rules/named-grid-areas-no-invalid/__tests__/index.mjs b/lib/rules/named-grid-areas-no-invalid/__tests__/index.mjs
@@ -68,6 +68,11 @@ testRule({
 						"b c c" 40px / 1fr 1fr 1fr;
 				}`,
 		},
+		{
+			code: `a { grid-template-areas: ${({ $foo }) => ($foo === 'any string with different number of tokens than return values' ? 'a a a' : 'b b b')}; }`,
+			description:
+				'Skip non-standard values to fix false positive in named-grid-areas-no-invalid with styled-components',
+		},
 	],
 
 	reject: [
diff --git a/lib/rules/named-grid-areas-no-invalid/index.cjs b/lib/rules/named-grid-areas-no-invalid/index.cjs
diff --git a/lib/rules/named-grid-areas-no-invalid/index.mjs b/lib/rules/named-grid-areas-no-invalid/index.mjs
@@ -3,6 +3,7 @@ import valueParser from 'postcss-value-parser';
 import { assert } from '../../utils/validateTypes.mjs';
 import { declarationValueIndex } from '../../utils/nodeFieldIndices.mjs';
 import findNotContiguousOrRectangular from './utils/findNotContiguousOrRectangular.mjs';
+import isStandardSyntaxValue from '../../utils/isStandardSyntaxValue.mjs';
 import report from '../../utils/report.mjs';
 import ruleMessages from '../../utils/ruleMessages.mjs';
 import validateOptions from '../../utils/validateOptions.mjs';
@@ -31,6 +32,8 @@ const rule = (primary) => {
 		root.walkDecls(/^(?:grid|grid-template|grid-template-areas)$/i, (decl) => {
 			const { value } = decl;
 
+			if (!isStandardSyntaxValue(value)) return;
+
 			if (value.toLowerCase().trim() === 'none') return;
 
 			/** @type {Array<{ values: string[], index: number, endIndex: number }>} */

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"stylelint": patch
 +---
++
 +Fixed: `named-grid-areas-no-invalid` false positives for interpolated grid-template-areas in CSS-in-JS