StyledComponent ThemeWrapper 0.91 -> 0.92

Hey,

We’re using:

• flow-typed: styled-components_v4.x.x.js (8ae4cfa383fc58443d8d65b5301bf1c1)
• With the styleguide feature ThemeProvider wrapper

We’ve been using flow-bin v0.91.0, upgrading to either v0.92.0 or v0.93.0 results in a flood around use of theme, which had never appeared before.

export default () => (
      <ThemeProvider theme={OurTheme}>
        <Page />
      </ThemeProvider>
)

OurTheme contains things like breakpoint shortcuts that we use like this:

const PageWrapper = styled.div`
  margin-top: 6.8rem;
  @media ${({ theme }) => theme.breakpoint.onlyScreen.tablet} {
    margin-top: 7rem;
  };
  @media ${({ theme }) => theme.breakpoint.onlyScreen.laptop} {
    margin-top: 12rem;
  };
`;

This is giving us flow errors like this:

Cannot call styled.div because:                                                            
 • property theme is missing in object type [1] in the first argument of array element.    
 • property theme is missing in object type [1] in the first argument of array element.    
                                                                                           
     src/App/Component/Pages/Page.jsx                                                                        
     10│                                                                                   
     11│ const PageWrapper = styled.div`                                                   
     12│   margin-top: 6.8rem;                                                             
     13│   @media ${({ theme }) => theme.breakpoint.onlyScreen.tablet} {                   
     14│     margin-top: 7rem;                                                             
     15│   };                                                                              
     16│   @media ${({ theme }) => theme.breakpoint.onlyScreen.laptop} {                   
     17│     margin-top: 12rem;                                                            
     18│   };                                                                              
     19│ `;                                                                                
     20│                                                                                                                                       
                                                                                           
     flow-typed/npm/styled-components_v4.x.x.js
 [1]  9│                                     | (<P: {}>(executionContext: P) => string)

• Anyone have any idea what would have changed to get flow bin to handle these differently in >0.92.0?
• Is this styled-components flow-typed def presently able to handle themes?
• If there’s a breaking change and I need to start providing a definition of my theme object, I have a Generic type ready to go, anyone have any idea where the best (and hopefully DRY-est) place is to declare this?

[lukemartin]

[jamesisaac]

More discussion here: https://github.com/flow-typed/flow-typed/pull/3126