Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

emotion version: 9.2.12
react version: 16.6.3

screen shot 2019-02-27 at 4 23 51 pm

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?

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:9 (4 by maintainers)

Top GitHub Comments

37reactions

Andaristcommented, May 21, 2019

@mrsum

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

8reactions

Andaristcommented, Feb 27, 2019

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

Top Results From Across the Web

emotion/cache on SSR with Material-UI is always empty

The ID extraction in createExtractCriticalToChunks work well, but the cache.inserted object from emotion is now always an empty object.

How to ensure your Emotion 👩‍🎤 CSS-in-JS styles are ...

To make sure the Emotion styles are overwriting the CSS Module styles in production, the Emotion <style data-emotion> tag needed to come after ......

Emotion in React

In this post, we will learn more about Emotion, and see the features and advantages that it can bring to our applications.

Why do AtlasKit components render styles in Jira Software ...

Just looked at my code and everything seems to work fine in both development and production mode. Yet the <style data-styled-components> tag is ......

How to fix the Whitescreen After a Static Deployment with ...

Do you know how annoying it is to stare at a blank screen after you deployed a static ... you finally deployed your...