Rule proposal: css argument types

[lencioni]

The css() function can only take arguments that are properties of the styles prop object, plain JavaScript objects, falsey values, or arrays of those types.

Bad:

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

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

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

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

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

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

Good:

function MyComponent({ styles }) {
  return (
    <div {...css(styles.foo, styles.bar, { color: 'red' })} />
  );
}

It might also make sense for this rule to validate the shape of the JavaScript objects passed to css() to ensure that they are flat objects appropriate for inline styles.

[ljharb]

Good:

function MyComponent({ styles: { foo, bar } }) {
  return (
    <div {...css(foo, bar, { color: 'red' })} />
  );
}