csstree / csstree/stylelint-validator
Support for React Native styles
- Dominant language
- JavaScript
- Stars
- 92
- Forks
- 11
- PR merge metrics
- No merged PRs in 30d
Description
When using styled-components in React Native, I can write CSS like:
```
const MyView = styled.View`
aspect-ratio: 2;
margin-horizontal: 10px;
padding-vertical: 20px;
`;
```
But when seeing these properties, the `csstree/validator` will report error:
```
21:3 ✖ Unknown property `aspect-ratio` csstree/validator
```
To overcome this, I can disable checking of these properties:
```
"csstree/validator": {
"ignore": [
"aspect-ratio",
"margin-horizontal",
"padding-vertical",
]
}
```
But now I won't get any linting errors when I make a mistake in the values of those properties. Some of these properties I can simply avoid (like I can write `margin: 0 10px` instead of `margin-horizontal: 10px`), but for others there's no equivalent in standard CSS.
It would be great if these react-native extensions were supported by `stylelint-validator`. Even greater would be having a native mode switch (e.g. only allowing `display: none|flex;`).
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing the csstree/validator handling and the shown ignore configuration, then identify how React Native properties such as aspect-ratio, margin-horizontal, and padding-vertical are represented. Done should include validation for these properties and their values, with a clear decision on whether a React Native mode is supported.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100