mirror of
https://github.com/antebudimir/eslint-plugin-vanilla-extract.git
synced 2025-12-31 08:53:33 +00:00
feat 🥁: add no-zero-unit rule
This commit is contained in:
parent
c1b4e70bd9
commit
f786f3ec30
2 changed files with 3 additions and 589 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -30,3 +30,6 @@ pnpm-debug.log*
|
|||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
||||
# dev helper
|
||||
src/css-sample/
|
||||
|
|
|
|||
|
|
@ -1,589 +0,0 @@
|
|||
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: '0',
|
||||
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: '0',
|
||||
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: {
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
|
||||
// Comment to test that the linter doesn't remove it
|
||||
to: {
|
||||
// Comment to test that the linter doesn't remove it
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
});
|
||||
|
||||
export const starter = keyframes({
|
||||
// Comment to test that the linter doesn't remove it
|
||||
'0%': {
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
|
||||
// Comment to test that the linter doesn't remove it
|
||||
'100%': {
|
||||
// Comment to test that the linter doesn't remove it
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle('*, ::before, ::after', {
|
||||
// Comment to test that the linter doesn't remove it
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
});
|
||||
|
||||
// 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
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
|
||||
// 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
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
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
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
|
||||
true: {
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
|
||||
// pseudo selector inside a variant
|
||||
':hover': {
|
||||
// Comment to test that the linter doesn't remove it
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const item = style({
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
|
||||
// pseudo selector inside a style
|
||||
':focus-visible': {
|
||||
// Comment to test that the linter doesn't remove it
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
|
||||
selectors: {
|
||||
// Comment to test that the linter doesn't remove it
|
||||
'&[data-pressed]': {
|
||||
// Comment to test that the linter doesn't remove it
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
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
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
|
||||
borderless: {
|
||||
boxSizing: 'inherit',
|
||||
position: 'relative',
|
||||
right: 'inherit',
|
||||
display: 'flex',
|
||||
gap: 'revert',
|
||||
transform: 'none',
|
||||
margin: '0',
|
||||
outline: 'none',
|
||||
border: 'Background',
|
||||
borderRight: 'ActiveBorder',
|
||||
borderLeft: 'ActiveBorder',
|
||||
borderRadius: 'initial',
|
||||
borderBottomLeftRadius: 'initial',
|
||||
borderBottomRightRadius: 'initial',
|
||||
boxShadow: 'none',
|
||||
backgroundColor: 'initial',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
color: 'red',
|
||||
fontSize: 'large',
|
||||
},
|
||||
});
|
||||
|
||||
// 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({});
|
||||
Loading…
Add table
Add a link
Reference in a new issue