antebudimir/eslint-plugin-vanilla-extract
1
0
Fork 0
mirror of https://github.com/antebudimir/eslint-plugin-vanilla-extract.git synced 2025-12-31 17:03:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

test ✅: 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 5f1e602dee
25 changed files with 3635 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

111
src/css-rules/alphabetical-order/__tests__/animation.test.ts Normal file
View file

@ -0,0 +1,111 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import alphabeticalOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/alphabetical-order/animation',
rule: alphabeticalOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// keyframes with alphabetical ordering
`
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
opacity: 0,
transform: 'translateY(10px)'
},
'100%': {
opacity: 1,
transform: 'translateY(0)'
}
});
`,
// globalKeyframes with alphabetical ordering
`
import { globalKeyframes } from '@vanilla-extract/css';
globalKeyframes('fadeIn', {
'0%': {
opacity: 0,
transform: 'translateY(10px)'
},
'100%': {
opacity: 1,
transform: 'translateY(0)'
}
});
`,
],
invalid: [
// keyframes with incorrect ordering
{
code: `
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
transform: 'translateY(10px)',
opacity: 0
},
'100%': {
transform: 'translateY(0)',
opacity: 1
}
});
`,
errors: [{ messageId: 'alphabeticalOrder' }, { messageId: 'alphabeticalOrder' }],
output: `
import { keyframes } from '@vanilla-extract/css';
const fadeIn = keyframes({
'0%': {
opacity: 0,
transform: 'translateY(10px)'
},
'100%': {
opacity: 1,
transform: 'translateY(0)'
}
});
`,
},
// globalKeyframes with incorrect ordering
{
code: `
import { globalKeyframes } from '@vanilla-extract/css';
globalKeyframes('fadeIn', {
'0%': {
transform: 'translateY(10px)',
opacity: 0
},
'100%': {
transform: 'translateY(0)',
opacity: 1
}
});
`,
errors: [{ messageId: 'alphabeticalOrder' }, { messageId: 'alphabeticalOrder' }],
output: `
import { globalKeyframes } from '@vanilla-extract/css';
globalKeyframes('fadeIn', {
'0%': {
opacity: 0,
transform: 'translateY(10px)'
},
'100%': {
opacity: 1,
transform: 'translateY(0)'
}
});
`,
},
],
});

143
src/css-rules/alphabetical-order/__tests__/font-face.test.ts Normal file
View file

