Skip to content

Support for React Native styles #15

Open
@nene

Description

@nene

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions