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 - ESLint 9.0.0 or higher
- Node.js 18.18.0 or higher - Node.js 18.18.0 or higher
- ESM (ECMAScript Modules) only
## Installation ## Installation
@ -37,6 +38,8 @@ pnpm add -D @antebudimir/eslint-plugin-vanilla-extract
## Usage ## 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+) ### ESLint Flat Config (ESLint 9+)
Create or update your `eslint.config.js` or `eslint.config.mjs` file: 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 ### 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 ### Upcoming Features
- Begin work on test coverage. - 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. - 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 ## Contributing

5
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@antebudimir/eslint-plugin-vanilla-extract", "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", "description": "ESLint plugin for enforcing CSS ordering in vanilla-extract styles",
"author": "Ante Budimir", "author": "Ante Budimir",
"license": "MIT", "license": "MIT",
@ -37,7 +37,8 @@
"files": [ "files": [
"dist", "dist",
"LICENSE", "LICENSE",
"README.md" "README.md",
"!dist/css-sample/"
], ],
"scripts": { "scripts": {
"build": "tsc", "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 // 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) { if (node.arguments.length > 0) {
const styleArg = node.arguments[0]; const styleArg = node.arguments[0];
processStyleNode(ruleContext, styleArg as TSESTree.Node, processProperty); processStyleNode(ruleContext, styleArg as TSESTree.Node, processProperty);
} }
} }
// Handle globalStyle function // Handle global functions
if (node.callee.name === 'globalStyle' && node.arguments.length >= 2) { if (
(node.callee.name === 'globalKeyframes' || node.callee.name === 'globalStyle') &&
node.arguments.length >= 2
) {
const styleArg = node.arguments[1]; const styleArg = node.arguments[1];
processStyleNode(ruleContext, styleArg as TSESTree.Node, processProperty); 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'; } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes'; import { recipe } from '@vanilla-extract/recipes';
globalStyle('*, ::before, ::after', { // fontFaces
// 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({ export const theFont = fontFace({
// Comment to test that the linter doesn't remove it // Comment to test that the linter doesn't remove it
src: ['url("/fonts/MyFont.woff2") format("woff2")', 'url("/fonts/MyFont.woff") format("woff")'], src: ['url("/fonts/MyFont.woff2") format("woff2")', 'url("/fonts/MyFont.woff") format("woff")'],
@ -486,100 +46,389 @@ globalFontFace('GlobalFont', {
fontVariationSettings: '"wght" 400', fontVariationSettings: '"wght" 400',
}); });
export const starter = keyframes({ // 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', { export const spinster = globalKeyframes('spin', {
// Comment to test that the linter doesn't remove it // Comment to test that the linter doesn't remove it
from: { from: {
backgroundColor: 'initial', width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background', border: 'Background',
borderBottomLeftRadius: 'initial', borderRight: 'ActiveBorder',
borderBottomRightRadius: 'initial',
borderLeft: 'ActiveBorder', borderLeft: 'ActiveBorder',
borderRadius: 'initial', borderRadius: 'initial',
borderRight: 'ActiveBorder', borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none', boxShadow: 'none',
boxSizing: 'inherit', boxSizing: 'inherit',
color: 'red',
cursor: 'pointer',
display: 'flex',
fontSize: 'large',
gap: 'revert',
margin: '0',
outline: 'none',
position: 'relative', position: 'relative',
right: 'inherit', right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none', transform: 'none',
outline: 'none',
backgroundColor: 'initial',
cursor: 'pointer',
color: 'red',
}, },
// Comment to test that the linter doesn't remove it // Comment to test that the linter doesn't remove it
to: { to: {
// Comment to test that the linter doesn't remove it // Comment to test that the linter doesn't remove it
backgroundColor: 'initial', width: '100%',
margin: '0',
fontSize: 'large',
border: 'Background', border: 'Background',
borderBottomLeftRadius: 'initial', borderRight: 'ActiveBorder',
borderBottomRightRadius: 'initial',
borderLeft: 'ActiveBorder', borderLeft: 'ActiveBorder',
borderRadius: 'initial', borderRadius: 'initial',
borderRight: 'ActiveBorder', borderBottomLeftRadius: 'initial',
borderBottomRightRadius: 'initial',
boxShadow: 'none', boxShadow: 'none',
boxSizing: 'inherit', boxSizing: 'inherit',
color: 'red',
cursor: 'pointer',
display: 'flex',
fontSize: 'large',
gap: 'revert',
margin: '0',
outline: 'none',
position: 'relative', position: 'relative',
right: 'inherit', right: 'inherit',
display: 'flex',
gap: 'revert',
transform: 'none', 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 = { export const vanillaExtract = {
meta: { meta: {
name: '@antebudimir/eslint-plugin-vanilla-extract', name: '@antebudimir/eslint-plugin-vanilla-extract',
version: '1.1.2', version: '1.2.0',
}, },
rules: { rules: {
'alphabetical-order': alphabeticalOrderRule, 'alphabetical-order': alphabeticalOrderRule,