autofix for 'sort-styles' rule

[tanhauhau]

• added autofix for 'sort-styles' rule.

[coveralls]

Coverage increased (+2.4%) to 77.509% when pulling f6986cb on tanhauhau:tanhauhau/autofix-sort-styles into 89c3a11 on Intellicode:master.

[maxis1718]

According to the ESlint docs, we need to specify the fixable property.

Important: Without the fixable property, ESLint does not apply fixes even if the rule implements fix functions. Omit the fixable property if the rule is not fixable.

[draperunner]

Great job! This is very helpful. I have a couple of questions, though.

I'm curious about how comments would be treated. For instance, consider the following code:

const styles = StyleSheet.create({
  container: {
    margin: 20,
    // Never EVER edit the next line!!!
    alignItems: 'center',
  }
})

If we end up flipping the margin and alignItems lines, but keeping the comment between them, the meaning of the comment would change, and that's not good. I suggest just ignoring cases like these, leaving it to the user to manually fix these cases.

Another thing is overlapping styles when mixing shorthand properties with their full-length ones. Example:

const styles = StyleSheet.create({
  container: {
    marginLeft: 20,
    margin: 40,
  }
})

If we sort the styles here, we would change the appearance of the container thing. I guess these cases should also be ignored. I guess some hard coding is needed to detect these cases?

[draperunner]

I guess this is just a Prettier/ESLint formatting fix, but how about moving the Boolean call up a level, like so:

return Boolean(
  node &&
  node.type === 'JSXExpressionContainer' &&
  node.expression &&
  node.expression.type === 'ArrayExpression'
)

[tanhauhau]

i've reverted the formatting change, we probably should do this in another PR?

[draperunner]

Aren't these lines indented too far?

[tanhauhau]

reverted formatting changes

[tanhauhau]

I can add some test case for this..

[tanhauhau]

@draperunner these test cases should suffice for maintaining the comments?

[tanhauhau]

added test case for shorthands too

[draperunner]

The test cases for shorthand properties look good. Great job!

Regarding comments, I think it's better to just not autofix a chunk if it contains comments. It's impossible to know what the comment means. Consider the case

const styles = StyleSheet.create({
  container: {
    d: 4,
    // Never EVER edit the next THREE lines!!!
    c: 3,
    a: 1,
    b: 2,
  }
})

If we just don't autofix this, but still report it as an error, the user will have to fix it manually. When we are not sure what the correct way to fix things is, it's better to ignore it than potentially break something.

[draperunner]

Great work!

[Intellicode]

Very nice! Sorry, I have been away for a bit, but I'll try to get out a release soonish!

[lukebars]

Any updates on this?