styled-components: SSR duplicates stylesheets on refresh

Environment

System:

OS: macOS High Sierra 10.13.6
CPU: x64 Intel® Core™ i5-7360U CPU @ 2.30GHz
Memory: 111.95 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash

Binaries:

Node: 9.10.1 - /usr/local/bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

babel-plugin-styled-components: ^1.5.1 => 1.5.1
styled-components: 3.4.1 => 3.4.1

Reproduction

I cloned the official example of styled-components with NextJS: https://github.com/zeit/next.js/tree/master/examples/with-styled-components

It works as expected with initial version ^2.1.0. It works as expected with version 3.3.3. It does not work as expected with 3.4.0 and 3.4.1

Using different versions of NextJS or the Babel plugin did not impact the behavior.

Steps to reproduce

Run npm run dev, view page source and hit refresh with >= 3.4.0.

Expected Behavior

The created stylesheet exists once.

Actual Behavior

The created stylesheet gets duplicated with every browser refresh. ~It does not occur after a hot reload.~ It also happens in production mode. See comment by @elgubbo

~It’s by no means a show blocker, since you usually don’t refresh when using HMR, but~ I think it still might be a bug. As far as I saw in the NextJS repo this occured as well before styled-components SSR was stable at some point. If you’d like me to try to isolate the problem out of NextJS, shout. Thank you!

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (6 by maintainers)

Most upvoted comments

If it helps, here’s how to re-create it using buildkite/site:

git clone https://github.com/buildkite/site.git buildkite-site
git checkout renovate/styled-components-3.x
cd buildkite-site
yarn install
env NODE_ENV=production yarn run build
env NODE_ENV=production yarn run start

You can see the ever-growing style block:

curl -sI http://localhost:3000/ | grep Content-Length
Content-Length: 23490
curl -sI http://localhost:3000/ | grep Content-Length
Content-Length: 32193
curl -sI http://localhost:3000/ | grep Content-Length
Content-Length: 40896
curl -sI http://localhost:3000/ | grep Content-Length
Content-Length: 49599

vs doing the same, but on v3.3.3:

$ curl -sI http://localhost:3000/ | grep Content-Length
Content-Length: 23490
$ curl -sI http://localhost:3000/ | grep Content-Length
Content-Length: 23490
$ curl -sI http://localhost:3000/ | grep Content-Length
Content-Length: 23490
$ curl -sI http://localhost:3000/ | grep Content-Length
Content-Length: 23490

Having a quick look, they grow like this:

/* sc-component-id: pages__Section-ottsxv-2 */
.hQmYDN{margin-top:150px;margin-bottom:150px;}
/* sc-component-id: ottsxv-2-pages__Section-hxexeD */
.gKFcBQ{margin-top:150px;margin-bottom:150px;margin-top:100px;position:relative;}

/* sc-component-id: pages__Section-ottsxv-2 */
.hQmYDN{margin-top:150px;margin-bottom:150px;} .hQmYDN{margin-top:150px;margin-bottom:150px;}
/* sc-component-id: ottsxv-2-pages__Section-hxexeD */
.gKFcBQ{margin-top:150px;margin-bottom:150px;margin-top:100px;position:relative;} .gKFcBQ{margin-top:150px;margin-bottom:150px;margin-top:100px;position:relative;}

/* sc-component-id: pages__Section-ottsxv-2 */
.hQmYDN{margin-top:150px;margin-bottom:150px;} .hQmYDN{margin-top:150px;margin-bottom:150px;} .hQmYDN{margin-top:150px;margin-bottom:150px;}
/* sc-component-id: ottsxv-2-pages__Section-hxexeD */
.gKFcBQ{margin-top:150px;margin-bottom:150px;margin-top:100px;position:relative;} .gKFcBQ{margin-top:150px;margin-bottom:150px;margin-top:100px;position:relative;} .gKFcBQ{margin-top:150px;margin-bottom:150px;margin-top:100px;position:relative;}

toolmantim on Aug 6, 2018

