ESLint Plugin for Vanilla-Extract Styles

The @antebudimir/eslint-plugin-vanilla-extract is an ESLint plugin specifically designed to enhance code quality by enforcing strict best practices for vanilla-extract CSS styles. This plugin focuses on optimizing CSS property ordering and introduces essential linting rules that aid in maintaining consistency across style definitions.

Key Features

• CSS Property Ordering: Enforces CSS property ordering in vanilla-extract style objects with two primary presets:
  • Alphabetical Ordering: Ensures that style properties are organized in a clear and predictable manner.
  • Concentric Ordering: Structures properties in a logical outside-in arrangement, aligning with best practices in CSS layout and design.
• Custom Group Ordering: Offers a flexible custom group ordering option, allowing users to specify property groups according to their project needs.
• ESLint 9 Integration: Built to leverage the ESLint 9 flat configuration system for streamlined integration.
• Auto-Fix Capability: Automatically sort CSS properties, enhancing productivity and reducing manual errors.
• Compatibility: Supports various vanilla-extract APIs, including style, styleVariants, recipe, and globalStyle, while effectively handling complex scenarios such as nested objects and pseudo selectors.
• Enhanced Linting Rules: Additional rules for improved code quality are also on the roadmap for future enhancements.

Usage Examples

Enforcing Alphabetical Order

To enforce alphabetical order among CSS properties, utilize the following rule:

// ❌ Incorrect
import { style } from '@vanilla-extract/css';

export const myStyle = style({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: 19,
  marginBottom: 1,
  marginLeft: 2,
});

// ✅ Correct
import { style } from '@vanilla-extract/css';

export const myStyle = style({
  alignItems: 'center',
  display: 'flex',
  height: 19,
  justifyContent: 'center',
  marginBottom: 1,
  marginLeft: 2,
});

Implementing Concentric Order

For concentric ordering, the rule ensures properties are arranged logically:

// ❌ Incorrect
import { style } from '@vanilla-extract/css';

export const myStyle = style({
  color: 'red',
  display: 'flex',
  position: 'relative',
  padding: '10px',
  margin: '20px',
});

// ✅ Correct
import { style } from '@vanilla-extract/css';

export const myStyle = style({
  position: 'relative',
  display: 'flex',
  margin: '20px',
  padding: '10px',
  color: 'red',
});

Concentric CSS Model

This plugin utilizes a concentric CSS model that categorizes CSS properties into groups such as boxSizing, position, display, and text, organizing them from outer to inner. This structured approach not only improves readability but also streamlines the styling process.

Roadmap

Future enhancements planned for the plugin include additional linting rules like no-empty-blocks, no-unknown-units, and prefer-theme-tokens, ensuring it continues to evolve according to user needs and feedback.

Conclusion

The eslint-plugin-vanilla-extract serves as a valuable tool for developers working with vanilla-extract CSS, promoting best practices and helping to maintain high code quality through effective property ordering and linting capabilities.