antebudimir/eslint-plugin-vanilla-extract
1
0
Fork 0
mirror of https://github.com/antebudimir/eslint-plugin-vanilla-extract.git synced 2026-01-02 09:33:33 +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

187
src/css-rules/custom-order/__tests__/variants.test.ts Normal file
View file

@ -0,0 +1,187 @@
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/variants',
rule: customGroupOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// styleVariants with custom group ordering (concentric for remaining)
{
code: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
margin: '1rem',
padding: '0.5rem',
position: 'relative',
display: 'flex',
backgroundColor: 'blue',
color: 'white'
},
secondary: {
margin: '0.8rem',
padding: '0.4rem',
position: 'relative',
display: 'flex',
backgroundColor: 'gray',
color: 'black'
}
});
`,
options: [
{
groupOrder: ['margin', 'padding', 'dimensions', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
},
// styleVariants with custom group ordering (alphabetical for remaining)
{
code: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
margin: '1rem',
padding: '0.5rem',
backgroundColor: 'blue',
color: 'white',
display: 'flex',
position: 'relative'
},
secondary: {
margin: '0.8rem',
padding: '0.4rem',
backgroundColor: 'gray',
color: 'black',
display: 'flex',
position: 'relative'
}
});
`,
options: [
{
groupOrder: ['margin', 'padding', 'dimensions', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
},
],
invalid: [
// styleVariants with incorrect ordering (concentric for remaining)
{
code: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
color: 'white',
backgroundColor: 'blue',
padding: '0.5rem',
margin: '1rem',
display: 'flex',
position: 'relative'
},
secondary: {
color: 'black',
backgroundColor: 'gray',
padding: '0.4rem',
margin: '0.8rem',
display: 'flex',
position: 'relative'
}
});
`,
options: [
{
groupOrder: ['margin', 'padding', 'dimensions', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
margin: '1rem',
padding: '0.5rem',
position: 'relative',
display: 'flex',
backgroundColor: 'blue',
color: 'white'
},
secondary: {
margin: '0.8rem',
padding: '0.4rem',
position: 'relative',
display: 'flex',
backgroundColor: 'gray',
color: 'black'
}
});
`,
},
// styleVariants with incorrect ordering (alphabetical for remaining)
{
code: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
position: 'relative',
display: 'flex',
margin: '1rem',
padding: '0.5rem',
backgroundColor: 'blue',
color: 'white'
},
secondary: {
color: 'black',
backgroundColor: 'gray',
padding: '0.4rem',
margin: '0.8rem',
display: 'flex',
position: 'relative'
}
});
`,
options: [
{
groupOrder: ['margin', 'padding', 'dimensions', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
margin: '1rem',
padding: '0.5rem',
backgroundColor: 'blue',
color: 'white',
display: 'flex',
position: 'relative'
},
secondary: {
margin: '0.8rem',
padding: '0.4rem',
backgroundColor: 'gray',
color: 'black',
display: 'flex',
position: 'relative'
}
});
`,
},
],
});