Styled-components: 5.0 Roadmap

[probablyup]

Test it out:

npm install styled-components@beta react@^16.8 react-dom@^16.8 react-is@^16.8

_5.0 milestone_

• [x] rewrite stylesheet + tag classes for the needs of today (#2522)
• [x] move react-is to peer dependencies (https://github.com/styled-components/styled-components/pull/2187)
• [x] use react v16.7+ hooks to simplify the context consumer architecture (#2390)
• [x] babel 7 migration (maybe... there were bundle size regressions before) (#2509)
• [x] internal rewrite to use hooks (#2390)
• [x] bump minimum versions of react, react-native to hooks-compatible versions
• [x] remove code paths deprecated in v4 (https://github.com/styled-components/styled-components/pull/2604)
• [x] fix cGS style clobbering issues (https://github.com/styled-components/styled-components/pull/2824)

_5.1 candidate_

• [ ] stylis -> sweetsour (depending on when it's ready for use and testing)
• [ ] figure out CSP / nonce support (#2363)
• [ ] solution to drop the prop whitelist (https://github.com/styled-components/styled-components/pull/2093)
• [ ] source maps for styles (https://github.com/styled-components/styled-components/issues/827)
• [ ] scoping of styles via StyleSheetManager (https://github.com/styled-components/styled-components/issues/1789)

_didn't do_

• [ ] use React.warn and React.error if 16.9 comes out before v5 (https://github.com/styled-components/styled-components/issues/2584) React removed them

follow along on the ~canary~ v5 branch

_evolving_

[olehreznichenko]

Support browserlist/autoprefixer.
I'm tired to see prefixed styles in dev mode for flexbox.

[kitten]

@olegreznichenko As stated in multiple issues across this year and last year, styled-components does not use PostCSS anymore but stylis. So there's no configurable browserlist and even if we change our CSS processing pipeline there likely won't be any. It's not our responsibility to improve the devtools' UX afterall :wink:

[probablyup]

You'll need to propose that to stylis

[olehreznichenko]

@kitten . I know this, and about multiple issues, and that's why I trying to make again attention for this, people need somehow configure vendor prefixes.

[mehiel]

@probablyup Any plans to adopt react hooks? That'd make the react tree minimal!

Maybe an import styled from "styled-components/hooks" in order to be able to experiment without breaking compatibility?

[probablyup]

When 16.7 comes out formally we’ll look into it. I think some core team
members have been fiddling around but the RFC isn’t finalized yet.

[Andarist]

As part of the v5 you could consider how to expose stylis for some customizations

[Carduelis]

I've seen a lot of complainings about autoprefixes.
To conclude it into one message:

1. It is really a mess in devtools. It is hard to read, to enable or disable styles.
2. There is no sense to support some old versions of Chrome.
3. Adding new properties in runtime and applying css-rules are also an additional work for a browser.
4. There is a need to adjust browser-compatibility: someone does not support IE8-10, someone develops only for Electron or even creates pdf-generator like this guy.

[glauberfc]

Maybe add types for TypeScript on this repository itself rather than on Definitely Typed

[mxstbr]

@glauberfc as recommended by the TypeScript core team, we just moved them over from this repo to DefinitelyTyped, and we're not moving them back. See #1778 for the full discussion and information as to why.

[viiiprock]

Hooks is released today 🎉

[probablyup]

For anyone watching, the v5 branch is called "canary" and we'll be releasing alpha builds under styled-components@alpha in the (potentially near) future. the beta is out! use styled-components@beta

[ShanonJackson]

Probably isn't the time or place to make a request to add something to roadmap, but the performance of styled-components more recently has been giving me a headache when i compare mounting my components with styled components vs mounting my components with css the performance is more than noticeable.

Any chance we make things faster? aswell.

EDIT: I think this is related to the every styled component gets wrapped in two context consumers ticket floating around somewhere that the solution was suggested as "wait for react to fix" but realistically a significant amount of time has passed now and its clear that's not happening unless anyone from the react team has specified otherwise.

[probablyup]

@ShanonJackson should be improved between the hooks refactors and stylesheet work - we'll be doing some benchmarking and optimization soon and will post results

[mxstbr]

WIP performance results: https://twitter.com/_philpl/status/1123731671507976193

[mattwills8]

One thing our team would really like is the ability to target a child element by class (rather than creating a whole new styled component), but having that class hashed so it stays specific to that file, like css modules.

Eg

<Root>
  ...
  <div className="target_me" />
</Root>

const Root = styled.div`
  ...
  .target_me { 
    color: teal;
  }
`

With the output looking something like

<div class="StyledComponent-Root abkjkj">
  <div class="abkjkj--target_me"></div>
</div>

StyledComponent-Root.34kjkj .abkjkj--target_me {
  color: teal;
}

We find ourselves often making entire styled-components just for the tiniest of styles to be applied rather than just where it would be beneficial.

Could this be a potential v5 feature?

[probablyup]

This doesn't really make sense

[mattwills8]

@probablyup likely not that exact implementation, but you see the issue im trying to address?

[probablyup]

Not really, when you do a descendant selector inside a styled component it's scoped to that component's class so it's already isolated.

[mattwills8]

But I'm saying i want to isolate exactly that div, and only that div, and add styles to it, something completely possible with css modules for example.

Using a descendant selector as you suggest, any other element with that class anywhere further down the react tree from the styled component would also pick up those styles.

[probablyup]

Sorry, it's just way too specific of a use case and it's something you can definitely crack with regular CSS and/or using an HTML ID since you want to target one specific thing. Maybe also look into component selectors.

[mattwills8]

@probablyup Fair enough man, thanks for your time!

[kitten]

@mattwills8 the styled-components way of doing it would be to always create a StyledComponent, so if you can create one for that div alone that'd work https://www.styled-components.com/docs/advanced#referring-to-other-components

[LennardWesterveld]

Is there a way that we can solve or making it more friendly to exclude props mapped to the component in 5.x? see for more information: https://github.com/styled-components/styled-components/issues/439

[probablyup]

@LennardWesterveld It's the first item in the roadmap

[LennardWesterveld]

@LennardWesterveld It's the first item in the roadmap

Oh woop! Thanks a lot :) sorry that i didn't see that.

[probablyup]

The first alphas are available under styled-components@alpha for those interested. See the OP for a one-liner install.

[mqklin]

This: https://github.com/styled-components/styled-components/issues/2215
Still on v3, because v4 is unusable in dev mode :(

[probablyup]

Definitely addressed in v5, have you tried the beta?

On Wed, Jun 26, 2019 at 1:10 PM mqklin [e-mail] wrote:

This: #2215
https://github.com/styled-components/styled-components/issues/2215
Still on v3, because v4 is unusable in dev mode :(

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/styled-components/styled-components/issues/1934?email_source=notifications&email_token=AAELFVUR65RQLWSOVNLWUALP4OWIRA5CNFSM4FQUW3OKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYULX6Y#issuecomment-505986043,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAELFVSKS6N46EP64I2ZHEDP4OWIRANCNFSM4FQUW3OA
.

[mqklin]

Not yet, does it have incompatibilities with v4? Is there any migrate guide from v4 to v5? I ask because our project is pretty big, so it can take time to migrate

[mxstbr]

No breaking changes from v4 to v5, see the announcement blogpost: https://medium.com/styled-components/announcing-styled-components-v5-beast-mode-389747abd987

[Jessidhia]

There's one minor change I noticed, but it's on code that had been incorrectly ported to begin with: the new stylis seems to have changed how it treats the :global() pseudo-class.

It's not necessary in styled-components code anyway so the :global()s shouldn't have been there, but I just found it interesting 🤔

[mxstbr]

We should definitely not allow usage of :global(), not sure why we were allowing that before! The new stylis has all features removed that don't make sense in styled-components in order to slim the bundle size, including :global().

[Jessidhia]

I'm not sure exactly what was going on, but given this (incorrectly ported) selector :global(.trident) &, old stylis would produce :global(.trident) .c1 in the snapshot; while the new @emotion/stylis produces .c2:global(.trident) .c3.

The :global(.trident) was broken anyway, it should have never stayed as :global() and, given how it was showing up in the snapshot, it never worked. Luckily thanks to this mostly inconsequential change I noticed a bug 🤣

[mqklin]

I've just migrated from v3 to v5@beta, and it's fast! Cool! Thanks guys, you are the beasts!

[mqklin]

Could you please explain what happens if I render createGlobalStyle component several times inside some component, and not at the top of your React tree? For example:

const GlobalStyle = createGlobalStyle`
  #some-external-lib-element-that-is-inserted-in-the-end-of-the-body {
    color: red;
  }
`;
function MyDeepComponent({veryOftenChangingPropThatCausesRerender}) {
  return (
    <>
      <GlobalStyle/>
      <SomeExternalLibComponent/>
    </>
  );
}

Will it insert global style several times, or will it clear it after every unmount?
I ask here because I couldn't find this info in the docs, and maybe you will add this to the roadmap? :)

[probablyup]

@mqklin let's keep this issue focused on v5 please. Stack Overflow or our Spectrum community is a great place to ask general usage questions.

[corysimmons]

Can the styled-components team please release/maintain a super official NextJS example for v5?

NextJS is most popular(?) SSR framework out there and it'd probably help a _ton_ of people—obviously including myself—if smooth integration with it was more of a priority.

That is, the only reason I use Emotion and will probably continue to use Emotion is because getting it working with SSR is as easy as yarn add emotion babel-plugin-emotion; // import styled from '@emotion/styled'

Like... honestly compare these:

• NextJS with-styled-components | _document.js 🤢
• NextJS with-emotion 😍

SSR is huge nowadays. You beat them to Hooks and a beautiful DevTools experience, but IMO the winning library will be the first to get both a decent DevTools experience (no Context.Consumer pollution) + nice SSR. 🤷‍♂️

[probablyup]

what’s wrong with the current one you linked? It’s what I use for my own
nextjs projects and works fine...

On Sat, Jun 29, 2019 at 11:06 PM Cory Simmons [e-mail]
wrote:

Can the styled-components team please release/maintain a super official
NextJS example for v5?

NextJS is most popular(?) SSR framework out there and it'd probably help a
ton of people—obviously including myself—if smooth integration with it
was more of a priority.

That is, the only reason I use Emotion and will probably continue to use
Emotion is because getting it working with SSR is as easy as yarn add
emotion babel-plugin-emotion; // import styled from '@emotion/styled'

Like... honestly compare these:

• NextJS with-styled-components
  https://github.com/zeit/next.js/tree/564eac47462cf65cd80c140dff72160845e4e4de/examples/with-styled-components
  | _document.js 🤢
  https://github.com/zeit/next.js/blob/564eac47462cf65cd80c140dff72160845e4e4de/examples/with-styled-components/pages/_document.js
• NextJS with-emotion
  https://github.com/zeit/next.js/tree/564eac47462cf65cd80c140dff72160845e4e4de/examples/with-emotion
  😍

SSR is huge nowadays. You beat them to Hooks and a beautiful DevTools
experience, but IMO the winning library will be the first to get both a
decent DevTools experience (no Context.Consumer pollution) + nice SSR.
🤷‍♂️

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/styled-components/styled-components/issues/1934?email_source=notifications&email_token=AAELFVQC2723PBODVA4LSP3P5AWMHA5CNFSM4FQUW3OKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODY4EV4Q#issuecomment-507005682,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAELFVRUFYYXGB2VCDB6XHTP5AWMHANCNFSM4FQUW3OA
.

[corysimmons]

tbh I was getting some Hooks problems with it and some classes not matching up between client/server. Been fighting with NextJS + styled-components@beta for a couple days and then went back to Emotion and it worked perfectly. So I don't know if I'm stupid and should fully understand what is going on in _app.js and _document.js, or if styled-components doesn't have as intuitive SSR support as Emotion. Maybe both, but a roadmap isn't really the place for tech support so much as wishlisting things.

So again, I wish styled-components had really simple/slick/easy SSR support (whether by some babel plugin that just obfuscates all this stuff or some other way), like Emotion does.

[corysimmons]

_"Please give stronger consideration to elegant SSR support before pushing 5"_ is off-topic for the 5 roadmap issue?

[probablyup]

@corysimmons yes because a stated goal of this release is backward compat with v4

[oliviertassinari]

@corysimmons How does Emotion handle CSS specificity interoperability with third-parties when injecting the style elements in the body (and not the head)?

[probablyup]

@oliviertassinari off-topic, please guys

[davidcsally]

I noticed that with v5, you can have multiple applications running styled-components on the page now. This wasn't possible in v4.

[probablyup]

@davidcsally actually it is possible in v4, just specifically with different versions of the lib because we add a version attribute to the style tags that allows for isolation

[felipeleusin]

Just wanted to say thanks for this! I onboarded a new dev that wasn't familiarized to styled-components but was too react and he was complaining about the react devtools clutter until I showed him what v5 looked like.

Also for our applications adopting v5 beta happened without issues

[anmolmahatpurkar]

Any updates on the eta for the 5.0 launch?

[khryshyn]

Please update type deffinitions for version 5 in DefinitelyTyped/types/styled-components, because now there only deffinitions for v4

[riongull]

Anyone know if it's possible to use the 5.0 beta version with Gatsby? I just replaced my version 4 with it and am now getting npm warnings:

npm WARN [email protected] requires a peer of styled-components@>= 2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@>=2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of stylis@^3.5.0 but none is installed. You must install peer dependencies yourself.

I'm a new enough developer to not not know if these warnings are related to upgrading to 5.0, if they can be ignored, and how to address them if related and can't be ignored. Do I just need to npm install those peer dependencies (I can do stylis, but I already have styled-components obviously)? If so, as normal, or as dev dependencies?

My Gatsby app (now using 5.0) is still working except for:

1. The styled-components' class names are not prefixed with my component names anymore. Is this related to babel-plugin-styled-components being mad (npm warning above)?
2. I lost some locally hosted fonts and a few links are styled differently for some reason. Any reason that would be? Has anything changed regarding how styles and classes are injected into the DOM?

Thanks in advance for any help.

[dorshinar]

@riongull I'm running Gatsby with [email protected] with no issues at all. You can take a look here - https://github.com/dorshinar/blog/blob/master/package.json

[joe-bell]

Keyframes

Referenced in https://github.com/styled-components/styled-components/issues/2561

This has been one of my only pains of switching over from Emotion - the incompatibility of object styles. It would be great to make the experience more consistent with keyframes to avoid confusion in v5.

Current Workaround

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0)
  }

  70% {
    transform: translate3d(0, -15px, 0)
  }

  90% {
    transform: translate3d(0, -4px, 0)
  }
`;

const Logo = styled.img(
  {
    width: 96,
    height: 96,
    borderRadius: "50%",
    transformOrigin: "center bottom"
  },
  css`
    animation: ${bounce} 1s ease infinite;
  `
);

It might seem like straightforward but it becomes increasingly complex and difficult to manage when using pseduo selectors etc.

I only got this working after reading this thread on Spectrum

Ideal Solution

Identical to Emotion

import styled, { keyframes } from 'styled-components'

const bounce = keyframes({
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)'
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)'
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)'
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)'
  }
})

const Logo = styled.img({
  width: 96,
  height: 96,
  borderRadius: '50%',
  animation: `${bounce} 1s ease infinite`,
  transformOrigin: 'center bottom'
})

---

As for everything else I have zero complaints, thanks for all your hard work maintaining this project

[lcswillems]

Is it possible to include this very short code somewhere in the library?

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

export const useTheme = () => useContext(ThemeContext);

Hence, it will be sufficient to do:

import { useTheme } from 'styled-components';

const theme = useTheme();

to get the theme.

Thank you for all your work.

[semoal]

__

Is it possible to include this very short code somewhere in the library?

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

export const useTheme = () => useContext(ThemeContext);

Hence, it will be sufficient to do:

import { useTheme } from 'styled-components';

const theme = useTheme();

to get the theme.

Thank you for all your work.

Nice idea! I've tried to add it. #2765

[melloc01]

Hi guys, what is needed for the 5.0 release? It seems that #1789 will be postponed to 5.1?

[Can-Sahin]

Check out to see if 5.0 is released. I will let you know 😁

https://can-sahin.github.io/Is-Styled-Components-Released/

(Made it for fun. Love styled-components)

[jacobp100]

@probablyup could we add #2782 (update css-to-react-native) to 5.0? Hopefully it's not too late! 😄

[jacobp100]

@probablyup Hey, sorry, I tried to set up this repo, but it fails on trying to install the packages via yarn

I've published css-to-react-native 3.0.0

If someone is able to run yarn upgrade-interactive --latest and update that package, that'd help me a lot

Thanks!

[joshjg]

Opened this issue to track the typescript definition changes that are needed.
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/39450

[sidletsky]

When is the release of v.5?

[mxstbr]

Hopefully soon @sidletsky, we already have our first release candidate out! 👍

[viiiprock]

any idea to resolve this https://github.com/styled-components/styled-components/issues/439
in v5?

[probablyup]

@anmolmahatpurkar it's not inactive, look at the v5 PR

[probablyup]

https://github.com/styled-components/styled-components/releases/tag/v5.0.0 :shipit:

[fabb]

@probablyup could you please add something like this to the release notes, it took us quite some time to find out this breaking change in v5, and others might benefit from it as well:

Note: In SSR projects it now is necessary that global styles need to be collectable like regular styles. In the case of next.js, it is no longer possible to put them into the render function of the _document.js. To fix this, move them to _app.js or some other component in the render tree below.

[probablyup]

I don’t think that’s ever been recommended or documented?

Sent from my iPhone

On Jan 14, 2020, at 1:05 AM, fabb [e-mail] wrote:


@probablyup could you please add something like this to the release notes, it took us quite some time to find out this breaking change in v5, and others might benefit from it as well:

Note: In SSR projects it now is necessary that global styles need to be collectable like regular styles. In the case of next.js, it is no longer possible to put them into the render function of the _document.js. To fix this, move them to _app.js or some other component in the render tree below.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[fabb]

It also hasn‘t been discouraged, and it used to work fine in v4.

[fabb]

Released v5 to production today, looks great! Slightly lower SSR memory usage and render times. ❤️