Rule proposal: no undefined styles

[lencioni]

Similar to #2, it would be nice to have a rule that enforces the inverse: using styles that are not defined.

Bad:

function MyComponent({ styles }) {
  return (
    <div {...css(styles.foo, styles.bar)}>
      Foo
    </div>
  );
}

export default withStyles(() => ({
  foo: {
    backgroundColor: 'red',
  },
}))(MyComponent);

Good:

function MyComponent({ styles }) {
  return (
    <div {...css(styles.foo, styles.bar)}>
      Foo
    </div>
  );
}

export default withStyles(() => ({
  foo: {
    backgroundColor: 'red',
  },

  bar: {
    color: 'white',
  },
}))(MyComponent);

[ljharb]

This seems very aspirational - especially if MyComponent is defined in a different file than the HOC.

[lencioni]

I think a 90% solution is better than none.