stylelint-validator icon indicating copy to clipboard operation
stylelint-validator copied to clipboard

Support for React Native styles

Open nene opened this issue 6 years ago • 0 comments

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;).

nene avatar Apr 10 '19 10:04 nene