diff --git a/src/rules/relative-font-units.js b/src/rules/relative-font-units.js index 59d4d585..892a8ff4 100644 --- a/src/rules/relative-font-units.js +++ b/src/rules/relative-font-units.js @@ -139,8 +139,22 @@ export default { child => child.type === "Identifier", ); const percentageNode = value.children.find( - child => child.type === "Percentage", + (child, index) => { + const isPercentage = + child.type === "Percentage"; + const previousNode = value.children[index - 1]; + + const previousNodeIsSlashOperator = + previousNode && + previousNode.type === "Operator" && + previousNode.value === "/"; + + return ( + isPercentage && !previousNodeIsSlashOperator + ); + }, ); + let location; let shouldReport = false; diff --git a/tests/rules/relative-font-units.test.js b/tests/rules/relative-font-units.test.js index 9bad3665..1fd3747b 100644 --- a/tests/rules/relative-font-units.test.js +++ b/tests/rules/relative-font-units.test.js @@ -50,6 +50,7 @@ ruleTester.run("relative-font-units", rule, { "a { font: revert-layer Arial, sans-serif; }", "a { font-size: unset; }", "a { font: unset Arial, sans-serif; }", + "a { font: 1rem/120% Arial, sans-serif; }", { code: "a { font-size: 1em; }", options: [ @@ -843,6 +844,24 @@ ruleTester.run("relative-font-units", rule, { a { font: 20% Arial, sans-serif; } + `, + options: [ + { + allowUnits: ["em"], + }, + ], + errors: [ + { + messageId: "allowedFontUnits", + data: { allowedFontUnits: "em" }, + }, + ], + }, + { + code: dedent` + a { + font: 1rem/120% Arial, sans-serif; + } `, options: [ {