feat 🥁: add support for linting keyframes and globalKeyframes

This commit is contained in:
Ante Budimir 2025-03-06 06:23:54 +02:00
parent 223a81dddf
commit dea0a328cf
6 changed files with 380 additions and 522 deletions

View file

@ -59,15 +59,22 @@ export const createNodeVisitors = (
}
// Handle style-related functions
if (['style', 'styleVariants', 'createVar', 'createTheme', 'createThemeContract'].includes(node.callee.name)) {
if (
['createThemeContract', 'createVar', 'createTheme', 'keyframes', 'style', 'styleVariants'].includes(
node.callee.name,
)
) {
if (node.arguments.length > 0) {
const styleArg = node.arguments[0];
processStyleNode(ruleContext, styleArg as TSESTree.Node, processProperty);
}
}
// Handle globalStyle function
if (node.callee.name === 'globalStyle' && node.arguments.length >= 2) {
// Handle global functions
if (
(node.callee.name === 'globalKeyframes' || node.callee.name === 'globalStyle') &&
node.arguments.length >= 2
) {
const styleArg = node.arguments[1];
processStyleNode(ruleContext, styleArg as TSESTree.Node, processProperty);
}

View file

@ -9,447 +9,7 @@ import {
} from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';
globalStyle('*, ::before, ::after', {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
});
export const item = style({
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
});
const triggerBase = style({
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
// Comment to test that the linter doesn't remove it
':focus-visible': {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
});
export const selectButtonVariants = styleVariants({
// Comment to test that the linter doesn't remove it
bordered: {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
borderless: {
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
});
export const trigger = recipe({
// Comment to test that the linter doesn't remove it
base: triggerBase,
// Comment to test that the linter doesn't remove it
variants: {
// Comment to test that the linter doesn't remove it
isOpen: {
false: {
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
// Comment to test that the linter doesn't remove it
':hover': {
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
},
// Comment to test that the linter doesn't remove it
true: {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
// Comment to test that the linter doesn't remove it
':hover': {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
},
},
},
});
const accordionContentBase = style([
// Comment to test that the linter doesn't remove it
{
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
// Comment to test that the linter doesn't remove it
'@supports': {
'(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
},
},
]);
export const accordionContent = recipe({
// Comment to test that the linter doesn't remove it
base: accordionContentBase,
// Comment to test that the linter doesn't remove it
variants: {
// Comment to test that the linter doesn't remove it
isOpen: {
// Comment to test that the linter doesn't remove it
false: {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
true: {
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
// Comment to test that the linter doesn't remove it
':focus-visible': {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
},
},
},
});
export const clearAllFiltersButton = style({
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
':hover': {
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
selectors: {
// Comment to test that the linter doesn't remove it
'&[data-pressed]': {
// Comment to test that the linter doesn't remove it
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
},
});
// fontFaces
export const theFont = fontFace({
// Comment to test that the linter doesn't remove it
src: ['url("/fonts/MyFont.woff2") format("woff2")', 'url("/fonts/MyFont.woff") format("woff")'],
@ -486,100 +46,389 @@ globalFontFace('GlobalFont', {
fontVariationSettings: '"wght" 400',
});
export const starter = keyframes({
// Comment to test that the linter doesn't remove it
'0%': {
backgroundColor: 'initial',
border: 'Background',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderRight: 'ActiveBorder',
boxShadow: 'none',
boxSizing: 'inherit',
color: 'red',
cursor: 'pointer',
display: 'flex',
fontSize: 'large',
gap: 'revert',
margin: '0',
outline: 'none',
position: 'relative',
right: 'inherit',
transform: 'none',
},
// Comment to test that the linter doesn't remove it
'100%': {
// Comment to test that the linter doesn't remove it
backgroundColor: 'initial',
border: 'Background',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderRight: 'ActiveBorder',
boxShadow: 'none',
boxSizing: 'inherit',
color: 'red',
cursor: 'pointer',
display: 'flex',
fontSize: 'large',
gap: 'revert',
margin: '0',
outline: 'none',
position: 'relative',
right: 'inherit',
transform: 'none',
},
});
// keyframes
export const spinster = globalKeyframes('spin', {
// Comment to test that the linter doesn't remove it
from: {
backgroundColor: 'initial',
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderRight: 'ActiveBorder',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
color: 'red',
cursor: 'pointer',
display: 'flex',
fontSize: 'large',
gap: 'revert',
margin: '0',
outline: 'none',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
// Comment to test that the linter doesn't remove it
to: {
// Comment to test that the linter doesn't remove it
backgroundColor: 'initial',
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderRight: 'ActiveBorder',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
color: 'red',
cursor: 'pointer',
display: 'flex',
fontSize: 'large',
gap: 'revert',
margin: '0',
outline: 'none',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
});
export const starter = keyframes({
// Comment to test that the linter doesn't remove it
'0%': {
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
// Comment to test that the linter doesn't remove it
'100%': {
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
});
globalStyle('*, ::before, ::after', {
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
});
// style with an array
const accordionContentBase = style([
// Comment to test that the linter doesn't remove it
{
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
// special selector to test that the linter doesn't remove it
'@supports': {
'(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
},
},
]);
export const accordionContent = recipe({
// Comment to test that the linter doesn't remove it
base: accordionContentBase,
// Comment to test that the linter doesn't remove it
variants: {
// Comment to test that the linter doesn't remove it
isOpen: {
// Comment to test that the linter doesn't remove it
false: {
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
true: {
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
// pseudo selector inside a variant
':hover': {
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
},
},
},
});
export const item = style({
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
// pseudo selector inside a style
':focus-visible': {
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
selectors: {
// Comment to test that the linter doesn't remove it
'&[data-pressed]': {
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
},
});
export const selectButtonVariants = styleVariants({
// Comment to test that the linter doesn't remove it
bordered: {
// Comment to test that the linter doesn't remove it
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
borderless: {
width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background',
borderRight: 'ActiveBorder',
borderLeft: 'ActiveBorder',
borderRadius: 'initial',
borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none',
boxSizing: 'inherit',
position: 'relative',
right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
},
});

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.1.2',
version: '1.2.0',
},
rules: {
'alphabetical-order': alphabeticalOrderRule,