Add autofix to declaration-block-no-duplicate-properties (#6296)

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>
stylelint · Aug 24, 2022 · 8e6a576 · 8e6a576
1 parent b20e672
commit 8e6a576
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 10 deletions.
diff --git a/.changeset/nice-lemons-reflect.md b/.changeset/nice-lemons-reflect.md
@@ -0,0 +1,5 @@
+---
+"stylelint": minor
+---
+
+Added: `declaration-block-no-duplicate-properties` autofix
diff --git a/docs/user-guide/rules/list.md b/docs/user-guide/rules/list.md
@@ -61,7 +61,7 @@ Within each cateogory, the rules are grouped by the [_thing_](http://apps.workfl
 ### Declaration block
 
 - [`declaration-block-no-duplicate-custom-properties`](../../../lib/rules/declaration-block-no-duplicate-custom-properties/README.md): Disallow duplicate custom properties within declaration blocks.
-- [`declaration-block-no-duplicate-properties`](../../../lib/rules/declaration-block-no-duplicate-properties/README.md): Disallow duplicate properties within declaration blocks.
+- [`declaration-block-no-duplicate-properties`](../../../lib/rules/declaration-block-no-duplicate-properties/README.md): Disallow duplicate properties within declaration blocks (Autofixable).
 - [`declaration-block-no-shorthand-property-overrides`](../../../lib/rules/declaration-block-no-shorthand-property-overrides/README.md): Disallow shorthand properties that override related longhand properties.
 
 ### Block

diff --git a/lib/rules/declaration-block-no-duplicate-properties/README.md b/lib/rules/declaration-block-no-duplicate-properties/README.md
@@ -11,6 +11,8 @@ a { color: pink; color: orange; }
 
 This rule ignores variables (`$sass`, `@less`, `--custom-property`).
 
+The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
+
 ## Options
 
 ### `true`

diff --git a/lib/rules/declaration-block-no-duplicate-properties/__tests__/index.js b/lib/rules/declaration-block-no-duplicate-properties/__tests__/index.js
@@ -5,6 +5,7 @@ const { messages, ruleName } = require('..');
 testRule({
 	ruleName,
 	config: [true],
+	fix: true,
 
 	accept: [
 		{
@@ -48,6 +49,7 @@ testRule({
 	reject: [
 		{
 			code: 'a { color: pink; color: orange }',
+			fixed: 'a { color: orange }',
 			message: messages.rejected('color'),
 			line: 1,
 			column: 18,
@@ -56,6 +58,7 @@ testRule({
 		},
 		{
 			code: 'a { cOlOr: pink; color: orange }',
+			fixed: 'a { color: orange }',
 			message: messages.rejected('color'),
 			line: 1,
 			column: 18,
@@ -64,6 +67,7 @@ testRule({
 		},
 		{
 			code: 'a { color: pink; cOlOr: orange }',
+			fixed: 'a { cOlOr: orange }',
 			message: messages.rejected('cOlOr'),
 			line: 1,
 			column: 18,
@@ -72,6 +76,7 @@ testRule({
 		},
 		{
 			code: 'a { cOlOr: pink; cOlOr: orange }',
+			fixed: 'a { cOlOr: orange }',
 			message: messages.rejected('cOlOr'),
 			line: 1,
 			column: 18,
@@ -80,6 +85,7 @@ testRule({
 		},
 		{
 			code: 'a { COLOR: pink; color: orange }',
+			fixed: 'a { color: orange }',
 			message: messages.rejected('color'),
 			line: 1,
 			column: 18,
@@ -88,6 +94,7 @@ testRule({
 		},
 		{
 			code: 'a { color: pink; COLOR: orange }',
+			fixed: 'a { COLOR: orange }',
 			message: messages.rejected('COLOR'),
 			line: 1,
 			column: 18,
@@ -96,6 +103,7 @@ testRule({
 		},
 		{
 			code: 'a { color: pink; background: orange; color: orange }',
+			fixed: 'a { background: orange; color: orange }',
 			message: messages.rejected('color'),
 			line: 1,
 			column: 38,
@@ -104,6 +112,7 @@ testRule({
 		},
 		{
 			code: 'a { color: pink; background: orange; background: pink; }',
+			fixed: 'a { color: pink; background: pink; }',
 			message: messages.rejected('background'),
 			line: 1,
 			column: 38,
@@ -112,6 +121,7 @@ testRule({
 		},
 		{
 			code: 'a { color: pink; { &:hover { color: orange; color: black; } } }',
+			fixed: 'a { color: pink; { &:hover { color: black; } } }',
 			description: 'spec nested',
 			message: messages.rejected('color'),
 			line: 1,
@@ -121,6 +131,7 @@ testRule({
 		},
 		{
 			code: 'a { color: pink; @media { color: orange; color: black; } }',
+			fixed: 'a { color: pink; @media { color: black; } }',
 			description: 'nested',
 			message: messages.rejected('color'),
 			line: 1,
@@ -130,6 +141,7 @@ testRule({
 		},
 		{
 			code: '@media { color: orange; .foo { color: black; color: white; } }',
+			fixed: '@media { color: orange; .foo { color: white; } }',
 			description: 'nested',
 			message: messages.rejected('color'),
 			line: 1,
@@ -139,6 +151,7 @@ testRule({
 		},
 		{
 			code: 'a { color: pink; @media { color: orange; &::before { color: black; color: white; } } }',
+			fixed: 'a { color: pink; @media { color: orange; &::before { color: white; } } }',
 			description: 'double nested',
 			message: messages.rejected('color'),
 			line: 1,
@@ -148,6 +161,7 @@ testRule({
 		},
 		{
 			code: 'a { color: pink; @media { color: orange; .foo { color: black; color: white; } } }',
+			fixed: 'a { color: pink; @media { color: orange; .foo { color: white; } } }',
 			description: 'double nested again',
 			message: messages.rejected('color'),
 			line: 1,
@@ -157,6 +171,7 @@ testRule({
 		},
 		{
 			code: 'a { -webkit-border-radius: 12px; -webkit-border-radius: 10px; }',
+			fixed: 'a { -webkit-border-radius: 10px; }',
 			message: messages.rejected('-webkit-border-radius'),
 			line: 1,
 			column: 34,
@@ -165,6 +180,7 @@ testRule({
 		},
 		{
 			code: 'a { -WEBKIT-border-radius: 12px; -webkit-BORDER-radius: 10px; }',
+			fixed: 'a { -webkit-BORDER-radius: 10px; }',
 			message: messages.rejected('-webkit-BORDER-radius'),
 			line: 1,
 			column: 34,
@@ -177,6 +193,7 @@ testRule({
 testRule({
 	ruleName,
 	config: [true, { ignore: ['consecutive-duplicates'] }],
+	fix: true,
 
 	accept: [
 		{
@@ -196,18 +213,22 @@ testRule({
 	reject: [
 		{
 			code: 'p { font-size: 16px; font-weight: 400; font-size: 1rem; }',
+			fixed: 'p { font-weight: 400; font-size: 1rem; }',
 			message: messages.rejected('font-size'),
 		},
 		{
 			code: 'p { display: inline-block; font-size: 16px; font-weight: 400; font-size: 1rem; }',
+			fixed: 'p { display: inline-block; font-weight: 400; font-size: 1rem; }',
 			message: messages.rejected('font-size'),
 		},
 		{
 			code: 'p { font-size: 16px; font-weight: 400; font-size: 1rem; color: red; }',
+			fixed: 'p { font-weight: 400; font-size: 1rem; color: red; }',
 			message: messages.rejected('font-size'),
 		},
 		{
 			code: 'p { display: inline-block; font-size: 16px; font-weight: 400; font-size: 1rem; color: red; }',
+			fixed: 'p { display: inline-block; font-weight: 400; font-size: 1rem; color: red; }',
 			message: messages.rejected('font-size'),
 		},
 	],
@@ -216,16 +237,19 @@ testRule({
 testRule({
 	ruleName,
 	config: [true, { ignore: ['consecutive-duplicates-with-different-values'] }],
+	fix: true,
 
 	accept: [{ code: 'p { font-size: 16px; font-size: 1rem; font-weight: 400; }' }],
 
 	reject: [
 		{
 			code: 'p { font-size: 16px; font-weight: 400; font-size: 1rem; }',
+			fixed: 'p { font-weight: 400; font-size: 1rem; }',
 			message: messages.rejected('font-size'),
 		},
 		{
 			code: 'p { font-size: 16px; font-size: 16px; font-weight: 400; }',
+			fixed: 'p { font-size: 16px; font-weight: 400; }',
 			message: messages.rejected('font-size'),
 		},
 	],
@@ -234,6 +258,7 @@ testRule({
 testRule({
 	ruleName,
 	config: [true, { ignore: ['consecutive-duplicates-with-same-prefixless-values'] }],
+	fix: true,
 
 	accept: [
 		{
@@ -253,14 +278,17 @@ testRule({
 	reject: [
 		{
 			code: 'p { width: fit-content; height: 32px; width: -moz-fit-content; }',
+			fixed: 'p { height: 32px; width: -moz-fit-content; }',
 			message: messages.rejected('width'),
 		},
 		{
 			code: 'p { width: 100%; width: -moz-fit-content; height: 32px; }',
+			fixed: 'p { width: -moz-fit-content; height: 32px; }',
 			message: messages.rejected('width'),
 		},
 		{
 			code: 'p { width: -moz-fit-content; width: -moz-fit-content; }',
+			fixed: 'p { width: -moz-fit-content; }',
 			message: messages.rejected('width'),
 		},
 	],
@@ -269,6 +297,7 @@ testRule({
 testRule({
 	ruleName,
 	config: [true, { ignoreProperties: ['color'] }],
+	fix: true,
 
 	accept: [
 		{
@@ -285,10 +314,12 @@ testRule({
 	reject: [
 		{
 			code: 'p { color: pink; background: orange; background: white; }',
+			fixed: 'p { color: pink; background: white; }',
 			message: messages.rejected('background'),
 		},
 		{
 			code: 'p { background: orange; color: pink; background: white; }',
+			fixed: 'p { color: pink; background: white; }',
 			message: messages.rejected('background'),
 		},
 	],
@@ -297,6 +328,7 @@ testRule({
 testRule({
 	ruleName,
 	config: [true, { ignoreProperties: ['/background-/'] }],
+	fix: true,
 
 	accept: [
 		{
@@ -310,10 +342,12 @@ testRule({
 	reject: [
 		{
 			code: 'p { color: pink; background: orange; background: white; }',
+			fixed: 'p { color: pink; background: white; }',
 			message: messages.rejected('background'),
 		},
 		{
 			code: 'p { background: orange; color: pink; background: white; }',
+			fixed: 'p { color: pink; background: white; }',
 			message: messages.rejected('background'),
 		},
 	],
@@ -323,6 +357,7 @@ testRule({
 	ruleName,
 	config: [true],
 	customSyntax: 'postcss-html',
+	fix: true,
 
 	accept: [
 		{
@@ -342,14 +377,17 @@ testRule({
 	reject: [
 		{
 			code: '<a style="color: pink; color: orange"></a>',
+			fixed: '<a style="color: orange"></a>',
 			message: messages.rejected('color'),
 		},
 		{
 			code: '<style>p { color: pink; background: orange; background: white; }</style>',
+			fixed: '<style>p { color: pink; background: white; }</style>',
 			message: messages.rejected('background'),
 		},
 		{
 			code: '<a style="background: orange; color: pink; background: white;"></a>',
+			fixed: '<a style="color: pink; background: white;"></a>',
 			message: messages.rejected('background'),
 		},
 	],