You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
constcreateEmotion=require('create-emotion')constcreateEmotionServer=require('create-emotion-server')constcontext={}// instances should work together because they share contextconstemotion1=createEmotion(context)constemotion2=createEmotion(context)// emotionServer can be bootstrapped from either instance.const{ renderStylesToString }=createEmotionServer(emotion1)// Rendering works fine on components created by the first instanceconstclassName1=emotion1.css`color: magenta;`console.log(renderStylesToString(`<h1 className="${className1}"></h1>`))// <style data-emotion-css="madiid">.css-madiid{color:magenta;}</style><h1 className="css-madiid"></h1>// Style tags are empty when rendering components created by the first instanceconstclassName2=emotion2.css`color: rebeccapurple;`console.log(renderStylesToString(`<h1 className="${className2}"></h1>`))// <style data-emotion-css="l7wj9y"></style><h1 className="css-l7wj9y"></h1>
Steps to reproduce
Tried to use emotion server-side rendering with react-static. Turns out it triggered an edge case in emotion.
To be clear, react-static is not required to reproduce the bug. Steps to reproduce:
Create two instances of emotion that share a single context object. I did this following the example in the docs.
Create a css class using css exported from the second instance.
Interpolate the class into some html.
Try to inline styles into the html using renderStylesToString
Problem description
renderStylesToString creates style tags with empty contents.
The style tags are empty because emotion.caches.inserted[id] is an empty string. (source)
emotion.caches.inserted[id] is an empty string because current never get's updated with the css rules generated by stylus via stylis-rule-sheet (You can test this yourself by adding console.log(current) after this line).
current never gets updated because the insertRule function has captured a closure referencing current from the first invocation of createEmotion. (Sorry if I'm not using the right technical terms. I'm not used to discussing the innards of JS.)
The closure points to the current variable from the first instance because it's used by a stylus plugin that is only registered if caches has not been created yet. (i.e. the first invocation of createEmotion) (source)
Versions
emotion
version: 9.0.2react
version: N/ACode
Steps to reproduce
Tried to use emotion server-side rendering with react-static. Turns out it triggered an edge case in emotion.
To be clear, react-static is not required to reproduce the bug. Steps to reproduce:
css
exported from the second instance.renderStylesToString
Problem description
renderStylesToString
creates style tags with empty contents.emotion.caches.inserted[id]
is an empty string. (source)emotion.caches.inserted[id]
is an empty string becausecurrent
never get's updated with the css rules generated by stylus viastylis-rule-sheet
(You can test this yourself by addingconsole.log(current)
after this line).current
never gets updated because theinsertRule
function has captured a closure referencingcurrent
from the first invocation ofcreateEmotion
. (Sorry if I'm not using the right technical terms. I'm not used to discussing the innards of JS.)current
variable from the first instance because it's used by a stylus plugin that is only registered ifcaches
has not been created yet. (i.e. the first invocation of createEmotion) (source)Runable example
Minimal test-case here: https://github.com/whmountains/emotion-bug-repro
Try online at: https://codesandbox.io/s/github/whmountains/emotion-bug-repro/tree/master/?expanddevtools=1&view=editor
Temporary workaround
I think this will work, though I haven't tested it.
Replace this:
With this:
Suggested Solutions
I have a few ideas. Haven't tested any of them.
Move
let current
outside thecreateEmotion
function.Keep
current
inside the context object.Get stylus and the stylesheet manager out of the context
object
.The text was updated successfully, but these errors were encountered: