test : add comprehensive test suite for CSS ordering rules

Add tests for all three CSS property ordering rules:

    alphabetical-order,
    concentric-order,
    custom-order,

Tests cover all implemented vanilla-extract APIs, fontFace, globalFontFace, globalKeyframes, globalStyle, keyframes, style, and styleVariants.. Each test verifies both valid and invalid cases, along with proper auto-fixing functionality.
This commit is contained in:
Ante Budimir 2025-03-09 18:12:00 +02:00
parent 3e9bad1b02
commit 5f1e602dee
25 changed files with 3635 additions and 24 deletions

View file

@ -0,0 +1,127 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import customGroupOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/custom-order/font-face',
rule: customGroupOrderRule,
configs: {
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
},
valid: [
// fontFace
{
code: `
import { fontFace } from '@vanilla-extract/css';
const myFont = fontFace({
src: ['url("/fonts/MyFont.woff2") format("woff2")'],
ascentOverride: '90%',
descentOverride: '10%',
fontDisplay: 'swap',
fontFeatureSettings: '"liga" 1',
fontStretch: 'normal',
fontStyle: 'normal',
fontVariant: 'normal',
fontWeight: '400'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font'],
sortRemainingProperties: 'concentric',
},
],
},
// globalFontFace
{
code: `
import { globalFontFace } from '@vanilla-extract/css';
globalFontFace('GlobalFont', {
src: ['url("/fonts/MyFont.woff2") format("woff2")'],
ascentOverride: '90%',
descentOverride: '10%',
fontDisplay: 'swap',
fontFeatureSettings: '"liga" 1',
fontStretch: 'normal',
fontStyle: 'normal',
fontVariant: 'normal',
fontWeight: '400'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font'],
sortRemainingProperties: 'concentric',
},
],
},
],
invalid: [
// fontFace with src not first
{
code: `
import { fontFace } from '@vanilla-extract/css';
const myFont = fontFace({
fontWeight: '400',
src: ['url("/fonts/MyFont.woff2") format("woff2")'],
ascentOverride: '90%',
fontStyle: 'normal'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'fontFaceOrder' }],
output: `
import { fontFace } from '@vanilla-extract/css';
const myFont = fontFace({
src: ['url("/fonts/MyFont.woff2") format("woff2")'],
ascentOverride: '90%',
fontStyle: 'normal',
fontWeight: '400'
});
`,
},
// globalFontFace with src not first
{
code: `
import { globalFontFace } from '@vanilla-extract/css';
globalFontFace('GlobalFont', {
fontWeight: '400',
fontStyle: 'normal',
src: ['url("/fonts/MyFont.woff2") format("woff2")'],
ascentOverride: '90%'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'fontFaceOrder' }],
output: `
import { globalFontFace } from '@vanilla-extract/css';
globalFontFace('GlobalFont', {
src: ['url("/fonts/MyFont.woff2") format("woff2")'],
ascentOverride: '90%',
fontStyle: 'normal',
fontWeight: '400'
});
`,
},
],
});