kristerkari / stylelint-react-native

A collection of React Native specific linting rules for stylelint (in a form of a plugin).
MIT License
57 stars 1 forks source link

Rule idea: check for values that work in browser, but not in React Native #6

Open kristerkari opened 6 years ago

kristerkari commented 6 years ago

Instead of having a huge list of possible values that the properties can have in React Native, it would be a lot easier to just warn for values that work in browser, but not in React Native.

There are at least two examples that I can think of currently:

box-shadow's spread-radius works in browser, not in React Native (styled-components and css-modules):

box-shadow: 10px 20px 30px 40px red;

This works in RN:

box-shadow: 10px 20px 30px red;

line-height with multiplier value works in browser, not in React Native:

line-height: 1.41;
line-height: 150%;

This works in RN:

line-height: 24px;

There are probably many other CSS property values that have small differences in values that could be linted.

kristerkari commented 5 years ago

Using percentages with border-radius works in the browser, but not in React Native:

Only works in the browser:

border-radius: 50%;

Works in the browser and React Native:

border-radius: 30px;