mirror of
https://github.com/antebudimir/eslint-plugin-vanilla-extract.git
synced 2026-01-01 09:23:31 +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
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue