Placeholder <style> tag ignored by rehydration logic #1845

dylmye · 2018-07-13T10:20:52Z

(I haven't provided a failing test PR because I'm unsure how to use Jest, apologies)

Environment

npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown --clipboard breaks, here's what it looks like:

npx: installed 1 in 1.783s
Path must be a string. Received undefined
npx: installed 1 in 1.849s
C:\Users\dylan\AppData\Roaming\npm-cache\_npx\4172\node_modules\envinfo\dist\cli.js

## System:
 - OS: Windows 10
 - CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
 - Memory: 6.35 GB / 15.89 GB
## Binaries:
 - Yarn: 1.6.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
 - npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD

(node:4172) UnhandledPromiseRejectionWarning: Error: The system cannot find the path specified.

    at Function.e.exports.sync (C:\Users\[...]\AppData\Roaming\npm-cache\_npx\4172\node_modules\envinfo\dist\cli.js:2:7690)
    at Object.copySync (C:\Users\[...]\AppData\Roaming\npm-cache\_npx\4172\node_modules\envinfo\dist\cli.js:2:104342)
    at Object.t.writeSync.e [as writeSync] (C:\Users\[...]\AppData\Roaming\npm-cache\_npx\4172\node_modules\envinfo\dist\cli.js:2:122592)
    at C:\Users\[...]\AppData\Roaming\npm-cache\_npx\4172\node_modules\envinfo\dist\cli.js:2:123354
    at Promise.all.then.e (C:\Users\[...]\AppData\Roaming\npm-cache\_npx\4172\node_modules\envinfo\dist\cli.js:2:123369)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:4172) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4172) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I'm using styled-components@^3.3.3

Reproduction

https://codesandbox.io/s/oq1j5q52n9

Please inspect the head of the document in the iframe. It should look like this:

and the template document, you should be able to observe the following:

Steps to reproduce

Include styled-components in your react project (non-SSR), add a styled component
Add the following tag to the head of the template React is putting <App /> into: <style data-styled-components="true"></style> (Documentation Source)

Expected Behavior

styled-components styles should be placed in the placeholder css element
this should be the same without SSR, as confirmed here: Feature request: Option to prepend <style> tags #1707 (comment)

Actual Behavior

styled-components creates another css element at the bottom of <head>

The text was updated successfully, but these errors were encountered:

dylmye · 2018-07-16T08:06:29Z

Could any contributors confirm that this logic is indeed still intended to work? Or can anyone provide a working example of this logic?

quantizor · 2018-07-16T14:37:47Z

This does appear to be a bug I think @kitten

dylmye · 2018-07-20T15:19:18Z

Tried downgrading to 3.2.3 (as per here) and still getting issues... any ideas? Again we're not using SSR. I also see that there's a test for this logic, injectGlobal.

quantizor · 2018-07-20T21:22:18Z

I’m looking into this as I have bandwidth, fyi.

dylmye · 2018-08-28T10:46:18Z

Any chance of getting support for this in 5.0? Thanks

quantizor · 2018-08-28T13:58:52Z

I can't make any promises. Getting this to work requires a major refactoring to the way our Stylesheet works. I tried to fix it for 4.0 and couldn't make any useful progress.

dylmye · 2018-08-28T14:04:45Z

Thanks for the update. Internally we've switched to emotion but it would be great to switch back as s-c can be a joy to work with :)

Is it ok for me to make a PR against the documentation repo?

huchenme · 2018-09-17T05:56:41Z

