Add ignoreFunctions: [] to unit-disallowed-list (#6592)

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

.changeset/shy-ladybugs-bathe.md

@@ -0,0 +1,5 @@
+---
+"stylelint": minor
+---
+
+Added: `ignoreFunctions: []` to `unit-disallowed-list`

lib/rules/unit-disallowed-list/README.md

@@ -157,3 +157,27 @@ The following patterns are considered problems:
 ```css
 @media print and (max-resolution: 100dpi) {}
 ```
+
+### `ignoreFunctions: ["function", "/regex/", /regex/]|"function"|"/regex/"|/regex/`
+
+Ignore units that are inside of the specified functions.
+
+For example, with `["px"]`.
+
+Given:
+
+```json
+["calc", "/^translate/"]
+```
+
+The following patterns are _not_ considered problems:
+
+<!-- prettier-ignore -->
+```css
+a { margin: calc(50% - 100px) }
+```
+
+<!-- prettier-ignore -->
+```css
+a { transform: translateX(100px) }
+```

lib/rules/unit-disallowed-list/__tests__/index.js

@@ -388,6 +388,48 @@ testRule({
 	],
 });
 
+testRule({
+	ruleName,
+
+	config: [
+		['px'],
+		{
+			ignoreFunctions: ['calc', /^translate/],
+		},
+	],
+
+	accept: [
+		{
+			code: 'a { margin: calc(50% - 100px) }',
+		},
+		{
+			code: 'a { transform: translate(100px, 100px) }',
+		},
+		{
+			code: 'a { transform: translateX(100px) }',
+		},
+	],
+
+	reject: [
+		{
+			code: 'a { margin: 100px }',
+			message: messages.rejected('px'),
+			line: 1,
+			column: 16,
+			endLine: 1,
+			endColumn: 18,
+		},
+		{
+			code: 'a { translate: 100px }',
+			message: messages.rejected('px'),
+			line: 1,
+			column: 19,
+			endLine: 1,
+			endColumn: 21,
+		},
+	],
+});
+
 testRule({
 	ruleName,
 

lib/rules/unit-disallowed-list/index.js

@@ -51,6 +51,7 @@ const rule = (primary, secondaryOptions) => {
 				optional: true,
 				actual: secondaryOptions,
 				possible: {
+					ignoreFunctions: [isString, isRegExp],
 					ignoreProperties: [validateObjectWithArrayProps(isString, isRegExp)],
 					ignoreMediaFeatureNames: [validateObjectWithArrayProps(isString, isRegExp)],
 				},
@@ -137,8 +138,14 @@ const rule = (primary, secondaryOptions) => {
 			value = value.replace(/\*/g, ',');
 
 			valueParser(value).walk((valueNode) => {
+				const valueLowerCase = valueNode.value.toLowerCase();
+
 				// Ignore wrong units within `url` function
-				if (valueNode.type === 'function' && valueNode.value.toLowerCase() === 'url') {
+				if (
+					valueNode.type === 'function' &&
+					(valueLowerCase === 'url' ||
+						optionsMatches(secondaryOptions, 'ignoreFunctions', valueLowerCase))
+				) {
 					return false;
 				}