Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix type error with a component interpolation #372

Conversation

hemmxwxsoo
Copy link

Summary

It allows using component interpolation without typescript error. (#370)

@callstack-bot
Copy link

Hey @hemmxwxsoo, thank you for your pull request 🤗.
The coverage report for this branch can be viewed here.

Copy link
Member

@satya164 satya164 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the PR 🎉

@satya164
Copy link
Member

satya164 commented Apr 1, 2019

Looks like we need some kind of // ts-ignore comment on that line so the CI passes

@hemmxwxsoo
Copy link
Author

Sorry @satya164 but I think there may be a problem with that code. But I'm not sure.

If I have a code below.

export const Form = styled.form`
    color: red;
`;

export const Input = styled.input`
    ${Form}:hover & {
        width: 1px;
    }
`;

Then Input constant's type become

React.FunctionComponent<React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement> & {
    as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 166 more ... | undefined;
}>

instead of

React.FunctionComponent<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & {
    as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 166 more ... | undefined;
}>

I tried to made it but I don't know what is wrong. 😥

@@ -13,7 +13,7 @@ type StyledComponent<T> = React.StatelessComponent<
type StyledTag<T> = <Props = T>(
strings: TemplateStringsArray,
...exprs: Array<
string | number | CSSProperties | ((props: Props) => string | number)
string | number | CSSProperties | ((props: Props) => string | number) | StyledComponent<any>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a test case that would cover broken ts definitions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants