mirror of
https://github.com/antebudimir/eslint-plugin-vanilla-extract.git
synced 2025-12-31 08:53:33 +00:00
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:
parent
69dd109311
commit
d5eae5dfc8
10 changed files with 1204 additions and 6 deletions
45
README.md
45
README.md
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue