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

TypeScript: Improve typings of interpolations #428

Merged
merged 1 commit into from Jan 30, 2017

Conversation

Igorbek
Copy link
Contributor

@Igorbek Igorbek commented Jan 29, 2017

This PR slightly improves TypeScript support (typings) of interpolations.

Rationale

There're two very different contexts where styles are being created: global (injectGlobal, keyframes functions) and component (styled function). In the global contexts, functions as interpolations are not accepted. Indeed, there's nothing to use - no props available.
So the typings of these functions already make this distinctions, injectGlobal and keyframes do not accept functions as interpolations.
The issue comes up when css needs to be used. Since it is meant to be composable and can be used inside both contexts, we need to know what types of interpolations are hidden inside.

Changes

  • an overload of css has been introduced which only takes simple interpolations
  • introduced 'flatten' interpolation type to use as a result of css (which flattens passed array interpolations)
  • also made possible to pass arrays as interpolations which wasn't working before
    • Note, that due to TypeScript's circular-reference restrictions, deeper nesting of arrays isn't allowed

Now using function interpolations that came from css is also restricted:
css-with-function-interpolation

Upcoming

I'm going to make another PR with better theme support in TypeScript. So you could bundle all the changes in the next release.

@mxstbr
Copy link
Member

mxstbr commented Jan 30, 2017

Wow this is awesome. I'll leave it up to @patrick91 to review the code, but this sounds like a useful change to me!

@patrick91
Copy link
Contributor

LGTM! :)

Copy link
Member

@mxstbr mxstbr left a comment

Choose a reason for hiding this comment

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

Let's ship this when the second PR is in?

@mxstbr mxstbr merged commit 96dba9e into styled-components:master Jan 30, 2017
@Igorbek
Copy link
Contributor Author

Igorbek commented Jan 30, 2017

@mxstbr yeah, let's bundle them together.

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

3 participants