@ -0,0 +1,143 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import alphabeticalOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/alphabetical-order/font-face',
rule: alphabeticalOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// fontFace with src first and other properties alphabetically ordered
`
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'
});
`,
// globalFontFace with src first and other properties alphabetically ordered
`
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'
});
`,
],
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'
});
`,
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'
});
`,
},
// fontFace with src first but other properties not in alphabetical order
{
code: `
import { fontFace } from '@vanilla-extract/css';
const myFont = fontFace({
src: ['url("/fonts/MyFont.woff2") format("woff2")'],
fontWeight: '400',
ascentOverride: '90%',
fontStyle: 'normal'
});
`,
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%'
});
`,
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'
});
`,
},
// globalFontFace with src first but other properties not in alphabetical order
{
code: `
import { globalFontFace } from '@vanilla-extract/css';
globalFontFace('GlobalFont', {
src: ['url("/fonts/MyFont.woff2") format("woff2")'],
fontWeight: '400',
fontStyle: 'normal',
ascentOverride: '90%'
});
`,
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'
});
`,
},
],
});

52
src/css-rules/alphabetical-order/__tests__/global.test.ts Normal file
View file

@ -0,0 +1,52 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import alphabeticalOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/alphabetical-order/global',
rule: alphabeticalOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// globalStyle with alphabetical ordering
`
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: 'white',
color: 'black',
margin: 0,
padding: 0
});
`,
],
invalid: [
// globalStyle with incorrect ordering
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
color: 'black',
backgroundColor: 'white',
padding: 0,
margin: 0
});
`,
errors: [{ messageId: 'alphabeticalOrder' }],
output: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: 'white',
color: 'black',
margin: 0,
padding: 0
});
`,
},
],
});

92
src/css-rules/alphabetical-order/__tests__/recipe.test.ts Normal file
View file

@ -0,0 +1,92 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import alphabeticalOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/alphabetical-order/recipe',
rule: alphabeticalOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// Recipe with alphabetical ordering
`
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
alignItems: 'center',
display: 'flex'
},
variants: {
color: {
blue: {
backgroundColor: 'blue',
color: 'white'
},
red: {
backgroundColor: 'red',
color: 'black'
}
}
}
});
`,
],
invalid: [
// Recipe with incorrect ordering
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
display: 'flex',
alignItems: 'center'
},
variants: {
color: {
blue: {
color: 'white',
backgroundColor: 'blue'
},
red: {
color: 'black',
backgroundColor: 'red'
}
}
}
});
`,
errors: [
{ messageId: 'alphabeticalOrder' },
{ messageId: 'alphabeticalOrder' },
{ messageId: 'alphabeticalOrder' },
],
output: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
alignItems: 'center',
display: 'flex'
},
variants: {
color: {
blue: {
backgroundColor: 'blue',
color: 'white'
},
red: {
backgroundColor: 'red',
color: 'black'
}
}
}
});
`,
},
],
});

111
src/css-rules/alphabetical-order/__tests__/style.test.ts Normal file
View file

@ -0,0 +1,111 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import alphabeticalOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/alphabetical-order/style',
rule: alphabeticalOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// Basic style object with alphabetical ordering
`
import { style } from '@vanilla-extract/css';
const myStyle = style({
alignItems: 'center',
backgroundColor: 'red',
color: 'blue',
display: 'flex',
margin: '10px',
padding: '20px',
zIndex: 1
});
`,
// Style with nested selectors
`
import { style } from '@vanilla-extract/css';
const myStyle = style({
alignItems: 'center',
backgroundColor: 'red',
color: 'blue',
selectors: {
'&:hover': {
backgroundColor: 'blue',
color: 'white'
}
}
});
`,
],
invalid: [
// Basic style object with incorrect ordering
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
backgroundColor: 'red',
alignItems: 'center',
padding: '20px',
color: 'blue',
margin: '10px',
display: 'flex',
zIndex: 1
});
`,
errors: [{ messageId: 'alphabeticalOrder' }],
output: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
alignItems: 'center',
backgroundColor: 'red',
color: 'blue',
display: 'flex',
margin: '10px',
padding: '20px',
zIndex: 1
});
`,
},
// Style with nested selectors having incorrect ordering
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
backgroundColor: 'red',
alignItems: 'center',
color: 'blue',
selectors: {
'&:hover': {
color: 'white',
backgroundColor: 'blue'
}
}
});
`,
errors: [{ messageId: 'alphabeticalOrder' }, { messageId: 'alphabeticalOrder' }],
output: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
alignItems: 'center',
backgroundColor: 'red',
color: 'blue',
selectors: {
'&:hover': {
backgroundColor: 'blue',
color: 'white'
}
}
});
`,
},
],
});

64
src/css-rules/alphabetical-order/__tests__/variants.test.ts Normal file
View file

@ -0,0 +1,64 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import alphabeticalOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/alphabetical-order/variants',
rule: alphabeticalOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// styleVariants with alphabetical ordering
`
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
backgroundColor: 'blue',
color: 'white'
},
secondary: {
backgroundColor: 'gray',
color: 'black'
}
});
`,
],
invalid: [
// styleVariants with incorrect ordering
{
code: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
color: 'white',
backgroundColor: 'blue'
},
secondary: {
color: 'black',
backgroundColor: 'gray'
}
});
`,
errors: [{ messageId: 'alphabeticalOrder' }, { messageId: 'alphabeticalOrder' }],
output: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
backgroundColor: 'blue',
color: 'white'
},
secondary: {
backgroundColor: 'gray',
color: 'black'
}
});
`,
},
],
});

70
src/css-rules/concentric-order/__tests__/animation.test.ts Normal file
View file

@ -0,0 +1,70 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import concentricOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/concentric-order/animation',
rule: concentricOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// keyframes with concentric ordering
`
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
}
});
`,
],
invalid: [
// keyframes with incorrect ordering
{
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'
}
});
`,
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
}
});
`,
},
],
});

97
src/css-rules/concentric-order/__tests__/font-face.test.ts Normal file
View file

@ -0,0 +1,97 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import concentricOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/concentric-order/font-face',
rule: concentricOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// fontFace with src first and other properties alphabetically ordered
`
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'
});
`,
// globalFontFace with src first and other properties alphabetically ordered
`
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'
});
`,
],
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'
});
`,
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%'
});
`,
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'
});
`,
},
],
});

58
src/css-rules/concentric-order/__tests__/global.test.ts Normal file
View file