I don’t think we’re experiencing any problems on 3.3.3 — after reverting back (buildkite/site#173) https://buildkite.com/home is looking 👌🏼 again.

toolmantim on Aug 6, 2018

Second this - I’ve downgraded to 2.4.1 which is working okay - I’ll do some more digging!

Edit Downgrading to 3.3.3 works for me too 💯

josephluck on Aug 6, 2018

same thing is happening here, even in production mode - meaning over time our document size grows very very large - will downgrade to 3.3.3 for now.

elgubbo on Aug 6, 2018

In production mode we use an alternate injection process that devtools doesn’t show yet for some reason. The styles are there though, just in the style sheet object model not in the DOM On Mon, Aug 6, 2018 at 5:27 AM Joseph Luck notifications@github.com wrote:

Pre-JS-runtime via view-source using “styled-components”: “^3.4.1”, on a clean server, first visit
<style data-styled-components="dBJVys bpJAGW jLQkRA lctWYD iDPIKf hjWMSY cJlpmh kScyrz lgadhd lasZkf guKXoy gBIPIe jWobCN gjwCtd jvccXB cUvvdE iXzFkB NkhCm bpzmFZ gQGuxx kSoors lQfOr ksxotE dpjReh jkMDVE ePGmst bJEZTv jqREyx fplzRC bKKqGz gPzBgn NVmOC chianT iBMAZp ezousU euLgjZ gGihdt cERNaV lpsHMD iVwvoN eOiECa ciSJwP fJPXZE gsISJH bIRigW gtxwJQ dtWjJM leuhoB gRBovt srFOU kKVqur iSQoUz hkPetm bvoVDP hvqhSZ glxTKv eKtJzo kFpBPR kfmzfj kElIJu iDyrgY laYXKv jDprLg gJArzd dwxPFE cFUSrI eRNsrA fmCmQg bmyfCi iNFNWt fwFdSK cqXgne dvhjsc dslXRt cjIWFT cNCzro jidmAY gKaLC iEJJRn hcqLiS dOBjDe cAlHyH RxJla jDITAu jdAiyf iAhsnd geyBTV hmuCCp oomAx isFIbZ bQQWKQ fzmqgp fNdtQr hBcayn fpMWRb bimOta cHjanj dOQqWG lhXRMf beqeYO bEDcPW gyVQRV jdQuMQ kowMQv kzKrle bRmzSO PSsop hxytJN gVtdXO gLZbyk hPLecy kAErAd"> -- | /* sc-component-id: sc-bdVaJa */ | .jqREyx{padding:0 1.25rem;margin-bottom:0;margin-left:auto;margin-right:auto;margin-top:0;max-width:78.75rem;width:100%;} @media (min-width:48rem){.jqREyx{padding:0 1.25rem;width:95%;}} @media (min-width:64rem){.jqREyx{width:87.5%;}} /* sc-component-id: sc-htpNat */ -- | .jvccXB{text-transform:uppercase;font-weight:700;line-height:1.2em;}.cUvvdE{color:#f2f2f2;line-height:1.2em;} | /* sc-component-id: sc-dnqmqq */ *Pre-JS-runtime* via view-source using "styled-components": "^3.4.1", on a clean server, third visit <style data-styled-components="dBJVys bpJAGW jLQkRA lctWYD iDPIKf hjWMSY cJlpmh kScyrz lgadhd lasZkf guKXoy gBIPIe jWobCN gjwCtd jvccXB cUvvdE iXzFkB NkhCm bpzmFZ gQGuxx kSoors lQfOr ksxotE dpjReh jkMDVE ePGmst bJEZTv jqREyx fplzRC bKKqGz gPzBgn NVmOC chianT iBMAZp ezousU euLgjZ gGihdt cERNaV lpsHMD iVwvoN eOiECa ciSJwP fJPXZE gsISJH bIRigW gtxwJQ dtWjJM leuhoB gRBovt srFOU kKVqur iSQoUz hkPetm bvoVDP hvqhSZ glxTKv eKtJzo kFpBPR kfmzfj kElIJu iDyrgY laYXKv jDprLg gJArzd dwxPFE cFUSrI eRNsrA fmCmQg bmyfCi iNFNWt fwFdSK cqXgne dvhjsc dslXRt cjIWFT cNCzro jidmAY gKaLC iEJJRn hcqLiS dOBjDe cAlHyH RxJla jDITAu jdAiyf iAhsnd geyBTV hmuCCp oomAx isFIbZ bQQWKQ fzmqgp fNdtQr hBcayn fpMWRb bimOta cHjanj dOQqWG lhXRMf beqeYO bEDcPW gyVQRV jdQuMQ kowMQv kzKrle bRmzSO PSsop hxytJN gVtdXO gLZbyk hPLecy kAErAd"> -- | /* sc-component-id: sc-bdVaJa */ | .jqREyx{padding:0 1.25rem;margin-bottom:0;margin-left:auto;margin-right:auto;margin-top:0;max-width:78.75rem;width:100%;} @media (min-width:48rem){.jqREyx{padding:0 1.25rem;width:95%;}} @media (min-width:64rem){.jqREyx{width:87.5%;}} .jqREyx{padding:0 1.25rem;margin-bottom:0;margin-left:auto;margin-right:auto;margin-top:0;max-width:78.75rem;width:100%;} @media (min-width:48rem){.jqREyx{padding:0 1.25rem;width:95%;}} @media (min-width:64rem){.jqREyx{width:87.5%;}} .jqREyx{padding:0 1.25rem;margin-bottom:0;margin-left:auto;margin-right:auto;margin-top:0;max-width:78.75rem;width:100%;} @media (min-width:48rem){.jqREyx{padding:0 1.25rem;width:95%;}} @media (min-width:64rem){.jqREyx{width:87.5%;}} | /* sc-component-id: sc-htpNat */ As you can see, it duplicates the .jqREyx each render. For some reason (might be related?) the injected style tag appears empty when inspected (<style data-styled-components=""></style>) however when I
inspect styles using Chrome’s developer tools, the rules point to this style tag. So I’m unable to give you the HTML output post-JS-runtime right now.

Hope this helps!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/1890#issuecomment-410663556, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1pxa6f1FGnUXLIhlpX312MWTW2HCks5uOBougaJpZM4VwBiZ .

quantizor on Aug 6, 2018

I can not confirm that it occurs on 3.3.3 as well.

Both running via Next and static export behave as expected. @elgubbo May I ask if you are absolutely sure that you downgraded properly?

ronnyhaase on Aug 6, 2018