feat 🥁: implement special ordering for fontFace APIs

- Ensure 'src' property always appears first
- Sort remaining properties alphabetically
- Handle both APIs correctly despite different argument structures
- Handles font faces ordering the same in all 3 available CSS rules
- Update documentation with fontFace ordering details

src/css-rules/alphabetical-order/property-order-enforcer.ts

@@ -1,23 +1,9 @@
 import type { Rule } from 'eslint';
 import { TSESTree } from '@typescript-eslint/utils';
+import { comparePropertiesAlphabetically } from '../shared-utils/alphabetical-property-comparator.js';
 import { generateFixesForCSSOrder } from '../shared-utils/css-order-fixer.js';
 import { getPropertyName } from '../shared-utils/property-separator.js';
 
-/**
- * Compares two CSS properties alphabetically.
- * @param firstProperty The first property to compare.
- * @param secondProperty The second property to compare.
- * @returns A number indicating the relative order of the properties (-1, 0, or 1).
- */
-const comparePropertiesAlphabetically = (
-  firstProperty: TSESTree.Property,
-  secondProperty: TSESTree.Property,
-): number => {
-  const firstName = getPropertyName(firstProperty);
-  const secondName = getPropertyName(secondProperty);
-  return firstName.localeCompare(secondName);
-};
-
 /**
  * Reports an ordering issue to ESLint and generates fixes.
  * @param ruleContext The ESLint rule context.

src/css-rules/alphabetical-order/rule-definition.ts

@@ -12,7 +12,9 @@ const alphabeticalOrderRule: Rule.RuleModule = {
     fixable: 'code',
     schema: [],
     messages: {
-      alphabeticalOrder: "Property '{{next}}' should come before '{{current}}' in alphabetical order.",
+      alphabeticalOrder: "Property '{{nextProperty}}' should come before '{{currentProperty}}' in alphabetical order.",
+      fontFaceOrder:
+        "Properties in fontFace should be ordered with 'src' first, followed by other properties in alphabetical order. Property '{{nextProperty}}' should come before '{{currentProperty}}'.",
     },
   },
   create(context) {