mirror of
https://github.com/antebudimir/eslint-plugin-vanilla-extract.git
synced 2025-12-31 08:53:33 +00:00
chore 🔧: add sample CSS file for linting demo during development
This commit is contained in:
parent
d569dea1fb
commit
88a9d4382f
4 changed files with 588 additions and 3 deletions
|
|
@ -224,7 +224,7 @@ The roadmap outlines the project's current status and future plans:
|
|||
|
||||
### Current Work
|
||||
|
||||
- Compatibility testing to determine if the plugin works with ESLint v8. **Note**: There are no plans to ensure compatibility if issues arise. Upcoming features will be prioritized.
|
||||
- Compatibility testing to determine if the plugin works with ESLint v8. **Note**: There are no immediate plans to ensure compatibility if issues arise. Upcoming features will be prioritized.
|
||||
|
||||
### Upcoming Features
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antebudimir/eslint-plugin-vanilla-extract",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"description": "ESLint plugin for enforcing CSS ordering in vanilla-extract styles",
|
||||
"author": "Ante Budimir",
|
||||
"license": "MIT",
|
||||
|
|
|
|||
585
src/css-sample/sample.css.ts
Normal file
585
src/css-sample/sample.css.ts
Normal file
|
|
@ -0,0 +1,585 @@
|
|||
import {
|
||||
fontFace,
|
||||
globalFontFace,
|
||||
globalKeyframes,
|
||||
globalStyle,
|
||||
keyframes,
|
||||
style,
|
||||
styleVariants,
|
||||
} 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',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
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")'],
|
||||
fontWeight: '400 700',
|
||||
fontStyle: 'normal',
|
||||
fontStretch: 'normal',
|
||||
fontDisplay: 'swap',
|
||||
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',
|
||||
ascentOverride: '90%',
|
||||
descentOverride: '10%',
|
||||
lineGapOverride: '10%',
|
||||
sizeAdjust: '90%',
|
||||
fontVariant: 'normal',
|
||||
fontFeatureSettings: '"liga" 1',
|
||||
fontVariationSettings: '"wght" 400',
|
||||
});
|
||||
|
||||
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")'],
|
||||
fontWeight: '400 700',
|
||||
fontStyle: 'normal',
|
||||
fontStretch: 'normal',
|
||||
fontDisplay: 'swap',
|
||||
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',
|
||||
ascentOverride: '90%',
|
||||
descentOverride: '10%',
|
||||
lineGapOverride: '10%',
|
||||
sizeAdjust: '90%',
|
||||
fontVariant: 'normal',
|
||||
fontFeatureSettings: '"liga" 1',
|
||||
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',
|
||||
},
|
||||
});
|
||||
|
||||
export const spinster = globalKeyframes('spin', {
|
||||
// Comment to test that the linter doesn't remove it
|
||||
from: {
|
||||
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
|
||||
to: {
|
||||
// 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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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.0.0',
|
||||
version: '1.0.1',
|
||||
},
|
||||
rules: {
|
||||
'alphabetical-order': alphabeticalOrderRule,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue