Better flow support?

[DarrylD]

Based on #240

Currently something like this works

/* @flow */
import React from 'react';
import styled from 'styled-components';

type Props = {
  bold?: bool,
};

const Text = styled.span`
  color: ${props => props.theme.colors.black};
  font-family: ${props => props.theme.fontFamily};
  font-size: ${props => props.theme.fontSize.text};
  font-weight: ${props => props.bold ? props.theme.fontWeight : 'normal'};
  line-height: ${props => props.theme.lineHeight};
`;

export default (props: Props) => <Text {...props} />;

Would it be better if we could do something like so?

Props = {
  bold?: bool,
};

const default Text = styled.span(Props)`
  color: ${props => props.theme.colors.black};
  ...
`;

//or

const default Text = styled.span({bold?: bool})`
    color: ${props => props.theme.colors.black};
  ...
`;

Just kinda annoying to make another stateless. Thoughts?

[mxstbr]

/cc @styled-components/typers

[relekang]

I plan to look into this for the flow-typed libdef, I don't have any great ideas so far tho. Also, relevant discussions in flow-typed/flow-typed#745

[malekjaroslav]

This would be really great. I managed to make it work by this:

//@flow
import styled from 'styled-components';
import type { ComponentType } from 'react';

const Text: ComponentType<{bold: boolean, style: Object}> = styled.span`
   font-weight: ${props => props.bold ? props.theme.fontWeight : 'normal'};
`

But then I have an issue with .extend and other methods.

[sjiep]

Are there any new thoughts on this topic? I'm struggling to make props for a styled-component work properly together with Flow. The workaround provided by @malekjaroslav works however this breaks:

• the usage of defaultProps,
• props showing up properly in react-styleguidist.

I still use the workaround given in the original post

[breadadams]

@malekjaroslav I'm getting the same, over a year later 😢. I've tried with the latest flow-typed libdef but still no avail.

[kusmierz]

Hey, is there any major changes between 3 and 4 version? Could we use https://github.com/flow-typed/flow-typed/tree/master/definitions/npm/styled-components_v3.x.x definitions for 4.x?

[quantizor]

Several. Someone will need to contribute the changes, as the core team doesn't maintain the typings.