feat 🥁: add prefer-logical-properties rule for i18n-friendly styles

- Add new rule `prefer-logical-properties` that enforces logical CSS properties over physical directional properties
- Detects 140+ physical property mappings across margin, padding, border, inset, size, overflow, and scroll properties
- Supports value-based detection for `text-align`, `float`, `clear`, and `resize` properties
- Provides automatic fixes for all detected violations
- Preserves original formatting (camelCase/kebab-case and quote style)
- Configurable allowlist via `allow` option to skip specific properties
- Comprehensive test coverage
This commit is contained in:
Ante Budimir 2025-11-09 20:53:47 +02:00
parent 69dd109311
commit d5eae5dfc8
10 changed files with 1204 additions and 6 deletions

View file

@ -264,6 +264,7 @@ The recommended configuration enables the following rules with error severity:
- `vanilla-extract/alphabetical-order`: Alternative ordering rule (alphabetical sorting)
- `vanilla-extract/custom-order`: Alternative ordering rule (custom group-based sorting)
- `vanilla-extract/no-px-unit`: Disallows px units with an optional allowlist
- `vanilla-extract/prefer-logical-properties`: Enforces logical CSS properties over physical directional properties
You can use the recommended configuration as a starting point and override rules as needed for your project. See the configuration examples above for how to switch between ordering rules.
@ -602,6 +603,43 @@ export const myStyle = style({
});
```
### vanilla-extract/prefer-logical-properties
This rule enforces the use of CSS logical properties instead of physical (directional) properties in vanilla-extract style declarations. Logical properties adapt to different writing directions (LTR/RTL) and writing modes, making your styles more internationalization-friendly. Supports 140+ property mappings across margin, padding, border, inset, size, overflow, and scroll properties. Configurable allowlist lets you permit specific properties via the `allow` option (supports both camelCase and kebab-case).
Configuration with an allowlist:
```json
{
"rules": {
"vanilla-extract/prefer-logical-properties": ["error", { "allow": ["top", "left"] }]
}
}
```
```typescript
// ❌ Incorrect
import { style } from '@vanilla-extract/css';
export const box = style({
marginLeft: '1rem',
paddingTop: '2rem',
width: '100%',
borderRight: '1px solid',
textAlign: 'left',
});
// ✅ Correct
import { style } from '@vanilla-extract/css';
export const box = style({
marginInlineStart: '1rem',
paddingBlockStart: '2rem',
inlineSize: '100%',
borderInlineEnd: '1px solid',
textAlign: 'start',
});
## Font Face Declarations
For `fontFace` and `globalFontFace` API calls, all three ordering rules (alphabetical, concentric, and custom) enforce
@ -687,16 +725,15 @@ The roadmap outlines the project's current status and future plans:
[issue #3](https://github.com/antebudimir/eslint-plugin-vanilla-extract/issues/3))
- Comprehensive rule testing.
- `no-px-unit` rule to disallow use of `px` units with configurable whitelist.
- `prefer-logical-properties` rule to enforce use of logical properties.
### Current Work
- TBA
- `prefer-theme-tokens` rule to enforce use of theme tokens instead of hard-coded values when available.
### Upcoming Features
- `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.
- `no-global-style` rule to disallow use of `globalStyle` function.
- `no-unitless-values` rule that disallows numeric literals for CSS properties that are not unitless in CSS.
- `property-unit-match` rule to enforce valid units per CSS property specs. **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