Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kristerkari opened this issue Jun 27, 2018 · 1 comment
Labels
help wanted Extra attention is needed new rule

Comments

@kristerkari
Copy link
Owner

kristerkari commented Jun 27, 2018

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 kristerkari added help wanted Extra attention is needed new rule labels Jun 27, 2018
@kristerkari
Copy link
Owner Author

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed new rule
Projects
None yet
Development

No branches or pull requests

1 participant