antebudimir/eslint-plugin-vanilla-extract
1
0
Fork 0
mirror of https://github.com/antebudimir/eslint-plugin-vanilla-extract.git synced 2026-01-04 02:11:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat ✅: add comprehensive test suite for CSS ordering rules

Browse source 
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 da4d2d6373
25 changed files with 3635 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

151
src/css-rules/custom-order/__tests__/animation.test.ts Normal file
View file

@ -0,0 +1,151 @@
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/animation',
rule: customGroupOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// keyframes with custom group ordering (concentric for remaining)
{
code: `
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
position: 'relative',
transform: 'translateY(1rem)',
opacity: 0
},
'100%': {
position: 'relative',
transform: 'translateY(0)',
opacity: 1
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
},
// keyframes with custom group ordering (alphabetical for remaining)
{
code: `
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
opacity: 0,
position: 'relative',
transform: 'translateY(1rem)'
},
'100%': {
opacity: 1,
position: 'relative',
transform: 'translateY(0)'
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
},
],
invalid: [
// keyframes with incorrect ordering (concentric for remaining)
{
code: `
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
opacity: 0,
transform: 'translateY(1rem)',
position: 'relative'
},
'100%': {
opacity: 1,
transform: 'translateY(0)',
position: 'relative'
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
position: 'relative',
transform: 'translateY(1rem)',
opacity: 0
},
'100%': {
position: 'relative',
transform: 'translateY(0)',
opacity: 1
}
});
`,
},
// keyframes with incorrect ordering (alphabetical for remaining)
{
code: `
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
transform: 'translateY(1rem)',
position: 'relative',
opacity: 0
},
'100%': {
transform: 'translateY(0)',
position: 'relative',
opacity: 1
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
opacity: 0,
position: 'relative',
transform: 'translateY(1rem)'
},
'100%': {
opacity: 1,
position: 'relative',
transform: 'translateY(0)'
}
});
`,
},
],
});