Fix value-no-vendor-prefix false negatives (#7654)

stylelint · Apr 25, 2024 · 68cb920 · 68cb920
1 parent d159c1b
commit 68cb920
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 24 deletions.
diff --git a/.changeset/serious-bees-burn.md b/.changeset/serious-bees-burn.md
@@ -0,0 +1,5 @@
+---
+"stylelint": minor
+---
+
+Fixed: `value-no-vendor-prefix` false negatives
diff --git a/lib/reference/prefixes.cjs b/lib/reference/prefixes.cjs
@@ -2,6 +2,18 @@
 // please instead edit the ESM counterpart and rebuild with Rollup (npm run build).
 'use strict';
 
-const prefixes = new Set(['-webkit-', '-moz-', '-ms-', '-o-']);
+// used by value-no-vendor-prefix and selector-no-vendor-prefix
+// i.e. this list is deliberately not exhaustive
+// cf https://www.w3.org/TR/CSS22/syndata.html#vendor-keyword-history
+const prefixes = new Set([
+	'-webkit-',
+	'-moz-',
+	'-ms-',
+	'-o-',
+	'-xv-',
+	'-apple-',
+	'-wap-',
+	'-khtml-',
+]);
 
 exports.prefixes = prefixes;
diff --git a/lib/reference/prefixes.mjs b/lib/reference/prefixes.mjs
@@ -1 +1,13 @@
-export const prefixes = new Set(['-webkit-', '-moz-', '-ms-', '-o-']);
+// used by value-no-vendor-prefix and selector-no-vendor-prefix
+// i.e. this list is deliberately not exhaustive
+// cf https://www.w3.org/TR/CSS22/syndata.html#vendor-keyword-history
+export const prefixes = new Set([
+	'-webkit-',
+	'-moz-',
+	'-ms-',
+	'-o-',
+	'-xv-',
+	'-apple-',
+	'-wap-',
+	'-khtml-',
+]);
diff --git a/lib/rules/value-no-vendor-prefix/README.md b/lib/rules/value-no-vendor-prefix/README.md
@@ -9,7 +9,7 @@ a { display: -webkit-flex; }
  *  This prefix */
 ```
 
-This rule ignores non-standard vendor-prefixed values that aren't handled by [Autoprefixer](https://github.com/postcss/autoprefixer).
+This rule does not fix vendor-prefixed values that weren't handled by [Autoprefixer](https://github.com/postcss/autoprefixer) version 10.2.5. Exceptions may be added on a case by case basis.
 
 The [`fix` option](../../../docs/user-guide/options.md#fix) can automatically fix all of the problems reported by this rule. However, it will not remove duplicate values produced when the prefixes are removed. You can use [Autoprefixer](https://github.com/postcss/autoprefixer) itself, with the [`add` option off and the `remove` option on](https://github.com/postcss/autoprefixer#options), in these situations.
 
@@ -60,7 +60,7 @@ a { background: linear-gradient(bottom, #000, #fff); }
 Given:
 
 ```json
-["grab", "hangul", "/^-apple-/"]
+["grab", "max-content", "/^-moz-all$/"]
 ```
 
 The following patterns are _not_ considered problems:
@@ -72,20 +72,15 @@ a { cursor: -webkit-grab; }
 
 <!-- prettier-ignore -->
 ```css
-a { list-style-type: -moz-hangul; }
-```
-
-<!-- prettier-ignore -->
-```css
-a { list-style-type: -moz-hangul-consonant; }
+a { max-width: -moz-max-content; }
 ```
 
 <!-- prettier-ignore -->
 ```css
-a { -webkit-appearance: -apple-pay-button; }
+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-)?inline-/]`.
+> E.g. `[/^(-webkit-|-moz-|-ms-)?max-content$/]`.
diff --git a/lib/rules/value-no-vendor-prefix/__tests__/index.mjs b/lib/rules/value-no-vendor-prefix/__tests__/index.mjs
@@ -8,26 +8,42 @@ testRule({
 
 	accept: [
 		{
-			code: '.foo { display: flex; }',
+			code: 'a { display: flex; }',
 		},
 		{
-			code: '.foo { background: linear-gradient(to top, #000, #fff); }',
+			code: 'a { background: linear-gradient(to top, #000, #fff); }',
 		},
 		{
-			code: '.foo { max-width: max-content; }',
+			code: 'a { max-width: max-content; }',
 		},
 		{
-			code: '.foo { -webkit-transform: translate(0, 0); }',
+			code: 'a { -webkit-transform: translate(0, 0); }',
 			description: 'ignores property vendor prefixes',
 		},
 		{
-			code: '.foo { -wEbKiT-tRaNsFoRm: translate(0, 0); }',
+			code: 'a { -wEbKiT-tRaNsFoRm: translate(0, 0); }',
 			description: 'ignores property vendor prefixes',
 		},
 		{
-			code: '.foo { -WEBKIT-TRANSFORM: translate(0, 0); }',
+			code: 'a { -WEBKIT-TRANSFORM: translate(0, 0); }',
 			description: 'ignores property vendor prefixes',
 		},
+		{
+			code: 'a { white-space: -pre-wrap; }',
+			description: 'ignores non-vendor prefixed values',
+		},
+		{
+			code: 'a { background-color: -apple-wireless-playback-target-active; }',
+			description: '-apple-: ignores unfixable',
+		},
+		{
+			code: 'a { display: -wap-marquee; }',
+			description: '-wap-: ignores unfixable',
+		},
+		{
+			code: 'a { list-style-type: -moz-ethiopic-halehame; }',
+			description: '-moz-: ignores unfixable',
+		},
 	],
 
 	reject: [
@@ -94,6 +110,15 @@ testRule({
 			endLine: 1,
 			endColumn: 28,
 		},
+		{
+			code: '.foo { display: -khtml-box; }',
+			fixed: '.foo { display: box; }',
+			message: messages.rejected('-khtml-box'),
+			line: 1,
+			column: 17,
+			endLine: 1,
+			endColumn: 27,
+		},
 		{
 			code: '.foo { background: -webkit-linear-gradient(bottom, #000, #fff); }',
 			fixed: '.foo { background: linear-gradient(bottom, #000, #fff); }',
@@ -112,6 +137,33 @@ testRule({
 			endLine: 1,
 			endColumn: 35,
 		},
+		{
+			code: '.foo { speak: -xv-digits; }',
+			fixed: '.foo { speak: digits; }',
+			message: messages.rejected('-xv-digits'),
+			line: 1,
+			column: 15,
+			endLine: 1,
+			endColumn: 25,
+		},
+		{
+			code: '.foo { white-space: -o-pre-wrap; }',
+			fixed: '.foo { white-space: pre-wrap; }',
+			message: messages.rejected('-o-pre-wrap'),
+			line: 1,
+			column: 21,
+			endLine: 1,
+			endColumn: 32,
+		},
+		{
+			code: '.foo { -webkit-user-select: -moz-all; }',
+			fixed: '.foo { -webkit-user-select: all; }',
+			message: messages.rejected('-moz-all'),
+			line: 1,
+			column: 29,
+			endLine: 1,
+			endColumn: 37,
+		},
 	],
 });
 
@@ -155,24 +207,21 @@ testRule({
 
 testRule({
 	ruleName,
-	config: [
-		true,
-		{ ignoreValues: ['grab', 'hangul', '/^-webkit-linear-/', /^-moz-use-text-color$/] },
-	],
+	config: [true, { ignoreValues: ['grab', 'hangul', '/^-webkit-linear-/', /^-moz-all$/] }],
 	fix: true,
 
 	accept: [
 		{
 			code: 'a { cursor: -webkit-grab; }',
 		},
 		{
-			code: 'a { list-style-type: -moz-hangul-consonant; }',
+			code: 'a { list-style-type: -moz-hangul; }',
 		},
 		{
 			code: 'a { background: -webkit-linear-gradient(bottom, #000, #fff); }',
 		},
 		{
-			code: 'a { outline-color: -moz-use-text-color; }',
+			code: 'a { -moz-user-select: -moz-all; }',
 			description: 'RegExp: exact match',
 		},
 	],
@@ -204,5 +253,14 @@ testRule({
 			endLine: 1,
 			endColumn: 29,
 		},
+		{
+			code: '.foo { list-style-type: -moz-hangul-consonant; }',
+			fixed: '.foo { list-style-type: hangul-consonant; }',
+			message: messages.rejected('-moz-hangul-consonant'),
+			line: 1,
+			column: 25,
+			endLine: 1,
+			endColumn: 46,
+		},
 	],
 });
diff --git a/lib/utils/isAutoprefixable.cjs b/lib/utils/isAutoprefixable.cjs
@@ -216,6 +216,8 @@ 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',
@@ -224,12 +226,14 @@ const PROPERTY_VALUES = new Set([
 	'-moz-fit-content',
 	'-moz-grab',
 	'-moz-grabbing',
+	'-moz-initial',
 	'-moz-inline-box',
 	'-moz-isolate',
 	'-moz-isolate-override',
 	'-moz-linear-gradient',
 	'-moz-max-content',
 	'-moz-min-content',
+	'-moz-pre-wrap',
 	'-moz-plaintext',
 	'-moz-radial-gradient',
 	'-moz-repeating-linear-gradient',
@@ -246,6 +250,7 @@ const PROPERTY_VALUES = new Set([
 	'-ms-repeating-radial-gradient',
 	'-o-linear-gradient',
 	'-o-pixelated',
+	'-o-pre-wrap',
 	'-o-radial-gradient',
 	'-o-repeating-linear-gradient',
 	'-o-repeating-radial-gradient',
@@ -272,6 +277,39 @@ const PROPERTY_VALUES = new Set([
 	'-webkit-sticky',
 	'-webkit-zoom-in',
 	'-webkit-zoom-out',
+	'-xv-digits',
+	'-xv-literal-punctuation',
+	'-xv-no-punctuation',
+	// Firefox does not support
+	// ethiopic-halehame, ethiopic-halehame-am, ethiopic-halehame-ti-er and ethiopic-halehame-ti-et
+	// without a -moz- prefix
+	// see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
+	'-moz-arabic-indic',
+	'-moz-bengali',
+	'-moz-cjk-earthly-branch',
+	'-moz-cjk-heavenly-stem',
+	'-moz-devanagari',
+	'-moz-ethiopic-numeric',
+	'-moz-gujarati',
+	'-moz-gurmukhi',
+	'-moz-hangul',
+	'-moz-hangul-consonant',
+	'-moz-japanese-formal',
+	'-moz-japanese-informal',
+	'-moz-kannada',
+	'-moz-khmer',
+	'-moz-lao',
+	'-moz-malayalam',
+	'-moz-myanmar',
+	'-moz-oriya',
+	'-moz-persian',
+	'-moz-simp-chinese-formal',
+	'-moz-simp-chinese-informal',
+	'-moz-tamil',
+	'-moz-telugu',
+	'-moz-thai',
+	'-moz-trad-chinese-formal',
+	'-moz-trad-chinese-informal',
 ]);
 
 /**

diff --git a/lib/utils/isAutoprefixable.mjs b/lib/utils/isAutoprefixable.mjs
@@ -212,6 +212,8 @@ 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',
@@ -220,12 +222,14 @@ const PROPERTY_VALUES = new Set([
 	'-moz-fit-content',
 	'-moz-grab',
 	'-moz-grabbing',
+	'-moz-initial',
 	'-moz-inline-box',
 	'-moz-isolate',
 	'-moz-isolate-override',
 	'-moz-linear-gradient',
 	'-moz-max-content',
 	'-moz-min-content',
+	'-moz-pre-wrap',
 	'-moz-plaintext',
 	'-moz-radial-gradient',
 	'-moz-repeating-linear-gradient',
@@ -242,6 +246,7 @@ const PROPERTY_VALUES = new Set([
 	'-ms-repeating-radial-gradient',
 	'-o-linear-gradient',
 	'-o-pixelated',
+	'-o-pre-wrap',
 	'-o-radial-gradient',
 	'-o-repeating-linear-gradient',
 	'-o-repeating-radial-gradient',
@@ -268,6 +273,39 @@ const PROPERTY_VALUES = new Set([
 	'-webkit-sticky',
 	'-webkit-zoom-in',
 	'-webkit-zoom-out',
+	'-xv-digits',
+	'-xv-literal-punctuation',
+	'-xv-no-punctuation',
+	// Firefox does not support
+	// ethiopic-halehame, ethiopic-halehame-am, ethiopic-halehame-ti-er and ethiopic-halehame-ti-et
+	// without a -moz- prefix
+	// see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
+	'-moz-arabic-indic',
+	'-moz-bengali',
+	'-moz-cjk-earthly-branch',
+	'-moz-cjk-heavenly-stem',
+	'-moz-devanagari',
+	'-moz-ethiopic-numeric',
+	'-moz-gujarati',
+	'-moz-gurmukhi',
+	'-moz-hangul',
+	'-moz-hangul-consonant',
+	'-moz-japanese-formal',
+	'-moz-japanese-informal',
+	'-moz-kannada',
+	'-moz-khmer',
+	'-moz-lao',
+	'-moz-malayalam',
+	'-moz-myanmar',
+	'-moz-oriya',
+	'-moz-persian',
+	'-moz-simp-chinese-formal',
+	'-moz-simp-chinese-informal',
+	'-moz-tamil',
+	'-moz-telugu',
+	'-moz-thai',
+	'-moz-trad-chinese-formal',
+	'-moz-trad-chinese-informal',
 ]);
 
 /**