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

Co-authored-by: Shahana Salam <[email protected]>

Author: shahana308

.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

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: [

lib/rules/named-grid-areas-no-invalid/index.cjs

@@ -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 }>} */