joshwcomeau/guppy

Upgrade to `styled-components` v4

Open

#213 opened on Sep 5, 2018

View on GitHub
 (6 comments) (5 reactions) (1 assignee)JavaScript (151 forks)github user discovery
code healthgood first issue

Repository metrics

Stars
 (3,248 stars)
PR merge metrics
 (PR metrics pending)

Description

styled-components v4 was just announced, and it looks really good:

  • 25% faster on mount
  • really good new APIs like the new global styles, and as
  • ref support
  • faster styled()
  • a bunch more

It's still in beta, but I think we should try upgrading. It seems like it'd be a huge improvement.

Some things that will need to be updated:

  • We use injectGlobal in a few places, needs to switch to the new global API
  • use ref instead of innerRef in a few places
  • use styled() instead of .extend
  • For the Heading component, we can use the new as prop, instead of withComponent

This would be a great first issue for new contributors :) would give you a tour of the React codebase, without being too hairy.

Contributor guide

Research direction
Review the migration guide for styled components v4, update injectGlobal to createGlobalStyle, replace innerRef with ref, replace .extend with styled(), and use the as prop instead of withComponent. Test each component after changes.
Tech stack
javascriptreact
Domain
frontend
Issue type
Refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Reactstyled components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80