[styled-components_v4.x.x] function is incompatible with array type

Do you want to request a feature or report a bug? Bug

What is the current behavior? Cannot call styled.div because function [1] is incompatible with array type [2]. error while using styled-components with prop function

If the current behavior is a bug, please provide the steps to reproduce. Using the styled-components ThemeProvider, there is always a theme prop available in all styled components. Something, similar to the following example renders properly, but Flow check fails.

const NewThing: React.AbstractComponent<{}> = styled.div(({ theme }) => {
  return css`
    background-color: ${theme.color.primary}
  `;
});

After running a flow-check, the follow error render

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/views/components/Foobar.jsx:22:58

Cannot call styled.div because function [1] is incompatible with array type [2].

     src/views/components/Foobar.jsx
      21│
 [1]  22│ const NewThing: React.AbstractComponent<{}> = styled.div(({ theme }) => {
      23│   return css`
      24│     background-color: ${theme.color.global.primary}
      25│   `;
      26│ });
      27│

     flow-typed/npm/styled-components_v4.x.x.js
 [2] 185│     [[call]]: <StyleProps, Theme>(string[], ...Interpolation<PropsWithTheme<StyleProps, Theme>>[]) => StyledComponent<StyleProps, Theme, V>;

What is the expected behavior?

This should pass flow check because it is valid styled-components behavior.

If this is a feature request, what is motivation or use case for changing the behavior?

Local Environment Information

• flow-bin v0.109.0
• styled-components v4.3.2

[omninonsense]

Ran into another one while trying to strip out props from being rendered as HTML attributes

Is something complaining about the extra prop, or maybe a more general question would be: Why is it a problem? I’m just curious. But regarding the Flow error:

I think it’s because for some reason Flow isn’t picking up that the component you passed in is actually a component? 🤔

Does something like this work?

type DivProps = {
  // Update the types, or just use `{...}` In `ComponentType`
  animated: any,
  bsStyles: any,
  striped: any
  ...
}

const Div: React.ComponentType<DivProps> = ({ animated, bsStyle, striped, value, ...rest }) =>
  <div {...rest} />

// Careful with the theme here, it's technically `void`, not `{...}`, if there
// is no `ThemeProvider` somewhere up the component hierarchy.
const Bar: StyledComponent<{...}, void, *> = styled(Div)((props) => {
  // …
}

I also think you might be able to achieve the same thing via a type-cast, but that would sacrifice readability, and you don’t get that much terseness out of it.

P.S: Haven’t tried this, but I guess it should work. I’m also a bit confused though because I assumed Flow would pick up on the fact that your function should be compatible with React.ComponentType<Props> .

Let me know if this works or doesn’t work, though. We can try something else in that case (and/or maybe fix the libdef if it can be improved).

[omninonsense]

Small comment regarding your typing of NewThing, I would do something like this:

import styled, {css, type StyledComponent} from 'styled-components';
// …
const NewThing: StyledComponent<{...}, Theme, HTMLDivElement> = styled.div(({ theme }) => {/* … */})

or to have Flow infer the instance automatically:

import styled, {css, type StyledComponent} from 'styled-components';
// …
const NewThing: StyledComponent<{...}, Theme, *> = styled.div(({ theme }) => {/* … */})

---

This way you get type-checking inside the template string literal (and the function version), and also type-checking of input props when using the styled component.