Emotion: [Question] Empty style[data-emotion] in production build

[radreamer]

• emotion version: 9.2.12
• react version: 16.6.3

I want to see emotion styles on production, but I see only empty <style data-emotion></style>. How is it possible that there is no CSS code, but styles works?

[Andarist]

This is because emotion in production uses insertRule API which is faster than creating text nodes.

[radreamer]

@Andarist thank you! is it possible to insert this style[data-emotion] tag into other than head location, I need it for shadow dom

[Andarist]

@radreamer https://emotion.sh/docs/cache-provider

[mrsum]

Is it possible to get all css styles programatically at production build? I need styles for PDF generation.

[Andarist]

@mrsum

[...document.querySelectorAll('[data-emotion]')].flatMap(({ sheet }) => [...sheet.cssRules].map(rules => rules.cssText)).join('\n')

[FezVrasta]

While I'm here I'm going to close the issue since it has been answered already, I hope you guys don't mind.