Rule proposal: no unused styles

[lencioni]

All of the styles for a component should be self-contained within the component. This should make it pretty easy to identify styles that are defined but not actually used by the component, which would be a useful rule to have.

Bad:

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

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

  bar: { // <--- this style is not used
    backgroundColor: 'green',
  },
}))(MyComponent);

Good:

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

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

[ljharb]

This has a similar issue where it doesn't help when the HOC and the wrapped component are in separate files - which isn't an architecture we want to discourage, I'd think.

[lencioni]

When would that kind of architecture be desirable?

[ljharb]

Putting each thing in separate files? If you want to unit-test the individual component, if you want to shallow-render and avoid string selectors, if you want to use the component without the HOC for whatever reason… One component per file is generally preferred over consolidating imo.

[lencioni]

You can export the unwrapped component as a named export for those things. I agree that one component per file is best, but that usually excludes the use of higher order components. I don't think it would be a good idea to move the styles for a component to a separate file under most circumstances.