mirror of
https://github.com/antebudimir/eslint-plugin-vanilla-extract.git
synced 2026-01-01 01:13:32 +00:00
589 lines
14 KiB
TypeScript
589 lines
14 KiB
TypeScript
import {
|
|
fontFace,
|
|
globalFontFace,
|
|
globalKeyframes,
|
|
globalStyle,
|
|
keyframes,
|
|
style,
|
|
styleVariants,
|
|
} from '@vanilla-extract/css';
|
|
import { recipe } from '@vanilla-extract/recipes';
|
|
|
|
// 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")'],
|
|
ascentOverride: '90%',
|
|
descentOverride: '10%',
|
|
fontDisplay: 'swap',
|
|
fontFeatureSettings: '"liga" 1',
|
|
fontStretch: 'normal',
|
|
fontStyle: 'normal',
|
|
fontVariant: 'normal',
|
|
fontVariationSettings: '"wght" 400',
|
|
fontWeight: '400 700',
|
|
lineGapOverride: '10%',
|
|
sizeAdjust: '90%',
|
|
unicodeRange:
|
|
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
|
|
});
|
|
|
|
globalFontFace('GlobalFont', {
|
|
// Comment to test that the linter doesn't remove it
|
|
src: ['url("/fonts/MyFont.woff2") format("woff2")', 'url("/fonts/MyFont.woff") format("woff")'],
|
|
ascentOverride: '90%',
|
|
descentOverride: '10%',
|
|
fontDisplay: 'swap',
|
|
fontFeatureSettings: '"liga" 1',
|
|
fontStretch: 'normal',
|
|
fontStyle: 'normal',
|
|
fontVariant: 'normal',
|
|
fontVariationSettings: '"wght" 400',
|
|
fontWeight: '400 700',
|
|
lineGapOverride: '10%',
|
|
sizeAdjust: '90%',
|
|
unicodeRange:
|
|
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
|
|
});
|
|
|
|
// keyframes
|
|
export const spinster = globalKeyframes('spin', {
|
|
// Comment to test that the linter doesn't remove it
|
|
from: {
|
|
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
|
|
to: {
|
|
// 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 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',
|
|
},
|
|
});
|
|
|
|
// Test cases for noEmptyStyleBlocksRule
|
|
|
|
// export const myRecipe = recipe({
|
|
// base: {
|
|
// color: 'blue',
|
|
// selectors: {},
|
|
// '@media': {},
|
|
// '@supports': {},
|
|
// },
|
|
// variants: {
|
|
// size: {
|
|
// small: {
|
|
// selectors: {
|
|
// '&:hover': {},
|
|
// },
|
|
// '@media': {
|
|
// '(min-width: 768px)': {},
|
|
// },
|
|
// '@supports': {
|
|
// '(display: grid)': {},
|
|
// },
|
|
// },
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
// const base = style({ padding: 12 });
|
|
// export const variant = styleVariants({
|
|
// primary: [],
|
|
// secondary: [],
|
|
// bordered: {},
|
|
// borderless: {},
|
|
// });
|
|
|
|
// const baseStyles = {
|
|
// color: 'blue',
|
|
// margin: '10px',
|
|
// };
|
|
|
|
// const isDarkMode = false;
|
|
|
|
// export const spreadStyle = style({
|
|
// ...baseStyles,
|
|
// ...{},
|
|
// });
|
|
|
|
// export const recipeWithNonObjectValue = recipe({
|
|
// base: { color: 'black' },
|
|
// variants: {
|
|
// color: {
|
|
// red: { color: 'red' },
|
|
// // string instead of object
|
|
// string: 'string',
|
|
// // variable instead of object
|
|
// variable: baseStyles,
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
// export const conditionalStyle = style(isDarkMode ? {} : {});
|
|
|
|
// export const recipeWithEmptyVariantValues = recipe({
|
|
// base: { color: 'black' },
|
|
// variants: {
|
|
// color: {
|
|
// blue: {},
|
|
// red: {},
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
// export const nestedEmptyStyle = style({
|
|
// selectors: {
|
|
// '&:hover': {},
|
|
// '&:focus': {},
|
|
// },
|
|
// });
|
|
|
|
// const myEmptyStyle = style({});
|
|
// export { myEmptyStyle };
|
|
|
|
// export const emptyStyle1 = style({});
|
|
// export const emptyStyle2 = style({});
|
|
// export const emptyVariants = styleVariants({});
|
|
// export const emptyRecipe = recipe({});
|
|
|
|
// export const styleWithComments = style({
|
|
// /* This is an empty style */
|
|
// });
|
|
|
|
// export const styleWithEmptyMedia = style({
|
|
// color: 'blue',
|
|
// '@media': {
|
|
// '(min-width: 768px)': {},
|
|
// },
|
|
// });
|
|
|
|
// export const styleWithEmptySelector = style({
|
|
// color: 'blue',
|
|
|
|
// selectors: {
|
|
// '&:hover': {},
|
|
// },
|
|
// });
|
|
|
|
// export const recipeWithBothEmpty = recipe({
|
|
// base: {},
|
|
// variants: {},
|
|
// });
|
|
|
|
// export const recipeWithEmptyVariants = recipe({
|
|
// base: { color: 'black' },
|
|
// variants: {},
|
|
// });
|
|
|
|
// export const recipeWithEmptyBase = recipe({
|
|
// base: {},
|
|
// variants: {
|
|
// color: {
|
|
// blue: { color: 'blue' },
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
// export const recipe = recipe({
|
|
// base: {},
|
|
// variants: {
|
|
// color: {
|
|
// red: {},
|
|
// blue: {},
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
// export const recipeWithNonObjectVariants = recipe({
|
|
// base: { color: 'blue' },
|
|
// variants: {
|
|
// color: {
|
|
// size: 'string instead of object', // This is a string, not an object
|
|
// red: {},
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
// Using the same empty object reference in both branches
|
|
// export const myStyle = style(true ? {} : {});
|
|
|
|
// export const emptyFontFace = fontFace({});
|
|
// globalFontFace('GlobalFont', {});
|
|
// globalKeyframes('a', {});
|
|
// export const emptyKeyframes = keyframes({});
|
|
// globalStyle('ul', {});
|
|
// export const emptyStyleVariants = styleVariants({});
|
|
// export const emptyStyle = style({});
|