@antebudimir/eslint-plugin-vanilla-extract
Version:
Comprehensive ESLint plugin for vanilla-extract with CSS property ordering, style validation, and best practices enforcement. Supports alphabetical, concentric and custom CSS ordering, auto-fixing, and zero-runtime safety.
40 lines (39 loc) • 1.97 kB
JavaScript
import { AST_NODE_TYPES, TSESTree } from '@typescript-eslint/utils';
import { generateFixesForCSSOrder } from '../shared-utils/css-order-fixer.js';
import { getPropertyNameForSorting, separateProperties } from '../shared-utils/property-separator.js';
import { comparePropertiesAlphabetically } from './alphabetical-property-comparator.js';
/**
* Processes a font face declaration to enforce property ordering:
* 'src' first, then other properties alphabetically.
*
* @param ruleContext The ESLint rule context for reporting and fixing issues.
* @param fontFaceObject The object expression representing the font face declaration.
*/
export const enforceFontFaceOrder = (ruleContext, fontFaceObject) => {
if (!fontFaceObject || fontFaceObject.type !== AST_NODE_TYPES.ObjectExpression) {
return;
}
const { regularProperties } = separateProperties(fontFaceObject.properties);
if (regularProperties.length <= 1) {
return;
}
// Create pairs of consecutive properties
const propertyPairs = regularProperties.slice(0, -1).map((currentProperty, index) => ({
currentProperty,
nextProperty: regularProperties[index + 1],
}));
const violatingPair = propertyPairs.find(({ currentProperty, nextProperty }) => comparePropertiesAlphabetically(currentProperty, nextProperty) > 0);
if (violatingPair) {
const nextPropertyName = getPropertyNameForSorting(violatingPair.nextProperty);
const currentPropertyName = getPropertyNameForSorting(violatingPair.currentProperty);
ruleContext.report({
node: violatingPair.nextProperty,
messageId: 'fontFaceOrder',
data: {
nextProperty: nextPropertyName,
currentProperty: currentPropertyName,
},
fix: (fixer) => generateFixesForCSSOrder(fixer, ruleContext, regularProperties, comparePropertiesAlphabetically, (property) => property),
});
}
};