Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Augment CSSProperties for custom CSS vars instead of casting
Extend React's CSSProperties type to allow custom properties rather than using `as React.CSSProperties` casts.
Bad example
| 1 | <div style={{ '--x': v } as React.CSSProperties} /> |
Explanation (EN)
An assertion can bypass verification of both custom and ordinary style fields.
Objašnjenje (HR)
Good example
| 1 | import 'react'; |
| 2 | declare module 'react' { |
| 3 | interface CSSProperties { |
| 4 | [key: `--${string}`]: string | number | undefined; |
| 5 | } |
| 6 | } |
Explanation (EN)
The import makes this an augmentation of React rather than a replacement ambient module; only custom-property names are widened.
Objašnjenje (HR)
Notes (EN)
For project-wide typed CSS custom properties in React, use a module augmentation in a declaration file that imports React and is included by tsconfig.
Exceptions / Tradeoffs (EN)
For one component, a local CSSProperties intersection with specific custom properties may be narrower and clearer. Do not add an unrestricted string index signature that hides misspelled ordinary CSS properties.