@ -0,0 +1,58 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import concentricOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/concentric-order/global',
rule: concentricOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// globalStyle with concentric ordering
`
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
position: 'relative',
display: 'block',
margin: 0,
backgroundColor: 'white',
padding: 0,
color: 'black'
});
`,
],
invalid: [
// globalStyle with incorrect ordering
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
color: 'black',
margin: 0,
backgroundColor: 'white',
padding: 0,
display: 'block',
position: 'relative'
});
`,
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
position: 'relative',
display: 'block',
margin: 0,
backgroundColor: 'white',
padding: 0,
color: 'black'
});
`,
},
],
});

101
src/css-rules/concentric-order/__tests__/recipe.test.ts Normal file
View file

@ -0,0 +1,101 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import concentricOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/concentric-order/recipe',
rule: concentricOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// Recipe with concentric ordering
`
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
position: 'relative',
display: 'flex',
alignItems: 'center',
backgroundColor: 'white',
width: '100%'
},
variants: {
color: {
blue: {
position: 'relative',
backgroundColor: 'blue',
color: 'white'
},
red: {
position: 'relative',
backgroundColor: 'red',
color: 'black'
}
}
}
});
`,
],
invalid: [
// Recipe with incorrect ordering
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
backgroundColor: 'white',
width: '100%',
display: 'flex',
alignItems: 'center'
},
variants: {
color: {
blue: {
color: 'white',
backgroundColor: 'blue',
position: 'relative'
},
red: {
color: 'black',
backgroundColor: 'red',
position: 'relative'
}
}
}
});
`,
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
display: 'flex',
alignItems: 'center',
backgroundColor: 'white',
width: '100%'
},
variants: {
color: {
blue: {
position: 'relative',
backgroundColor: 'blue',
color: 'white'
},
red: {
position: 'relative',
backgroundColor: 'red',
color: 'black'
}
}
}
});
`,
},
],
});

129
src/css-rules/concentric-order/__tests__/style.test.ts Normal file
View file

@ -0,0 +1,129 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import concentricOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/concentric-order/style',
rule: concentricOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// Basic style object with concentric ordering
`
import { style } from '@vanilla-extract/css';
const myStyle = style({
boxSizing: 'border-box',
position: 'relative',
zIndex: 1,
display: 'flex',
alignItems: 'center',
transform: 'none',
opacity: 1,
margin: '1rem',
border: '1px solid black',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
backgroundColor: 'red',
padding: '2rem',
width: '10rem',
height: '10rem',
color: 'blue',
fontSize: '16rem'
});
`,
// Style with nested selectors
`
import { style } from '@vanilla-extract/css';
const myStyle = style({
position: 'relative',
display: 'flex',
alignItems: 'center',
backgroundColor: 'red',
color: 'blue',
selectors: {
'&:hover': {
position: 'relative',
opacity: 0.8,
backgroundColor: 'blue',
color: 'white'
}
}
});
`,
],
invalid: [
// Basic style object with incorrect ordering
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
color: 'blue',
width: '10rem',
display: 'flex',
backgroundColor: 'red',
margin: '1rem',
position: 'relative'
});
`,
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
position: 'relative',
display: 'flex',
margin: '1rem',
backgroundColor: 'red',
width: '10rem',
color: 'blue'
});
`,
},
// Style with nested selectors having incorrect ordering
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
color: 'blue',
display: 'flex',
backgroundColor: 'red',
position: 'relative',
selectors: {
'&:hover': {
color: 'white',
position: 'relative',
backgroundColor: 'blue'
}
}
});
`,
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
position: 'relative',
display: 'flex',
backgroundColor: 'red',
color: 'blue',
selectors: {
'&:hover': {
position: 'relative',
backgroundColor: 'blue',
color: 'white'
}
}
});
`,
},
],
});

135
src/css-rules/concentric-order/__tests__/variants.test.ts Normal file
View file

@ -0,0 +1,135 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import concentricOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/concentric-order/variants',
rule: concentricOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// styleVariants with concentric ordering
`
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
position: 'relative',
display: 'flex',
margin: '1rem',
backgroundColor: 'blue',
padding: '0.5rem',
color: 'white'
},
secondary: {
position: 'relative',
display: 'flex',
margin: '0.8rem',
backgroundColor: 'gray',
padding: '0.4rem',
color: 'black'
}
});
`,
],
invalid: [
// styleVariants with incorrect ordering
{
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'
}
});
`,
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
position: 'relative',
display: 'flex',
margin: '1rem',
backgroundColor: 'blue',
padding: '0.5rem',
color: 'white'
},
secondary: {
position: 'relative',
display: 'flex',
margin: '0.8rem',
backgroundColor: 'gray',
padding: '0.4rem',
color: 'black'
}
});
`,
},
// styleVariants with some variants having incorrect ordering
{
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'
}
});
`,
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { styleVariants } from '@vanilla-extract/css';
const variants = styleVariants({
primary: {
position: 'relative',
display: 'flex',
margin: '1rem',
backgroundColor: 'blue',
padding: '0.5rem',
color: 'white'
},
secondary: {
position: 'relative',
display: 'flex',
margin: '0.8rem',
backgroundColor: 'gray',
padding: '0.4rem',
color: 'black'
}
});
`,
},
],
});

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)'
}
});
`,
},
],
});

127
src/css-rules/custom-order/__tests__/font-face.test.ts Normal file
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'
});
`,
},
],
});

