csstree / csstree/stylelint-validator

Support for React Native styles

Open
#15 0 comments 0 reactions 0 assignees View on GitHub
feature request
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.