Merge pull request #6841 from stylelint/fix-declaration-block-no-redu…

…ndant-longhand-properties-autofix-with-cubic-bezier--adventurous-coati-fd5be48aa5 Fix `declaration-block-no-redundant-longhand-properties` `autofix` with `cubic-bezier()`
stylelint · May 14, 2023 · 8c75700 · 8c75700
2 parents d5e5018 + dbb1e88
commit 8c75700
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/.changeset/soft-islands-relax.md b/.changeset/soft-islands-relax.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `declaration-block-no-redundant-longhand-properties` `autofix` with `cubic-bezier()`
diff --git a/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js b/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js
@@ -193,6 +193,19 @@ testRule({
 			description: 'custom resolver for transition - missing transition-delay',
 			message: messages.expected('transition'),
 		},
+		{
+			code: '.class-name { transition-delay: 25ms; transition-duration: 10ms; transition-property: margin; transition-timing-function: cubic-bezier(0, 1, 1, 1); }',
+			fixed: '.class-name { transition: margin 10ms cubic-bezier(0, 1, 1, 1) 25ms; }',
+			description: 'autofixer should not mangle css functions with comma separated values',
+			message: messages.expected('transition'),
+		},
+		{
+			code: '.class-name { transition-delay: 25ms, 50ms; transition-duration: 10ms, 20ms; transition-property: margin, padding; transition-timing-function: cubic-bezier(0, 1, 1, 1), cubic-bezier(1, 0, 0, 1); }',
+			fixed:
+				'.class-name { transition: margin 10ms cubic-bezier(0, 1, 1, 1) 25ms, padding 20ms cubic-bezier(1, 0, 0, 1) 50ms; }',
+			description: 'autofixer should not mangle css functions with comma separated values',
+			message: messages.expected('transition'),
+		},
 	],
 });
 

diff --git a/lib/rules/declaration-block-no-redundant-longhand-properties/index.js b/lib/rules/declaration-block-no-redundant-longhand-properties/index.js
@@ -1,5 +1,7 @@
 'use strict';
 
+const valueParser = require('postcss-value-parser');
+
 const arrayEqual = require('../../utils/arrayEqual');
 const { basicKeywords } = require('../../reference/keywords');
 const eachDeclarationBlock = require('../../utils/eachDeclarationBlock');
@@ -51,11 +53,39 @@ const customResolvers = new Map([
 		'transition',
 		(decls) => {
 			/** @type {(input: string | undefined) => string[]} */
-			const commaSeparated = (input = '') =>
-				input
-					.split(',')
-					.map((s) => s.trim())
-					.filter((s) => s.length > 0);
+			const commaSeparated = (input = '') => {
+				let trimmedInput = input.trim();
+
+				if (!trimmedInput) return [];
+
+				if (trimmedInput.indexOf(',') === -1) return [trimmedInput];
+
+				/** @type {import('postcss-value-parser').ParsedValue} */
+				let parsedValue = valueParser(trimmedInput);
+				/** @type {Array<Array<import('postcss-value-parser').Node>>} */
+				let valueParts = [];
+
+				{
+					/** @type {Array<import('postcss-value-parser').Node>} */
+					let currentListItem = [];
+
+					parsedValue.nodes.forEach((node) => {
+						if (node.type === 'div' && node.value === ',') {
+							valueParts.push(currentListItem);
+							currentListItem = [];
+
+							return;
+						}
+
+						currentListItem.push(node);
+					});
+
+					valueParts.push(currentListItem);
+				}
+
+				return valueParts.map((s) => valueParser.stringify(s).trim()).filter((s) => s.length > 0);
+			};
+
 			const delays = commaSeparated(decls.get('transition-delay')?.value);
 			const durations = commaSeparated(decls.get('transition-duration')?.value);
 			const timingFunctions = commaSeparated(decls.get('transition-timing-function')?.value);