Flow: allow intersection types for `styled()`

Version

styled-components: 2.2.3
flow-typed: styled-components_v2.x.x.js

Reproduction

Sometimes, it’s useful to attach a component onto another component as a namespacing technique.

In flow, this can be done by typing your base component as an intersection. It looks something like:

/* @flow */

import type { ComponentType } from 'react'
import React from 'react'
import styled from 'styled-components'

type SubHeaderProps = {
  textTransform: string,
}
const SubHeader: ComponentType<SubHeaderProps> = styled.h2`
  textTransform: ${({ textTransform }) => textTransform};
`

type HeaderProps = {
  color: string,
}
type HeaderType = {
  SubHeader: ComponentType<SubHeaderProps>,
}
const Header: ComponentType<HeaderProps> & HeaderType = styled.h1`
  color: ${({ color }) => color};
`

// Attach SubHeader on Header
Header.SubHeader = SubHeader

/**************************
 *     Using `styled()    *
 **************************/
const StyledHeader = styled(Header) // Unexpected -- causes flow error: styled() does not allow intersection types

Expected Behavior

Ideally styled() wouldn’t cause a Flow error here 😃.

Actual Behavior

call of styled. Function cannot be called on any member of intersection type is thrown by flow.

[SilencerWeb]

still not fixed, huh?

[probablyup]

@sohkai I’d recommend moving this issue to https://github.com/flowtype/flow-typed since that’s where the types are