mirror of
https://github.com/antebudimir/eslint-plugin-vanilla-extract.git
synced 2025-12-31 17:03:32 +00:00
feat 🥁: add support for linting keyframes and globalKeyframes
This commit is contained in:
parent
223a81dddf
commit
dea0a328cf
6 changed files with 380 additions and 522 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue