Fix declaration-block-no-redundant-longhand-properties autofix for transition

.changeset/neat-poems-tie.md

@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `declaration-block-no-redundant-longhand-properties` autofix for `transition`

lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js

@@ -149,8 +149,30 @@ testRule({
 		{
 			code: 'a { grid-template-rows: var(--header-h) 1fr var(--footer-h); grid-template-columns: var(--toolbar-w) 1fr; grid-template-areas: "header header" "toolbar main" "footer footer"; }',
 			fixed: `a { grid-template: "header header" var(--header-h) "toolbar main" 1fr "footer footer" var(--footer-h) / var(--toolbar-w) 1fr; }`,
+			description: 'custom resolver for grid-template',
 			message: messages.expected('grid-template'),
 		},
+		{
+			code: 'a { transition-delay: 500ms,    1s; transition-duration: 250ms,2s; transition-timing-function: ease-in-out; transition-property: transform, visibility; }',
+			fixed: `a { transition: transform 250ms ease-in-out 500ms, visibility 2s ease-in-out 1s; }`,
+			description:
+				'custom resolver for transition - multiple properties, delays, durations, timing-functions',
+			message: messages.expected('transition'),
+		},
+		{
+			code: 'a { transition-delay: 500ms; transition-duration: 250ms; transition-timing-function: ease-in-out; transition-property: transform, visibility; }',
+			fixed: `a { transition: transform 250ms ease-in-out 500ms, visibility 250ms ease-in-out 500ms; }`,
+			description:
+				'custom resolver for transition - multiple properties, single delay/duration/timing-function',
+			message: messages.expected('transition'),
+		},
+		{
+			code: 'a { transition-delay: 500ms, 1s, 1.5s; transition-duration: 250ms, 0.5s; transition-timing-function: ease-in-out; transition-property: transform, visibility, padding; }',
+			fixed: `a { transition: transform 250ms ease-in-out 500ms, visibility 0.5s ease-in-out 1s, padding 250ms ease-in-out 1.5s; }`,
+			description:
+				'custom resolver for transition - multiple properties, multiple delays/duration/timing-functions with different periods',
+			message: messages.expected('transition'),
+		},
 	],
 });
 

lib/rules/declaration-block-no-redundant-longhand-properties/index.js

@@ -47,6 +47,39 @@
 			return `${zipped} / ${columns}`;
 		},
 	],
+	[
+		'transition',
+		(decls) => {
+			const delays = decls.get('transition-delay')?.value.trim().split(',');
+			const durations = decls.get('transition-duration')?.value.trim().split(',');
+			const timingFunctions = decls.get('transition-timing-function')?.value.trim().split(',');
+			const properties = decls.get('transition-property')?.value.trim().split(',');
+
+			if (!(delays && durations && timingFunctions && properties)) return;
+
+			// none, inherit and initial are not permitted as items of lists with more than one identifier
+			// see spec: https://w3c.github.io/csswg-drafts/css-transitions/#transition-property-property
+			if (
+				properties.length > 1 &&
+				('none' in properties || 'inherit' in properties || 'initial' in properties)
+			)
+				return;
+
+			// transition-property is the canonical list of the number of properties;
+			// see spec: https://w3c.github.io/csswg-drafts/css-transitions/#transition-property-property
+			// if there are more transition-properties than duration/delay/timings,
+			// the other properties are computed cyclically -- ex with %
+			// see spec example #3: https://w3c.github.io/csswg-drafts/css-transitions/#example-d94cbd75
+			return properties
+				.map(
+					(property, i) =>
+						`${property.trim()} ${durations[i % durations.length]?.trim()} ${timingFunctions[
+							i % timingFunctions.length
+						]?.trim()} ${delays[i % delays.length]?.trim()}`,
+				)
+				.join(', ');
+		},
+	],
 ]);
 
 /**