Fix value-no-vendor-prefix false positives/negatives (stylelint#7658)

emmacharp · May 7, 2024 · 8db25c5 · 8db25c5
1 parent d40a3e9
commit 8db25c5
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 37 deletions.
diff --git a/.changeset/hungry-teachers-bow.md b/.changeset/hungry-teachers-bow.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `value-no-vendor-prefix` false negatives/positives
diff --git a/lib/rules/value-no-vendor-prefix/README.md b/lib/rules/value-no-vendor-prefix/README.md
@@ -83,4 +83,4 @@ a { -moz-user-select: -moz-all; }
 > [!WARNING]
 > An _exact_ match comparison will be performed for non-regex strings in the next major version.
 > If you want to keep the legacy behavior, please consider using a regex instead.
-> E.g. `[/^(-webkit-|-moz-|-ms-)?max-content$/]`.
+> E.g. `[/^(-webkit-|-moz-)?max-content$/]`.
diff --git a/lib/rules/value-no-vendor-prefix/__tests__/index.mjs b/lib/rules/value-no-vendor-prefix/__tests__/index.mjs
@@ -10,6 +10,12 @@ testRule({
 		{
 			code: 'a { display: flex; }',
 		},
+		{
+			code: '.foo { display: -webkit-box; }',
+		},
+		{
+			code: '.foo { display: -moz-box; }',
+		},
 		{
 			code: 'a { background: linear-gradient(to top, #000, #fff); }',
 		},
@@ -102,22 +108,13 @@ testRule({
 			endColumn: 42,
 		},
 		{
-			code: '.foo { display: -webkit-box; }',
-			fixed: '.foo { display: box; }',
-			message: messages.rejected('-webkit-box'),
+			code: '.foo { image-rendering: -o-crisp-edges; }',
+			fixed: '.foo { image-rendering: crisp-edges; }',
+			message: messages.rejected('-o-crisp-edges'),
 			line: 1,
-			column: 17,
-			endLine: 1,
-			endColumn: 28,
-		},
-		{
-			code: '.foo { display: -khtml-box; }',
-			fixed: '.foo { display: box; }',
-			message: messages.rejected('-khtml-box'),
-			line: 1,
-			column: 17,
+			column: 25,
 			endLine: 1,
-			endColumn: 27,
+			endColumn: 39,
 		},
 		{
 			code: '.foo { background: -webkit-linear-gradient(bottom, #000, #fff); }',
@@ -175,7 +172,7 @@ testRule({
 
 	accept: [
 		{
-			code: 'a { $margin: -webkit-box; }',
+			code: 'a { $foo: -webkit-plaintext; }',
 		},
 		{
 			code: 'a { margin: $variable-webkit-variable; }',
@@ -184,7 +181,7 @@ testRule({
 			code: 'a { margin: #{$variable-webkit-variable}; }',
 		},
 		{
-			code: 'a { #{$display}: -webkit-box; }',
+			code: 'a { #{$foo}: -webkit-plaintext; }',
 		},
 	],
 });

diff --git a/lib/utils/isAutoprefixable.cjs b/lib/utils/isAutoprefixable.cjs
@@ -206,6 +206,9 @@ const PROPERTIES = new Set([
 ]);
 
 /**
+ * This list is currently being used to compile all the prefixed values that can safely be unprefixed.
+ * i.e. value-no-vendor-prefix autofix ought to be able to handle it appropriately
+ * It was initially populated using the following example:
  * @example
  * Object.values(prefixes.remove)
  *   .filter((p) => Array.isArray(p.values))
@@ -216,18 +219,14 @@ const PROPERTIES = new Set([
  * @see https://github.com/stylelint/stylelint/pull/5312/files#r636018013
  */
 const PROPERTY_VALUES = new Set([
-	'-khtml-box',
 	'-moz-all',
-	'-moz-available',
-	'-moz-box',
 	'-moz-calc',
 	'-moz-crisp-edges',
 	'-moz-element',
 	'-moz-fit-content',
 	'-moz-grab',
 	'-moz-grabbing',
 	'-moz-initial',
-	'-moz-inline-box',
 	'-moz-isolate',
 	'-moz-isolate-override',
 	'-moz-linear-gradient',
@@ -242,35 +241,31 @@ const PROPERTY_VALUES = new Set([
 	'-moz-zoom-out',
 	'-ms-flexbox',
 	'-ms-grid',
-	'-ms-inline-flexbox',
 	'-ms-inline-grid',
 	'-ms-linear-gradient',
 	'-ms-radial-gradient',
 	'-ms-repeating-linear-gradient',
 	'-ms-repeating-radial-gradient',
+	'-o-crisp-edges',
 	'-o-linear-gradient',
-	'-o-pixelated',
 	'-o-pre-wrap',
 	'-o-radial-gradient',
 	'-o-repeating-linear-gradient',
 	'-o-repeating-radial-gradient',
-	'-webkit-box',
 	'-webkit-calc',
 	'-webkit-cross-fade',
-	'-webkit-fill-available',
 	'-webkit-filter',
 	'-webkit-fit-content',
 	'-webkit-flex',
 	'-webkit-grab',
 	'-webkit-grabbing',
 	'-webkit-image-set',
-	'-webkit-inline-box',
 	'-webkit-inline-flex',
 	'-webkit-isolate',
 	'-webkit-linear-gradient',
 	'-webkit-max-content',
 	'-webkit-min-content',
-	'-webkit-optimize-contrast',
+	'-webkit-plaintext',
 	'-webkit-radial-gradient',
 	'-webkit-repeating-linear-gradient',
 	'-webkit-repeating-radial-gradient',

diff --git a/lib/utils/isAutoprefixable.mjs b/lib/utils/isAutoprefixable.mjs
@@ -202,6 +202,9 @@ const PROPERTIES = new Set([
 ]);
 
 /**
+ * This list is currently being used to compile all the prefixed values that can safely be unprefixed.
+ * i.e. value-no-vendor-prefix autofix ought to be able to handle it appropriately
+ * It was initially populated using the following example:
  * @example
  * Object.values(prefixes.remove)
  *   .filter((p) => Array.isArray(p.values))
@@ -212,18 +215,14 @@ const PROPERTIES = new Set([
  * @see https://github.com/stylelint/stylelint/pull/5312/files#r636018013
  */
 const PROPERTY_VALUES = new Set([
-	'-khtml-box',
 	'-moz-all',
-	'-moz-available',
-	'-moz-box',
 	'-moz-calc',
 	'-moz-crisp-edges',
 	'-moz-element',
 	'-moz-fit-content',
 	'-moz-grab',
 	'-moz-grabbing',
 	'-moz-initial',
-	'-moz-inline-box',
 	'-moz-isolate',
 	'-moz-isolate-override',
 	'-moz-linear-gradient',
@@ -238,35 +237,31 @@ const PROPERTY_VALUES = new Set([
 	'-moz-zoom-out',
 	'-ms-flexbox',
 	'-ms-grid',
-	'-ms-inline-flexbox',
 	'-ms-inline-grid',
 	'-ms-linear-gradient',
 	'-ms-radial-gradient',
 	'-ms-repeating-linear-gradient',
 	'-ms-repeating-radial-gradient',
+	'-o-crisp-edges',
 	'-o-linear-gradient',
-	'-o-pixelated',
 	'-o-pre-wrap',
 	'-o-radial-gradient',
 	'-o-repeating-linear-gradient',
 	'-o-repeating-radial-gradient',
-	'-webkit-box',
 	'-webkit-calc',
 	'-webkit-cross-fade',
-	'-webkit-fill-available',
 	'-webkit-filter',
 	'-webkit-fit-content',
 	'-webkit-flex',
 	'-webkit-grab',
 	'-webkit-grabbing',
 	'-webkit-image-set',
-	'-webkit-inline-box',
 	'-webkit-inline-flex',
 	'-webkit-isolate',
 	'-webkit-linear-gradient',
 	'-webkit-max-content',
 	'-webkit-min-content',
-	'-webkit-optimize-contrast',
+	'-webkit-plaintext',
 	'-webkit-radial-gradient',
 	'-webkit-repeating-linear-gradient',
 	'-webkit-repeating-radial-gradient',