antebudimir/eslint-plugin-vanilla-extract
1
0
Fork 0
mirror of https://github.com/antebudimir/eslint-plugin-vanilla-extract.git synced 2025-12-31 08:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat 🥁: add support for linting keyframes and globalKeyframes

Browse source
This commit is contained in:
Ante Budimir 2025-03-06 06:23:54 +02:00
parent 223a81dddf
commit dea0a328cf
6 changed files with 380 additions and 522 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.npmignore
View file

@ -1,2 +0,0 @@
src/css-sample/
src/**/*.test.ts

7
README.md
View file

@ -21,6 +21,7 @@ An ESLint plugin for enforcing CSS ordering in [vanilla-extract](https://github.
- ESLint 9.0.0 or higher
- Node.js 18.18.0 or higher
- ESM (ECMAScript Modules) only
## Installation
@ -37,6 +38,8 @@ pnpm add -D @antebudimir/eslint-plugin-vanilla-extract
## Usage
**Note: This plugin is ESM-only.** It must be used with ESM configurations and can't be used with CommonJS `require()`.
### ESLint Flat Config (ESLint 9+)
Create or update your `eslint.config.js` or `eslint.config.mjs` file:
@ -225,12 +228,12 @@ 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 immediate 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 plans to ensure compatibility if issues arise. Upcoming features will be prioritized.
### Upcoming Features
- Begin work on test coverage.
- Support for additional vanilla-extract APIs, including `fontFace`, `globalFontFace`, `globalKeyframes`, and `keyframes`.
- Support for additional vanilla-extract APIs, including `fontFace`, `globalFontFace`.
- Option to sort properties within user-defined concentric groups alphabetically instead of following the concentric order. **Note**: This feature will only be implemented if there's sufficient interest from the community.
## Contributing

5
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@antebudimir/eslint-plugin-vanilla-extract",
"version": "1.1.2",
"version": "1.2.0",
"description": "ESLint plugin for enforcing CSS ordering in vanilla-extract styles",
"author": "Ante Budimir",
"license": "MIT",
@ -37,7 +37,8 @@
"files": [
"dist",
"LICENSE",
"README.md"
"README.md",
"!dist/css-sample/"
],
"scripts": {
"build": "tsc",

13
src/css-rules/shared-utils/order-strategy-visitor-creator.ts
View file

@ -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);
}

873
src/css-sample/sample.css.ts
View file

@ -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',
},
});

2
src/index.ts
View file

@ -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,