@antebudimir/eslint-plugin-vanilla-extract/dist/css-rules/concentric-order/property-order-enforcer.js

ESLint plugin for enforcing best practices in vanilla-extract CSS styles, including CSS property ordering and additional linting rules.

import { generateFixesForCSSOrder } from '../shared-utils/css-order-fixer.js';
/**
 * Reports a violation of the concentric CSS ordering rule and generates fixes.
 *
 * @param ruleContext The ESLint rule context used for reporting and fixing.
 * @param currentProperty The current property in the order.
 * @param nextProperty The next property that is out of order.
 * @param cssPropertyInfoList The full list of CSS properties to be reordered.
 */
const reportOrderingIssue = (ruleContext, currentProperty, nextProperty, cssPropertyInfoList) => {
    ruleContext.report({
        node: nextProperty.node,
        messageId: 'incorrectOrder',
        data: {
            nextProperty: nextProperty.name,
            currentProperty: currentProperty.name,
        },
        fix: (fixer) => generateFixesForCSSOrder(fixer, ruleContext, cssPropertyInfoList, compareProperties, (propertyInfo) => propertyInfo.node),
    });
};
/**
 * Compares two CSS properties based on their priority and position within their group.
 *
 * @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 compareProperties = (firstProperty, secondProperty) => {
    if (firstProperty.priority !== secondProperty.priority) {
        return firstProperty.priority - secondProperty.priority;
    }
    return firstProperty.positionInGroup - secondProperty.positionInGroup;
};
/**
 * Enforces concentric ordering of CSS properties.
 *
 * This function checks the order of CSS properties to ensure they follow a concentric order
 * based on their priority and position within their group. It performs the following steps:
 * 1. Validates if there are enough properties to compare.
 * 2. Creates pairs of consecutive properties for comparison.
 * 3. Identifies the first pair that violates the concentric order.
 * 4. If a violation is detected, reports the issue and suggests fixes using ESLint.
 *
 * @param ruleContext - The ESLint rule context used for reporting and fixing.
 * @param cssPropertyInfoList - An array of CSS property information objects to be checked.
 */
export const enforceConcentricCSSOrder = (ruleContext, cssPropertyInfoList) => {
    if (cssPropertyInfoList.length > 1) {
        // Create pairs of consecutive properties
        const propertyPairs = cssPropertyInfoList.slice(0, -1).map((currentProperty, index) => ({
            currentProperty,
            nextProperty: cssPropertyInfoList[index + 1],
        }));
        const violatingPair = propertyPairs.find(({ currentProperty, nextProperty }) => compareProperties(currentProperty, nextProperty) > 0);
        if (violatingPair) {
            reportOrderingIssue(ruleContext, violatingPair.currentProperty, violatingPair.nextProperty, cssPropertyInfoList);
        }
    }
};