Integrate styled components checking tasks

[chinesedfan]

It was a pity that we introduced so many styles problems by styled components refactoring. I suggest to integrate 2 more tasks into our Travis CI.

• stylelint-processor-styled-components, which guarantees basic CSS writing.
• styled-components-native-code-mod, which enhances unitless checking.
  • Now it adds units to all properties, but I hope to fork it and only rewrite those necessary shorthands properties.

Of course, they will increase our testing time, but the safety should be more important. And I will also fix the current code base by them at first.

[machour]

@chinesedfan I wouldn't mind adding stylelint-processor-styled-components as part of CI, but I'm not sure about styled-components-native-code-mod which looks more like a conversion utility.

Also, unless I'm missing something, current code base is broken because of an incompatibility with react-native-elements.

[alejandronanez]

I second @machour, We should integrate stylelint-processor-styled-components But not the other one, it looks like a conversion tool.

@machour what do you think about rolling back any changes that involve SC + react-native-elements (or go with a workaround) ?

[machour]

@alejandronanez was about to reply from the app but it crashed 😆 (you fixed it in #602)

A big +1 on rolling back failing PRs for now until react-native-elements is updated.

[alejandronanez]

Just to clarify, I meant only roll back changes related to RNE.

[machour]

Yes yes :)

[jamesg1]

What were the actual benefits of using styled-components? Seems to me it has some issues with supporting third party component libraries.

I use https://github.com/css-modules/css-modules with a work project and enjoy it as it keeps the CSS seperate to the JS.

[alejandronanez]

Hey @jamesg1 we already had a discussion about it (I can’t find the issue right now - on mobile)
My 2 cents on CSS modules is that they work ok but have some restrictions that styled-components address in a really good way.

[chinesedfan]

@machour @alejandronanez Right, styled-components-native-code-mod is not a real test tool. Adding it here is just for reminding us to have the same ability to avoid unitless shorthands properties crash.

In #612, I tried to fix problems by stylelint-processor-styled-components, as well as stylelint. Some of them are just styles preferences, and some are fatal. But I have not verified them yet. So it is marked as WIP.

[machour]

@jamesg1 the compatibility issue with react-native-elements was fixed in 0.18.1 released yesterday 🎉 You should be able to finish your PR with styled-components soon. We had the discussion Alejandro is referring to in #480.

@chinesedfan could we have a PR adding styling tests in the commit hook? It would be great to have this soon <3

[chinesedfan]

@machour Sure, the commit hook can help contributors discover problems sooner at local. I am working on integrating with stylelint-processor-styled-components and have sent a PR to fix its issue of reporting wrong line numbers. Once my PR is accepted, we can enjoy styling lint.

[machour]

Great, thank you!