Add autofix to *-no-vendor rules (#4859)

docs/user-guide/rules/list.md

@@ -130,7 +130,7 @@ Grouped first by the following categories and then by the [_thing_](http://apps.
 
 ### Value
 
-- [`value-no-vendor-prefix`](../../../lib/rules/value-no-vendor-prefix/README.md): Disallow vendor prefixes for values.
+- [`value-no-vendor-prefix`](../../../lib/rules/value-no-vendor-prefix/README.md): Disallow vendor prefixes for values (Autofixable).
 
 ### Custom property
 
@@ -140,7 +140,7 @@ Grouped first by the following categories and then by the [_thing_](http://apps.
 
 - [`property-allowed-list`](../../../lib/rules/property-allowed-list/README.md): Specify a list of allowed properties.
 - [`property-disallowed-list`](../../../lib/rules/property-disallowed-list/README.md): Specify a list of disallowed properties.
-- [`property-no-vendor-prefix`](../../../lib/rules/property-no-vendor-prefix/README.md): Disallow vendor prefixes for properties.
+- [`property-no-vendor-prefix`](../../../lib/rules/property-no-vendor-prefix/README.md): Disallow vendor prefixes for properties (Autofixable).
 
 ### Declaration
 
@@ -175,7 +175,7 @@ Grouped first by the following categories and then by the [_thing_](http://apps.
 - [`selector-max-universal`](../../../lib/rules/selector-max-universal/README.md): Limit the number of universal selectors in a selector.
 - [`selector-nested-pattern`](../../../lib/rules/selector-nested-pattern/README.md): Specify a pattern for the selectors of rules nested within rules.
 - [`selector-no-qualifying-type`](../../../lib/rules/selector-no-qualifying-type/README.md): Disallow qualifying a selector by type.
-- [`selector-no-vendor-prefix`](../../../lib/rules/selector-no-vendor-prefix/README.md): Disallow vendor prefixes for selectors.
+- [`selector-no-vendor-prefix`](../../../lib/rules/selector-no-vendor-prefix/README.md): Disallow vendor prefixes for selectors (Autofixable).
 - [`selector-pseudo-class-allowed-list`](../../../lib/rules/selector-pseudo-class-allowed-list/README.md): Specify a list of allowed pseudo-class selectors.
 - [`selector-pseudo-class-disallowed-list`](../../../lib/rules/selector-pseudo-class-disallowed-list/README.md): Specify a list of disallowed pseudo-class selectors.
 - [`selector-pseudo-element-allowed-list`](../../../lib/rules/selector-pseudo-element-allowed-list/README.md): Specify a list of allowed pseudo-element selectors.
@@ -186,7 +186,7 @@ Grouped first by the following categories and then by the [_thing_](http://apps.
 
 - [`media-feature-name-allowed-list`](../../../lib/rules/media-feature-name-allowed-list/README.md): Specify a list of allowed media feature names.
 - [`media-feature-name-disallowed-list`](../../../lib/rules/media-feature-name-disallowed-list/README.md): Specify a list of disallowed media feature names.
-- [`media-feature-name-no-vendor-prefix`](../../../lib/rules/media-feature-name-no-vendor-prefix/README.md): Disallow vendor prefixes for media feature names.
+- [`media-feature-name-no-vendor-prefix`](../../../lib/rules/media-feature-name-no-vendor-prefix/README.md): Disallow vendor prefixes for media feature names (Autofixable).
 - [`media-feature-name-value-allowed-list`](../../../lib/rules/media-feature-name-value-allowed-list/README.md): Specify a list of allowed media feature name and value pairs.
 
 ### Custom media
@@ -197,7 +197,7 @@ Grouped first by the following categories and then by the [_thing_](http://apps.
 
 - [`at-rule-allowed-list`](../../../lib/rules/at-rule-allowed-list/README.md): Specify a list of allowed at-rules.
 - [`at-rule-disallowed-list`](../../../lib/rules/at-rule-disallowed-list/README.md): Specify a list of disallowed at-rules.
-- [`at-rule-no-vendor-prefix`](../../../lib/rules/at-rule-no-vendor-prefix/README.md): Disallow vendor prefixes for at-rules.
+- [`at-rule-no-vendor-prefix`](../../../lib/rules/at-rule-no-vendor-prefix/README.md): Disallow vendor prefixes for at-rules (Autofixable).
 - [`at-rule-property-required-list`](../../../lib/rules/at-rule-property-required-list/README.md): Specify a list of required properties for an at-rule.
 
 ### Comment

lib/rules/at-rule-no-vendor-prefix/README.md

@@ -9,6 +9,8 @@ Disallow vendor prefixes for at-rules.
  * This prefix */
 ```
 
+The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
+
 ## Options
 
 ### `true`

lib/rules/at-rule-no-vendor-prefix/__tests__/index.js

@@ -5,6 +5,7 @@ const { messages, ruleName } = require('..');
 testRule({
 	ruleName,
 	config: [true],
+	fix: true,
 
 	accept: [
 		{
@@ -18,22 +19,27 @@ testRule({
 	reject: [
 		{
 			code: '@-webkit-keyframes { 0% { top: 0; } }',
+			fixed: '@keyframes { 0% { top: 0; } }',
 			message: messages.rejected('-webkit-keyframes'),
 		},
 		{
 			code: '@-wEbKiT-kEyFrAmEs { 0% { top: 0; } }',
+			fixed: '@kEyFrAmEs { 0% { top: 0; } }',
 			message: messages.rejected('-wEbKiT-kEyFrAmEs'),
 		},
 		{
 			code: '@-WEBKIT-KEYFRAMES { 0% { top: 0; } }',
+			fixed: '@KEYFRAMES { 0% { top: 0; } }',
 			message: messages.rejected('-WEBKIT-KEYFRAMES'),
 		},
 		{
 			code: '@-moz-keyframes { 0% { top: 0; } }',
+			fixed: '@keyframes { 0% { top: 0; } }',
 			message: messages.rejected('-moz-keyframes'),
 		},
 		{
 			code: '@-ms-viewport { orientation: landscape; }',
+			fixed: '@viewport { orientation: landscape; }',
 			message: messages.rejected('-ms-viewport'),
 		},
 	],

lib/rules/at-rule-no-vendor-prefix/index.js

@@ -14,7 +14,7 @@ const messages = ruleMessages(ruleName, {
 	rejected: (p) => `Unexpected vendor-prefixed at-rule "@${p}"`,
 });
 
-function rule(actual) {
+function rule(actual, options, context) {
 	return function (root, result) {
 		const validOptions = validateOptions(result, ruleName, { actual });
 
@@ -37,6 +37,12 @@ function rule(actual) {
 				return;
 			}
 
+			if (context.fix) {
+				atRule.name = isAutoprefixable.unprefix(atRule.name);
+
+				return;
+			}
+
 			report({
 				message: messages.rejected(name),
 				node: atRule,

lib/rules/media-feature-name-no-vendor-prefix/README.md

@@ -11,6 +11,8 @@ Disallow vendor prefixes for media feature names.
 
 Right now this rule simply checks for prefixed _resolutions_.
 
+The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
+
 ## Options
 
 ### `true`

lib/rules/media-feature-name-no-vendor-prefix/__tests__/index.js

@@ -5,6 +5,7 @@ const { messages, ruleName } = require('..');
 testRule({
 	ruleName,
 	config: [true],
+	fix: true,
 
 	accept: [
 		{
@@ -13,47 +14,57 @@ testRule({
 		{
 			code: '@media (device-pixel-ratio: 2) {}',
 		},
+		{
+			code: '@media (min-device-pixel-ratio: 2) {}',
+		},
 	],
 
 	reject: [
 		{
 			code: '@media (-webkit-min-device-pixel-ratio: 1) {}',
+			fixed: '@media (min-device-pixel-ratio: 1) {}',
 			message: messages.rejected,
 			line: 1,
 			column: 9,
 		},
 		{
 			code: '@media (-wEbKiT-mIn-DeViCe-PiXeL-rAtIo: 1) {}',
+			fixed: '@media (mIn-DeViCe-PiXeL-rAtIo: 1) {}',
 			message: messages.rejected,
 			line: 1,
 			column: 9,
 		},
 		{
 			code: '@media (-WEBKIT-MIN-DEVICE-PIXEL-RATIO: 1) {}',
+			fixed: '@media (MIN-DEVICE-PIXEL-RATIO: 1) {}',
 			message: messages.rejected,
 			line: 1,
 			column: 9,
 		},
 		{
 			code: '@media\n\t(min--moz-device-pixel-ratio: 1) {}',
+			fixed: '@media\n\t(min-device-pixel-ratio: 1) {}',
 			message: messages.rejected,
 			line: 2,
-			column: 3,
+			column: 6,
 		},
 		{
 			code: '@media   (-o-max-device-pixel-ratio: 1/1) {}',
+			fixed: '@media   (max-device-pixel-ratio: 1/1) {}',
 			message: messages.rejected,
 			line: 1,
 			column: 11,
 		},
 		{
 			code: '@media (-o-max-device-pixel-ratio > 1) {}',
+			fixed: '@media (max-device-pixel-ratio > 1) {}',
 			message: messages.rejected,
 			line: 1,
 			column: 9,
 		},
 		{
 			code: '@media (1 < -o-max-device-pixel-ratio < 2) {}',
+			fixed: '@media (1 < max-device-pixel-ratio < 2) {}',
 			message: messages.rejected,
 			line: 1,
 			column: 13,

lib/rules/media-feature-name-no-vendor-prefix/index.js

@@ -13,7 +13,7 @@ const messages = ruleMessages(ruleName, {
 	rejected: 'Unexpected vendor-prefix',
 });
 
-function rule(actual) {
+function rule(actual, options, context) {
 	return (root, result) => {
 		const validOptions = validateOptions(result, ruleName, { actual });
 
@@ -28,12 +28,18 @@ function rule(actual) {
 				return;
 			}
 
-			const matches = atRule.toString().match(/[a-z-]+device-pixel-ratio/gi);
+			const matches = atRule.toString().match(/-[a-z-]+device-pixel-ratio/gi);
 
 			if (!matches) {
 				return;
 			}
 
+			if (context.fix) {
+				atRule.params = isAutoprefixable.unprefix(atRule.params);
+
+				return;
+			}
+
 			matches.forEach((match) => {
 				report({
 					message: messages.rejected,

lib/rules/property-no-vendor-prefix/README.md

@@ -11,6 +11,8 @@ a { -webkit-transform: scale(1); }
 
 This rule does not blanketly condemn vendor prefixes. Instead, it uses [Autoprefixer's](https://github.com/postcss/autoprefixer) up-to-date data (from [caniuse.com](http://caniuse.com/)) to know whether a vendor prefix should cause a violation or not. _If you've included a vendor prefixed property that has a standard alternative, one that Autoprefixer could take care of for you, this rule will complain about it_. If, however, you use a non-standard vendor-prefixed property, one that Autoprefixer would ignore and could not provide (such as `-webkit-touch-callout`), this rule will ignore it.
 
+The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
+
 ## Options
 
 ### `true`

lib/rules/property-no-vendor-prefix/__tests__/index.js

@@ -5,6 +5,7 @@ const { messages, ruleName } = require('..');
 testRule({
 	ruleName,
 	config: [true],
+	fix: true,
 
 	accept: [
 		{
@@ -40,55 +41,64 @@ testRule({
 	reject: [
 		{
 			code: 'a { -webkit-transform: scale(1); }',
+			fixed: 'a { transform: scale(1); }',
 			message: messages.rejected('-webkit-transform'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { -wEbKiT-tRaNsFoRm: scale(1); }',
+			fixed: 'a { tRaNsFoRm: scale(1); }',
 			message: messages.rejected('-wEbKiT-tRaNsFoRm'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { -WEBKIT-TRANSFORM: scale(1); }',
+			fixed: 'a { TRANSFORM: scale(1); }',
 			message: messages.rejected('-WEBKIT-TRANSFORM'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { -webkit-transform: scale(1); transform: scale(1); }',
+			fixed: 'a { transform: scale(1); transform: scale(1); }',
 			message: messages.rejected('-webkit-transform'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { transform: scale(1); -webkit-transform: scale(1); }',
+			fixed: 'a { transform: scale(1); transform: scale(1); }',
 			message: messages.rejected('-webkit-transform'),
 			line: 1,
 			column: 26,
 		},
 		{
 			code: 'a { -moz-transition: all 3s; }',
+			fixed: 'a { transition: all 3s; }',
 			message: messages.rejected('-moz-transition'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { -moz-columns: 2; }',
+			fixed: 'a { columns: 2; }',
 			message: messages.rejected('-moz-columns'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { -o-columns: 2; }',
+			fixed: 'a { columns: 2; }',
 			description: 'mistaken prefix',
 			message: messages.rejected('-o-columns'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { -ms-interpolation-mode: nearest-neighbor; }',
+			fixed: 'a { interpolation-mode: nearest-neighbor; }',
 			description: '"hack" prefix',
 			message: messages.rejected('-ms-interpolation-mode'),
 			line: 1,
@@ -100,6 +110,7 @@ testRule({
 testRule({
 	ruleName,
 	config: [true, { ignoreProperties: ['transform', 'columns', '/^animation-/i'] }],
+	fix: true,
 
 	accept: [
 		{
@@ -121,18 +132,21 @@ testRule({
 	reject: [
 		{
 			code: 'a { -webkit-border-radius: 10px; }',
+			fixed: 'a { border-radius: 10px; }',
 			message: messages.rejected('-webkit-border-radius'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { -moz-background-size: cover; }',
+			fixed: 'a { background-size: cover; }',
 			message: messages.rejected('-moz-background-size'),
 			line: 1,
 			column: 5,
 		},
 		{
 			code: 'a { -WEBKIT-tranSFoRM: translateY(-50%); }',
+			fixed: 'a { tranSFoRM: translateY(-50%); }',
 			message: messages.rejected('-WEBKIT-tranSFoRM'),
 			line: 1,
 			column: 5,
@@ -143,6 +157,7 @@ testRule({
 testRule({
 	ruleName,
 	config: [true, { ignoreProperties: [/^animation-/i] }],
+	fix: true,
 
 	accept: [
 		{
@@ -152,6 +167,7 @@ testRule({
 	reject: [
 		{
 			code: 'a { -webkit-border-radius: 10px; }',
+			fixed: 'a { border-radius: 10px; }',
 			message: messages.rejected('-webkit-border-radius'),
 			line: 1,
 			column: 5,

lib/rules/property-no-vendor-prefix/index.js

@@ -16,7 +16,7 @@ const messages = ruleMessages(ruleName, {
 	rejected: (property) => `Unexpected vendor-prefix "${property}"`,
 });
 
-function rule(actual, options) {
+function rule(actual, options, context) {
 	return (root, result) => {
 		const validOptions = validateOptions(
 			result,
@@ -55,6 +55,12 @@ function rule(actual, options) {
 				return;
 			}
 
+			if (context.fix) {
+				decl.prop = isAutoprefixable.unprefix(decl.prop);
+
+				return;
+			}
+
 			report({
 				message: messages.rejected(prop),
 				node: decl,

lib/rules/selector-no-vendor-prefix/README.md

@@ -11,6 +11,8 @@ input::-moz-placeholder {}
 
 This rule does not blanketly condemn vendor prefixes. Instead, it uses [Autoprefixer's](https://github.com/postcss/autoprefixer) up-to-date data (from [caniuse.com](http://caniuse.com/)) to know whether a vendor prefix should cause a violation or not. _If you've included a vendor prefixed selector that has a standard alternative, one that Autoprefixer could take care of for you, this rule will complain about it_. If, however, you use a non-standard vendor-prefixed selector, one that Autoprefixer would ignore and could not provide, this rule will ignore it.
 
+The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
+
 ## Options
 
 ### `true`