chore(lint): Add stylelint script

[chinesedfan]

As discussed in #604, I integrated stylelint by following styled-components tutorial.

Please notice that even with the official stylelint-processor-styled-components, stylelint is not 100% compatible with styled-components. So I added some customized rules.

  "rules": {
    // 1
    "block-no-empty": null,
    // Inspired by https://github.com/styled-components/css-to-react-native/blob/master/src/tokenTypes.js#L31
    // to avoid unitless shorthands properties crash
    "declaration-property-value-whitelist": {
      "margin": ["/^(0|[+-]?(\\d*\\.)?\\d+px)( (0|[+-]?(\\d*\\.)?\\d+px))?$/"],
      "padding": ["/^(0|[+-]?(\\d*\\.)?\\d+px)( (0|[+-]?(\\d*\\.)?\\d+px))?$/"],
    },
    // 2
    "declaration-colon-newline-after": null,
    "value-list-max-empty-lines": null
  },

• Cases like 1, i.e. comment-input.component.js

const PostButtonIcon = styled(Icon).attrs({
  color: props => (props.disabled ? colors.grey : colors.primaryDark),
})``; // here will generate an empty block

• Cases like 2, i.e. badge.component.js

const BadgeText = styled.Text`
  ${{ ...fonts.fontPrimaryBold }};
  background-color: transparent;
  ${({ largeText }) =>
    `font-size: ${largeText ? normalize(9.5) : normalize(7)};`};
`;

It will be parsed as,

const BadgeText = styled.Text`
  ${{ ...fonts.fontPrimaryBold }};
  background-color: transparent;
  -styled-mixin1: dummyValue
/* dummyComment */;
`;

[coveralls]

Coverage remained the same at 39.937% when pulling cc4c29a on chinesedfan:add_stylelint into 2bc73fe on gitpoint:master.

[machour]

Thanks for looking into this! For the second case, would formatting the rule as you suggested in #648 solve the compatibility issue?

[chinesedfan]

@machour No, rules in case 2 will only affect multi-lines declarations. And I replied with my understandings of those 2 styles in #648 directly.

[andrewda]

👍

[machour]

Applied this PR diff on my macbook, got the following error message:

Any clue what might be going on?

[chinesedfan]

@machour Thanks for your catch. I removed all node modules and got the same error. It seems that this PR updated some babel packages and introduced this bug. Let me find out reasons.

[chinesedfan]

@machour I searched around and found that $export is not a function was usually caused by circular dependencies. After this PR applied, 2 different versions of core-js were installed.

It is an annoy feature of yarn that yarn add <pkg> only updates dependencies of pkg, but doesn't update those already in yarn.lock. Finally, I fixed it by keeping only one version of core-js.(In fact, if we just installed core-js 2.5.1, there were still no errors)

[machour]

Seems to be working fine now, thank you!
Had a little test:

I was expecting it to catch the bad values for position and left, but anyways, that's always a good additional tool to safeguard us :)

[coveralls]

Coverage remained the same at 39.937% when pulling 662f043 on chinesedfan:add_stylelint into 2bc73fe on gitpoint:master.

[chinesedfan]

@machour Hmm, seems like stylelint doesn't check each value. But if you like, there are a lot of rules. For example, declaration-property-value-whitelist can limit values. We can upgrade our configurations as we wish. 😄