feat 🥁: add recommended config with error-level rules

Add a recommended configuration preset that enables concentric-order and no-empty-style-blocks rules with error severity.

- Fix plugin configuration structure to work properly with ESLint 9
- Set concentric-order and no-empty-style-blocks as recommended rules
- Use error severity for recommended rules to enforce best practices
- Maintain backward compatibility with existing implementations

This change improves developer experience by providing sensible defaults while maintaining flexibility for customization.
This commit is contained in:
Ante Budimir 2025-04-07 13:00:55 +03:00
parent 175ce9aef8
commit 52d38d4477
4 changed files with 55 additions and 29 deletions

View file

@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.7.0] - 2025-04-07
- add a recommended configuration preset that enables concentric-order and no-empty-style-blocks rules with error severity.
- Fix plugin configuration structure to work properly
- Set concentric-order and no-empty-style-blocks as recommended rules
- Use error severity for recommended rules to enforce best practices
- Maintain backward compatibility with existing implementations
## [1.6.0] - 2025-04-06
- add new rule `no-empty-style-blocks` that detects and disallows empty style objects in vanilla-extract style functions

View file

@ -51,6 +51,43 @@ Create or update your `eslint.config.js` or `eslint.config.mjs` file:
```typescript
import vanillaExtract from '@antebudimir/eslint-plugin-vanilla-extract';
// Using the recommended configuration
export default [
{
files: ['**/*.css.ts'],
ignores: ['src/**/theme-contract.css.ts'],
plugins: {
'vanilla-extract': vanillaExtract,
},
rules: {
// Apply all recommended rules
...vanillaExtract.configs.recommended.rules,
// Optionally override specific rules
// 'vanilla-extract/concentric-order': 'warn', // Change severity from error to warn
// 'vanilla-extract/no-empty-style-blocks': 'off', // Disable a recommended rule
// Add additional rules not in recommended config
// 'vanilla-extract/alphabetical-order': 'error', // Override concentric-order rule
},
},
];
```
### Recommended Configuration
The recommended configuration enables the following rules with error severity:
- `vanilla-extract/concentric-order`: Enforces concentric CSS property ordering
- `vanilla-extract/no-empty-style-blocks`: Prevents empty style blocks
You can use the recommended configuration as a starting point and override rules as needed for your project.
### Custom Configuration
If you prefer not to use the recommended configuration, you can still configure rules manually:
```typescript
export default [
{
files: ['**/*.css.ts'],
@ -303,17 +340,17 @@ The roadmap outlines the project's current status and future plans:
- Auto-fix capability integrated into ESLint.
- Support for multiple vanilla-extract APIs (e.g., `style`, `styleVariants`, `recipe`, `globalStyle`, `fontFace`, etc.).
- `no-empty-style-blocks` rule to disallow empty blocks.
- Recommended ESLint configuration for the plugin.
- Comprehensive rule testing.
### Current Work
- Setting up recommended ESLint configuration for the plugin.
- `no-zero-unit` rule to disallow units when the value is zero.
### Upcoming Features
- `no-unknown-units` rule to disallow unknown units.
- `no-number-trailing-zeros` rule to disallow trailing zeros in numbers.
- `no-zero-unit` rule to disallow units when the value is zero.
- `no-px-unit` rule to disallow use of `px` units with configurable whitelist.
- `prefer-logical-properties` rule to enforce use of logical properties.
- `prefer-theme-tokens` rule to enforce use of theme tokens instead of hard-coded values when available.

View file

@ -1,6 +1,6 @@
{
"name": "@antebudimir/eslint-plugin-vanilla-extract",
"version": "1.6.0",
"version": "1.7.0",
"description": "ESLint plugin for enforcing best practices in vanilla-extract CSS styles, including CSS property ordering and additional linting rules.",
"author": "Ante Budimir",
"license": "MIT",

View file

@ -6,7 +6,7 @@ import noEmptyStyleBlocksRule from './css-rules/no-empty-blocks/rule-definition.
export const vanillaExtract = {
meta: {
name: '@antebudimir/eslint-plugin-vanilla-extract',
version: '1.6.0',
version: '1.7.0',
},
rules: {
'alphabetical-order': alphabeticalOrderRule,
@ -15,33 +15,14 @@ export const vanillaExtract = {
'no-empty-style-blocks': noEmptyStyleBlocksRule,
},
configs: {
recommended: [
{
plugins: {
'vanilla-extract': {
recommended: {
plugins: ['vanilla-extract'],
rules: {
'concentric-order': concentricOrderRule,
'no-empty-style-blocks': noEmptyStyleBlocksRule,
'vanilla-extract/concentric-order': 'error',
'vanilla-extract/no-empty-style-blocks': 'error',
},
},
},
rules: {
'vanilla-extract/concentric-order': 'warn',
'vanilla-extract/no-empty-style-blocks': 'warn',
},
},
],
alphabetical: [
{
plugins: {
'vanilla-extract': {
rules: { 'alphabetical-order': alphabeticalOrderRule },
},
},
rules: { 'vanilla-extract/alphabetical-order': 'warn' },
},
],
},
};
export default vanillaExtract;