fix no-invalid-position-declaration false positives for embedded st…

…yles
stylelint · jeddy3 · Aug 7, 2025 · Aug 1, 2025 · Aug 2, 2025 · Aug 3, 2025
commit d04247dc92a208ff4e696d0c34b65c5ff935052d
diff --git a/.changeset/yummy-streets-cheat.md b/.changeset/yummy-streets-cheat.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `no-invalid-position-declaration` skipped in HTML style attributes
diff --git a/lib/rules/no-invalid-position-declaration/__tests__/index.mjs b/lib/rules/no-invalid-position-declaration/__tests__/index.mjs
@@ -316,3 +316,41 @@ testRule({
 		},
 	],
 });
+
+testRule({
+	ruleName,
+	config: true,
+	customSyntax: 'postcss-html',
+
+	accept: [
+		{
+			code: '<a style="color: red"></a>',
+			description: 'HTML style attribute',
+		},
+		{
+			code: '<div style="--custom-property: blue; color: red;"></div>',
+			description: 'HTML style attribute with custom property',
+		},
+		{
+			code: '<span style="font-size: 14px; margin: 10px;"></span>',
+			description: 'HTML style attribute with multiple properties',
+		},
+	],
+});
+
+testRule({
+	ruleName,
+	config: true,
+	customSyntax: 'postcss-styled-syntax',
+
+	accept: [
+		{
+			code: 'const foo = styled.a`color: red;`',
+			description: 'CSS-in-JS template literal',
+		},
+		{
+			code: 'const bar = styled.div`--custom: blue; font-size: 16px;`',
+			description: 'CSS-in-JS with custom property',
+		},
+	],
+});
diff --git a/lib/rules/no-invalid-position-declaration/index.cjs b/lib/rules/no-invalid-position-declaration/index.cjs
diff --git a/lib/rules/no-invalid-position-declaration/index.mjs b/lib/rules/no-invalid-position-declaration/index.mjs
@@ -1,4 +1,4 @@
-import { isAtRule, isRule } from '../../utils/typeGuards.mjs';
+import { isAtRule, isInDocument, isRule } from '../../utils/typeGuards.mjs';
 import findNodeUpToRoot from '../../utils/findNodeUpToRoot.mjs';
 import isStandardSyntaxDeclaration from '../../utils/isStandardSyntaxDeclaration.mjs';
 import { nestingSupportedAtKeywords } from '../../reference/atKeywords.mjs';
@@ -24,6 +24,9 @@ const rule = (primary) => {
 		if (!validOptions) return;
 
 		root.walkDecls((decl) => {
+			// Skip checking declarations in embedded styles
+			if (isInDocument(decl)) return;
+
 			if (!isStandardSyntaxDeclaration(decl)) return;
 
 			const { parent } = decl;
@@ -41,9 +44,7 @@ const rule = (primary) => {
 					const parentRule = findNodeUpToRoot(decl, ({ type }) => type === 'rule');
 
 					if (parentRule) return;
-				} else {
-					return;
-				}
+				} else return;
 			}
 
 			report({

diff --git a/lib/utils/typeGuards.cjs b/lib/utils/typeGuards.cjs
diff --git a/lib/utils/typeGuards.mjs b/lib/utils/typeGuards.mjs
@@ -49,6 +49,33 @@ export function isDocument(node) {
 	return node.type === 'document';
 }
 
+/**
+ * @param {import('postcss').Node | undefined} node
+ * @returns {boolean}
+ */
+export function isInDocument(node) {
+	let current = node;
+
+	while (current) {
+		if (isDocument(current)) {
+			return true;
+		}
+
+		// Check if current node has a document property
+		if (
+			'document' in current &&
+			current.document &&
+			isDocument(/** @type {import('postcss').Document} */ (current.document))
+		) {
+			return true;
+		}
+
+		current = current.parent;
+	}
+
+	return false;
+}
+
 /**
  * @param {import('postcss-value-parser').Node} node
  * @returns {node is import('postcss-value-parser').DivNode}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -211,6 +211,7 @@
     "postcss-less": "^6.0.0",
     "postcss-sass": "^0.5.0",
     "postcss-scss": "^4.0.9",
+    "postcss-styled-syntax": "^0.7.1",
     "prettier": "^3.6.2",
     "remark-cli": "^12.0.1",
     "rollup": "^4.46.0",