apply suggestions

Author: Tanujkanti4441

docs/rules/relative-font-units.md

@@ -10,7 +10,7 @@ The `font-size` property in CSS defines the size of the text. It can be set usin
 1. Length units (e.g., `px`, `em`, `rem`, `pt`).
 1. Percentages (`%`, relative to the parent element's font size).
 
-Generally, relative unit such as `rem` or `em` are preferred over absolute ones like `px`, `pt` because of following reasons:
+Generally, relative units such as `rem` or `em` are preferred over absolute ones like `px`, `pt` because of the following reasons:
 
 - **Responsive Design** - Relative units adapt better to various screen widths and pixel densities (e.g., mobile vs. desktop).
 - **Accessibility** - Relative units allow text to scale when users adjust browser settings or zoom levels.
@@ -21,11 +21,11 @@ Generally, relative unit such as `rem` or `em` are preferred over absolute ones
 
 This rule enforces the use of relative units for font size.
 
-### Options
+## Options
 
-This rule accepts an option which is an object with following property:
+This rule accepts an option which is an object with the following property:
 
-- `allow` (default: `["rem"]`) - Specify an array of relative units that are allowed to be used. You can use following units:
+- `allow` (default: `["rem"]`) - Specify an array of relative units that are allowed to be used. You can use the following units:
 
     - **%**: Represents the "percentage" of the parent element’s font size, allowing the text to scale relative to its container.
     - **cap**: Represents the "cap height" (nominal height of capital letters) of the element's font.
@@ -44,6 +44,8 @@ This rule accepts an option which is an object with following property:
 Example of **incorrect** code for default `{ allow: ["rem"] }` option:
 
 ```css
+/* eslint css/relative-font-units: ["error",  { allow: ["rem"] }] */
+
 a {
 	font-size: 10px;
 }
@@ -60,6 +62,8 @@ c {
 Example of **correct** code for default `{ allow: ["rem"] }` option:
 
 ```css
+/* eslint css/relative-font-units: ["error",  { allow: ["rem"] }] */
+
 a {
 	font-size: 2rem;
 }
@@ -79,6 +83,8 @@ Font size can also be specified in `font` property:
 Example of **correct** code for `{ allow: ["em", "%"] }` option:
 
 ```css
+/* eslint css/relative-font-units: ["error",  { allow: ["em", "%"] }] */
+
 a {
 	font-size: 2em;
 }

src/rules/relative-font-units.js

@@ -42,8 +42,15 @@ const fontSizeIdentifiers = new Set([
 	"large",
 	"x-large",
 	"xx-large",
+	"xxx-large",
 	"smaller",
 	"larger",
+	"math",
+	"inherit",
+	"initial",
+	"revert",
+	"revert-layer",
+	"unset",
 ]);
 
 //-----------------------------------------------------------------------------

tests/rules/relative-font-units.test.js

@@ -194,6 +194,18 @@ ruleTester.run("relative-font-units", rule, {
 				},
 			],
 		},
+		{
+			code: dedent`
+                a {
+                    font: italic small-caps bold condensed 18rem/1.6px "Georgia", serif;
+                }
+            `,
+			options: [
+				{
+					allow: ["rem", "em"],
+				},
+			],
+		},
 	],
 	invalid: [
 		{
@@ -544,6 +556,22 @@ ruleTester.run("relative-font-units", rule, {
 				},
 			],
 		},
+		{
+			code: "a { font-size: xxx-large; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font: xxx-large Arial, sans-serif; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
 		{
 			code: "a { font-size: smaller; }",
 			errors: [
@@ -576,6 +604,102 @@ ruleTester.run("relative-font-units", rule, {
 				},
 			],
 		},
+		{
+			code: "a { font-size: math; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font: math Arial, sans-serif; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font-size: inherit; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font: inherit Arial, sans-serif; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font-size: initial; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font: initial Arial, sans-serif; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font-size: revert; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font: revert Arial, sans-serif; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font-size: revert-layer; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font: revert-layer Arial, sans-serif; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font-size: unset; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: "a { font: unset Arial, sans-serif; }",
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
 		{
 			code: dedent`
                 a {
@@ -719,5 +843,54 @@ ruleTester.run("relative-font-units", rule, {
 				},
 			],
 		},
+		{
+			code: dedent`
+                a {
+                    font: italic bold 1.2em/2 "Helvetica", sans-serif;
+                }
+            `,
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: dedent`
+                a {
+                    font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;
+                }
+            `,
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: dedent`
+                a {
+                    font: italic small-caps 700 condensed 16px/1.5 "Helvetica Neue", sans-serif;
+                }
+            `,
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
+		{
+			code: dedent`
+                a {
+                    font: caption;
+                    font-size: 20px;
+                }
+            `,
+			errors: [
+				{
+					messageId: "allowedFontUnits",
+				},
+			],
+		},
 	],
 });