I thought this was already implemented and just checked that this feature have been removed from the documentation :(

quantizor · 2018-09-17T12:30:01Z

I don’t think it was ever added to the docs, and as-is is half implemented so that's probably for the best.

huchenme · 2018-09-18T02:00:14Z

I think it was removed 16 days ago: styled-components/styled-components-website@c3fe582#diff-badb5964ab969ebb5836d448e2d4c3b8

  Alternatively, if you want to keep using single classname selectors in your stylesheet and make	
  them win over rules generated by styled-components, you can change the relative order of the	
  competing tags. That means either moving your stylesheet \`<link>\` tags down into the \`<body>\`,	
  or moving the styled-components \`<style>\` tag(s) up. You can control where styled-components	
  renders its styles by creating a placeholder tag with the \`data-styled-components\` attribute:	
   \`\`\`html	
  <head>	
    <style data-styled-components="true"></style>	
    <link rel="stylesheet" href="my-component.css"/>	
  </head>	
  \`\`\`

ramiel · 2018-10-10T11:22:16Z

Any news on this? Any chance to have this supported?

quantizor · 2018-10-10T14:09:07Z

Nope. We’ll look at it after v4 is out

…

On Wed, Oct 10, 2018 at 6:22 AM Fabrizio Ruggeri ***@***.***> wrote: Any news on this? Any chance to have this supported? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1845 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1rRvrT8vtiUlsSNwQqTFybRFTgT-ks5ujdhsgaJpZM4VOp_N> .

blakek · 2019-02-14T18:25:19Z

We were moving a site with existing external styles and styled-components v2.x to the latest v4 and ran across this issue. The external styles require the global style be loaded after the <style /> tag generated by styled-components. For now, we've worked around the issue by moving the external style links into the body tag.

Is there any method that exists to specify the location of the style tag in the head?

Thanks!

ramiel · 2019-03-03T10:56:33Z

Nope. We’ll look at it after v4 is out
…

Now that version 4 is out, has this issue been resolved?

cpmsmith · 2019-03-27T00:55:57Z

I've taken a crack at this in #2463 😄

myronliu347 · 2019-04-24T07:47:51Z

When will this problem be fixed?

dylmye · 2019-04-26T10:14:01Z

Just bumping for a review of #2463 :)

brendonco · 2020-06-23T14:15:09Z

any plan to merge this on future release? #2463

kitten · 2021-08-09T18:47:48Z

Closing due to age, inactivity, missing reproduction, or lack of details.

dylmye changed the title ~~Placeholder <style> tag ignored by rehydration logic~~ Bug Report: Placeholder <style> tag ignored by rehydration logic Jul 13, 2018

quantizor added the enhancement ✨ label Jul 20, 2018

dylmye changed the title ~~Bug Report: Placeholder <style> tag ignored by rehydration logic~~ Placeholder <style> tag ignored by rehydration logic Aug 14, 2018

cpmsmith mentioned this issue Mar 27, 2019

Reimplement placeholder <style> tag usage #2463

Closed

kitten closed this as completed Aug 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Placeholder <style> tag ignored by rehydration logic #1845

Placeholder <style> tag ignored by rehydration logic #1845

dylmye commented Jul 13, 2018 •

edited

dylmye commented Jul 16, 2018

quantizor commented Jul 16, 2018

dylmye commented Jul 20, 2018 •

edited

quantizor commented Jul 20, 2018

dylmye commented Aug 28, 2018

quantizor commented Aug 28, 2018

dylmye commented Aug 28, 2018 •

edited

huchenme commented Sep 17, 2018

quantizor commented Sep 17, 2018 via email •

edited

huchenme commented Sep 18, 2018

ramiel commented Oct 10, 2018

quantizor commented Oct 10, 2018 via email

blakek commented Feb 14, 2019

ramiel commented Mar 3, 2019 •

edited

cpmsmith commented Mar 27, 2019

myronliu347 commented Apr 24, 2019

dylmye commented Apr 26, 2019

brendonco commented Jun 23, 2020

kitten commented Aug 9, 2021

Placeholder <style> tag ignored by rehydration logic #1845

Placeholder <style> tag ignored by rehydration logic #1845

Comments

dylmye commented Jul 13, 2018 • edited

Environment

Reproduction

Steps to reproduce

Expected Behavior

Actual Behavior

dylmye commented Jul 16, 2018

quantizor commented Jul 16, 2018

dylmye commented Jul 20, 2018 • edited

quantizor commented Jul 20, 2018

dylmye commented Aug 28, 2018

quantizor commented Aug 28, 2018

dylmye commented Aug 28, 2018 • edited

huchenme commented Sep 17, 2018

quantizor commented Sep 17, 2018 via email • edited

huchenme commented Sep 18, 2018

ramiel commented Oct 10, 2018

quantizor commented Oct 10, 2018 via email

blakek commented Feb 14, 2019

ramiel commented Mar 3, 2019 • edited

cpmsmith commented Mar 27, 2019

myronliu347 commented Apr 24, 2019

dylmye commented Apr 26, 2019

brendonco commented Jun 23, 2020

kitten commented Aug 9, 2021

dylmye commented Jul 13, 2018 •

edited

dylmye commented Jul 20, 2018 •

edited

dylmye commented Aug 28, 2018 •

edited

quantizor commented Sep 17, 2018 via email •

edited

ramiel commented Mar 3, 2019 •

edited