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

feat 🥁: add wrapper function support with reference tracking

Browse source 
- add reference tracking for wrapper functions in vanilla-extract style objects
- implement ReferenceTracker class for detecting vanilla-extract imports
- add createReferenceBasedNodeVisitors for automatic function detection
- support wrapper functions with parameter mapping enable all lint rules to work with custom wrapper functions

This commit introduces robust reference tracking and wrapper function support, enabling all lint rules to work seamlessly with custom vanilla-extract style patterns while preserving compatibility with existing usage and improving rule extensibility.
This commit is contained in:
Seongmin Choi 2025-06-26 01:51:36 +09:00 • committed by GitHub
parent 35875fbb31
commit 02576d923c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 1942 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,199 @@
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';
export const layerStyle = (
layer: 'reset' | 'theme' | 'component' | 'utilities',
rule: StyleRule,
debugId?: string,
) =>
style(
{
'@layer': {
[layerMap[layer]]: rule,
},
},
debugId,
);
const myStyle = layerStyle('component', {
alignItems: 'center',
backgroundColor: 'red',
color: 'blue',
display: 'flex',
margin: '10px',
padding: '20px',
zIndex: 1
});
`,
// Style with nested selectors
`
import { style } from '@vanilla-extract/css';
export const layerStyle = (
layer: 'reset' | 'theme' | 'component' | 'utilities',
rule: StyleRule,
debugId?: string,
) =>
style(
{
'@layer': {
[layerMap[layer]]: rule,
},
},
debugId,
);
const myStyle = layerStyle('component', {
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';
export const layerStyle = (
layer: 'reset' | 'theme' | 'component' | 'utilities',
rule: StyleRule,
debugId?: string,
) =>
style(
{
'@layer': {
[layerMap[layer]]: rule,
},
},
debugId,
);
const myStyle = layerStyle('component', {
backgroundColor: 'red',
alignItems: 'center',
padding: '20px',
color: 'blue',
margin: '10px',
display: 'flex',
zIndex: 1
});
`,
errors: [{ messageId: 'alphabeticalOrder' }],
output: `
import { style } from '@vanilla-extract/css';
export const layerStyle = (
layer: 'reset' | 'theme' | 'component' | 'utilities',
rule: StyleRule,
debugId?: string,
) =>
style(
{
'@layer': {
[layerMap[layer]]: rule,
},
},
debugId,
);
const myStyle = layerStyle('component', {
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';
export const layerStyle = (
layer: 'reset' | 'theme' | 'component' | 'utilities',
rule: StyleRule,
debugId?: string,
) =>
style(
{
'@layer': {
[layerMap[layer]]: rule,
},
},
debugId,
);
const myStyle = layerStyle('component', {
backgroundColor: 'red',
alignItems: 'center',
color: 'blue',
selectors: {
'&:hover': {
color: 'white',
backgroundColor: 'blue'
}
}
});
`,
errors: [{ messageId: 'alphabeticalOrder' }, { messageId: 'alphabeticalOrder' }],
output: `
import { style } from '@vanilla-extract/css';
export const layerStyle = (
layer: 'reset' | 'theme' | 'component' | 'utilities',
rule: StyleRule,
debugId?: string,
) =>
style(
{
'@layer': {
[layerMap[layer]]: rule,
},
},
debugId,
);
const myStyle = layerStyle('component', {
alignItems: 'center',
backgroundColor: 'red',
color: 'blue',
selectors: {
'&:hover': {
backgroundColor: 'blue',
color: 'white'
}
}
});
`,
},
],
});