Fix media-feature-range-notation autofix for exact values (#8651)

romainmenke · web-flow · commit 3ad2c4417e33 · 2025-07-02T17:13:27.000+02:00
diff --git a/.changeset/brown-hotels-notice.md b/.changeset/brown-hotels-notice.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `media-feature-range-notation` autofix for exact values
diff --git a/lib/rules/media-feature-range-notation/__tests__/index.mjs b/lib/rules/media-feature-range-notation/__tests__/index.mjs
@@ -112,13 +112,15 @@ testRule({
 		{
 			code: stripIndent`
 				@media (min-width: 1px)
-				  and (max-width: 2px) {}
+				  and (max-width: 2px)
+				  and (width: 3px) {}
 			`,
 			fixed: stripIndent`
 				@media (width >= 1px)
-				  and (width <= 2px) {}
+				  and (width <= 2px)
+				  and (width = 3px) {}
 			`,
-			description: 'two range type media features in prefix notation',
+			description: 'three range type media features in prefix notation',
 			warnings: [
 				{
 					message: messages.expected('context'),
@@ -136,6 +138,14 @@ testRule({
 					endColumn: 23,
 					fix: undefined,
 				},
+				{
+					message: messages.expected('context'),
+					line: 3,
+					column: 7,
+					endLine: 3,
+					endColumn: 19,
+					fix: undefined,
+				},
 			],
 		},
 	],
diff --git a/lib/rules/media-feature-range-notation/index.cjs b/lib/rules/media-feature-range-notation/index.cjs
diff --git a/lib/rules/media-feature-range-notation/index.mjs b/lib/rules/media-feature-range-notation/index.mjs
@@ -28,6 +28,8 @@ const meta = {
 	fixable: true,
 };
 
+/** @import {TokenDelim} from '@csstools/css-tokenizer' */
+
 /** @type {import('stylelint').CoreRules[ruleName]} */
 const rule = (primary) => {
 	return (root, result) => {
@@ -67,10 +69,22 @@ const rule = (primary) => {
 					 * @param {import('@csstools/media-query-list-parser').MediaFeature} entry.parent
 					 */
 					const contextFixer = (entry) => () => {
-						/** @type {import('@csstools/css-tokenizer').TokenDelim} */
-						const operator = /^min-/i.test(featureName)
-							? [TokenType.Delim, '>', -1, -1, { value: '>' }]
-							: [TokenType.Delim, '<', -1, -1, { value: '<' }];
+						/** @type {[TokenDelim]|[TokenDelim, TokenDelim]} */
+						let operator;
+
+						if (/^min-/i.test(featureName)) {
+							operator = [
+								[TokenType.Delim, '>', -1, -1, { value: '>' }],
+								[TokenType.Delim, '=', -1, -1, { value: '=' }],
+							];
+						} else if (/^max-/i.test(featureName)) {
+							operator = [
+								[TokenType.Delim, '<', -1, -1, { value: '<' }],
+								[TokenType.Delim, '=', -1, -1, { value: '=' }],
+							];
+						} else {
+							operator = [[TokenType.Delim, '=', -1, -1, { value: '=' }]];
+						}
 
 						entry.parent.feature = new MediaFeatureRangeNameValue(
 							new MediaFeatureName(
@@ -86,7 +100,7 @@ const rule = (primary) => {
 									? entry.node.name.after
 									: [[TokenType.Whitespace, ' ', -1, -1, undefined]],
 							),
-							[operator, [TokenType.Delim, '=', -1, -1, { value: '=' }]],
+							operator,
 							entry.node.value,
 						);
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"stylelint": patch
 +---
++
 +Fixed: `media-feature-range-notation` autofix for exact values