Rule proposal: no raw media queries

[lencioni]

It is good for media queries to be in sync for an entire application. It would be nice to have a rule that prevented raw, one-off media queries in favor of supplying them by the theme.

Bad:

export default withStyles(() => ({
  '@media (max-width: 600px)': {
    backgroundColor: 'red',
  },
}))(MyComponent);

Good:

export default withStyles(({ breakpoint }) => ({
  [breakpoint.small]: {
    backgroundColor: 'red',
  },
}))(MyComponent);