127
src/css-rules/custom-order/__tests__/global.test.ts Normal file
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/global',
rule: customGroupOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// globalStyle with custom group ordering (concentric for remaining)
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
margin: 0,
position: 'relative',
display: 'block',
backgroundColor: 'white',
padding: 0,
color: 'black'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
},
// globalStyle with custom group ordering (alphabetical for remaining)
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
margin: 0,
backgroundColor: 'white',
color: 'black',
display: 'block',
padding: 0,
position: 'relative'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
},
],
invalid: [
// globalStyle with incorrect ordering (concentric for remaining)
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
color: 'black',
margin: 0,
backgroundColor: 'white',
padding: 0,
display: 'block',
position: 'relative'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
margin: 0,
position: 'relative',
display: 'block',
backgroundColor: 'white',
padding: 0,
color: 'black'
});
`,
},
// globalStyle with incorrect ordering (alphabetical for remaining)
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
position: 'relative',
display: 'block',
margin: 0,
backgroundColor: 'white',
padding: 0,
color: 'black'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
margin: 0,
backgroundColor: 'white',
color: 'black',
display: 'block',
padding: 0,
position: 'relative'
});
`,
},
],
});

211
src/css-rules/custom-order/__tests__/recipe.test.ts Normal file
View file

@ -0,0 +1,211 @@
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/recipe',
rule: customGroupOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// Recipe with custom group ordering (concentric for remaining)
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
width: '100%',
margin: 0,
position: 'relative',
display: 'flex',
alignItems: 'center',
backgroundColor: 'white'
},
variants: {
color: {
blue: {
position: 'relative',
backgroundColor: 'blue',
color: 'white'
},
red: {
position: 'relative',
backgroundColor: 'red',
color: 'black'
}
}
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
},
// Recipe with custom group ordering (alphabetical for remaining)
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
width: '100%',
margin: 0,
alignItems: 'center',
backgroundColor: 'white',
display: 'flex',
position: 'relative'
},
variants: {
color: {
blue: {
backgroundColor: 'blue',
color: 'white',
position: 'relative'
},
red: {
backgroundColor: 'red',
color: 'black',
position: 'relative'
}
}
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
},
],
invalid: [
// Recipe with incorrect ordering (concentric for remaining)
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
backgroundColor: 'white',
width: '100%',
display: 'flex',
alignItems: 'center',
margin: 0
},
variants: {
color: {
blue: {
color: 'white',
backgroundColor: 'blue',
position: 'relative'
},
red: {
color: 'black',
backgroundColor: 'red',
position: 'relative'
}
}
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
width: '100%',
margin: 0,
display: 'flex',
alignItems: 'center',
backgroundColor: 'white'
},
variants: {
color: {
blue: {
position: 'relative',
backgroundColor: 'blue',
color: 'white'
},
red: {
position: 'relative',
backgroundColor: 'red',
color: 'black'
}
}
}
});
`,
},
// Recipe with incorrect ordering (alphabetical for remaining)
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
position: 'relative',
display: 'flex',
alignItems: 'center',
backgroundColor: 'white',
width: '100%',
margin: 0
},
variants: {
color: {
blue: {
position: 'relative',
backgroundColor: 'blue',
color: 'white'
}
}
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
width: '100%',
margin: 0,
alignItems: 'center',
backgroundColor: 'white',
display: 'flex',
position: 'relative'
},
variants: {
color: {
blue: {
backgroundColor: 'blue',
color: 'white',
position: 'relative'
}
}
}
});
`,
},
],
});

252
src/css-rules/custom-order/__tests__/style.test.ts Normal file
View file

