diff --git a/.changeset/shy-ladybugs-bathe.md b/.changeset/shy-ladybugs-bathe.md new file mode 100644 index 0000000000..c7ee4cb38f --- /dev/null +++ b/.changeset/shy-ladybugs-bathe.md @@ -0,0 +1,5 @@ +--- +"stylelint": minor +--- + +Added: `ignoreFunctions: []` to `unit-disallowed-list` diff --git a/lib/rules/unit-disallowed-list/README.md b/lib/rules/unit-disallowed-list/README.md index 6b8a5a35e3..db982b1128 100644 --- a/lib/rules/unit-disallowed-list/README.md +++ b/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: + + +```css +a { margin: calc(50% - 100px) } +``` + + +```css +a { transform: translateX(100px) } +``` diff --git a/lib/rules/unit-disallowed-list/__tests__/index.js b/lib/rules/unit-disallowed-list/__tests__/index.js index aaef5bf0f4..38523d7568 100644 --- a/lib/rules/unit-disallowed-list/__tests__/index.js +++ b/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, diff --git a/lib/rules/unit-disallowed-list/index.js b/lib/rules/unit-disallowed-list/index.js index d89a263dc1..1fec70874d 100644 --- a/lib/rules/unit-disallowed-list/index.js +++ b/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; }