antebudimir/eslint-plugin-vanilla-extract
1
0
Fork 0
mirror of https://github.com/antebudimir/eslint-plugin-vanilla-extract.git synced 2026-04-15 16:27:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge 0bd37dd744 into 62b1844b44

Browse source
This commit is contained in:
Seongmin Choi 2026-03-21 08:47:09 +00:00 • committed by GitHub
commit b727da921d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 143 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,6 +36,18 @@ run({
}
});
`,
// Recipe with base as array (ComplexStyleRule)
`
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
alignItems: 'center',
display: 'flex'
}],
});
`,
],
invalid: [
// Recipe with incorrect ordering
@ -88,5 +100,28 @@ run({
});
`,
},
// Recipe with base array in incorrect order
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
display: 'flex',
alignItems: 'center'
}],
});
`,
errors: [{ messageId: 'alphabeticalOrder' }],
output: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
alignItems: 'center',
display: 'flex'
}],
});
`,
},
],
});

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

@ -41,6 +41,20 @@ run({
}
});
`,
// Recipe with base as array (ComplexStyleRule)
`
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
position: 'relative',
display: 'flex',
backgroundColor: 'white',
width: '100%'
}],
});
`,
],
invalid: [
// Recipe with incorrect ordering
@ -97,5 +111,32 @@ run({
});
`,
},
// Recipe with base array in incorrect order
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
backgroundColor: 'white',
width: '100%',
display: 'flex',
position: 'relative'
}],
});
`,
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
position: 'relative',
display: 'flex',
backgroundColor: 'white',
width: '100%'
}],
});
`,
},
],
});

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

@ -88,6 +88,29 @@ run({
},
],
},
// Recipe with base as array (ComplexStyleRule)
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
width: '100%',
margin: 0,
display: 'flex',
alignItems: 'center',
backgroundColor: 'white'
}],
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
},
],
invalid: [
// Recipe with incorrect ordering (concentric for remaining)
@ -207,5 +230,40 @@ run({
});
`,
},
// Recipe with base array in incorrect order
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
backgroundColor: 'white',
width: '100%',
display: 'flex',
alignItems: 'center',
margin: 0
}],
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: [{
width: '100%',
margin: 0,
display: 'flex',
alignItems: 'center',
backgroundColor: 'white'
}],
});
`,
},
],
});

16
src/css-rules/shared-utils/recipe-property-processor.ts
View file

@ -1,5 +1,6 @@
import type { Rule } from 'eslint';
import { TSESTree } from '@typescript-eslint/utils';
import { processStyleNode } from './style-node-processor.js';
/**
* Processes the `base` and `variants` properties of a recipe object.
@ -8,11 +9,12 @@ import { TSESTree } from '@typescript-eslint/utils';
* @param processProperty A callback function to process each property object (e.g., for alphabetical or concentric ordering).
*
* This function iterates through the properties of the recipe object:
* - For the `base` property, it directly processes the object.
* - For the `variants` property, it processes each variant's options individually.
* - For the `base` property, it processes object or array style nodes.
* - For the `variants` property, it processes each variant option as object or array style nodes.
*
* The function skips any non-Property nodes or nodes without an Identifier key.
* It only processes ObjectExpression values to ensure type safety.
* It delegates node handling to `processStyleNode`, which safely supports
* ObjectExpression and ArrayExpression values.
*/
export const processRecipeProperties = (
ruleContext: Rule.RuleContext,
@ -25,8 +27,8 @@ export const processRecipeProperties = (
}
// Process the `base` property
if (property.key.name === 'base' && property.value.type === 'ObjectExpression') {
processProperty(ruleContext, property.value);
if (property.key.name === 'base') {
processStyleNode(ruleContext, property.value, processProperty);
}
// Process the `variants` property
@ -34,8 +36,8 @@ export const processRecipeProperties = (
property.value.properties.forEach((variantProperty) => {
if (variantProperty.type === 'Property' && variantProperty.value.type === 'ObjectExpression') {
variantProperty.value.properties.forEach((optionProperty) => {
if (optionProperty.type === 'Property' && optionProperty.value.type === 'ObjectExpression') {
processProperty(ruleContext, optionProperty.value);
if (optionProperty.type === 'Property') {
processStyleNode(ruleContext, optionProperty.value, processProperty);
}
});
}