@ -0,0 +1,252 @@
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/style',
rule: customGroupOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// Style with custom group ordering (dimensions, margin, font, border, boxShadow)
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
// dimensions group first
width: '10rem',
minWidth: '5rem',
height: '10rem',
maxHeight: '20rem',
// margin group second
margin: '1rem',
marginTop: '0.5rem',
// font group third
fontFamily: 'sans-serif',
fontSize: '1rem',
fontWeight: 'bold',
// border group fourth
border: '1px solid black',
borderRadius: '4px',
// boxShadow group fifth
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
// remaining properties in concentric order
position: 'relative',
display: 'flex',
backgroundColor: 'red',
padding: '2rem',
color: 'blue'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
},
// Style with nested selectors following custom group ordering
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
width: '10rem',
margin: '1rem',
fontFamily: 'sans-serif',
border: '1px solid black',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
position: 'relative',
backgroundColor: 'red',
selectors: {
'&:hover': {
width: '12rem',
margin: '12px',
fontSize: '1rem',
borderColor: 'blue',
boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
position: 'relative',
backgroundColor: 'blue',
color: 'white'
}
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
},
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
// dimensions group first
width: '10rem',
height: '10rem',
// margin group second
margin: '1rem',
// font group third
fontFamily: 'sans-serif',
// border group fourth
border: '1px solid black',
// boxShadow group fifth
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
// remaining properties in alphabetical order
backgroundColor: 'red',
color: 'blue',
display: 'flex',
padding: '2rem',
position: 'relative'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
},
],
invalid: [
// Style with incorrect custom group ordering
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
position: 'relative',
border: '1px solid black',
width: '10rem',
color: 'blue',
margin: '1rem',
fontFamily: 'sans-serif',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
backgroundColor: 'red'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
width: '10rem',
margin: '1rem',
fontFamily: 'sans-serif',
border: '1px solid black',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
position: 'relative',
backgroundColor: 'red',
color: 'blue'
});
`,
},
// Style with nested selectors having incorrect ordering
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
border: '1px solid black',
width: '10rem',
position: 'relative',
margin: '1rem',
selectors: {
'&:hover': {
color: 'white',
width: '12rem',
border: '2px solid blue',
margin: '1.2rem',
backgroundColor: 'blue'
}
}
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
output: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
width: '10rem',
margin: '1rem',
border: '1px solid black',
position: 'relative',
selectors: {
'&:hover': {
width: '12rem',
margin: '1.2rem',
border: '2px solid blue',
backgroundColor: 'blue',
color: 'white'
}
}
});
`,
},
{
code: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
position: 'relative',
border: '1px solid black',
width: '10rem',
padding: '2rem',
color: 'blue',
margin: '1rem',
display: 'flex',
fontFamily: 'sans-serif',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
backgroundColor: 'red'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { style } from '@vanilla-extract/css';
const myStyle = style({
width: '10rem',
margin: '1rem',
fontFamily: 'sans-serif',
border: '1px solid black',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
backgroundColor: 'red',
color: 'blue',
display: 'flex',
padding: '2rem',
position: 'relative'
});
`,
},
],
});

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'
}
});
`,
},
],
});

13
src/css-rules/shared-utils/order-strategy-visitor-creator.ts
View file

@ -18,9 +18,10 @@ import { processStyleNode } from './style-node-processor.js';
* @returns An object with visitor functions for the ESLint rule.
*
* This function sets up visitors for the following cases:
* 1. Style-related functions: 'style', 'styleVariants', 'createVar', 'createTheme', 'createThemeContract'
* 2. The 'globalStyle' function
* 3. The 'recipe' function
* 1. The fontFace and globalFontFace functions.
* 2. Style-related functions: 'keyframes', 'style', 'styleVariants'.
* 3. The 'globalStyle' and 'globalKeyframes' function
* 4. The 'recipe' function
*
* Each visitor applies the appropriate ordering strategy to the style objects in these function calls.
*/
@ -80,11 +81,7 @@ export const createNodeVisitors = (
}
// Handle style-related functions
if (
['createThemeContract', 'createVar', 'createTheme', 'keyframes', 'style', 'styleVariants'].includes(
node.callee.name,
)
) {
if (['keyframes', 'style', 'styleVariants'].includes(node.callee.name)) {
if (node.arguments.length > 0) {
const styleArguments = node.arguments[0];
processStyleNode(ruleContext, styleArguments as TSESTree.Node, processProperty);

2
src/index.ts
View file

@ -5,7 +5,7 @@ import customOrderRule from './css-rules/custom-order/rule-definition.js';
export const vanillaExtract = {
meta: {
name: '@antebudimir/eslint-plugin-vanilla-extract',
version: '1.4.0',
version: '1.4.1',
},
rules: {
'alphabetical-order': alphabeticalOrderRule,