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.

extractCritical doesn't extract css from <Global> components

See original GitHub issue

Current behavior:

extractCritical doesn’t extract css from <Global> components.

Some applications, like for example Google AMP, cannot have multiple <style> tags and/or cannot have <style> tags rendered in the <body>.

To reproduce:

Use extractCritical to extract the CSS from the React app
Inject that CSS in it’s own <style amp-custom> in the <head>

Expected behavior:

The <style amp-custom> tag is fine, but there’s an additional tag <style data-emotion-css="xxx"> with the css from the <Global> component.

The CSS from <Global> should be extracted as well.

Environment information:

react version: 16.8.6
emotion version: 10.0.14

I’ll add a codesandbox with the production soon (cloudflare seems down right now).

Issue Analytics

State:
Created 4 years ago
Comments:18 (8 by maintainers)

Top GitHub Comments

1reaction

NNSTHcommented, Jan 16, 2020

thank you very much @luisherranz ! now I can use emotion with my AMP pages!

0reactions

ribeirogabcommented, Jun 5, 2021

@luisherranz

Sorry for my stupidity, but I couldn’t use @emotion-js on AMP pages with Next.js. Could you help me with an example?

Top Results From Across the Web

Server Side Rendering - Emotion

If you have dynamic global styles it's advised to create cache per single render to avoid global styles from different renders leaking into...

Extract critical CSS - web.dev

Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as...

Separating CSS - SurviveJS

Webpack provides a means to generate a separate CSS bundles using mini-css-extract-plugin (MCEP). It can aggregate multiple CSS files into one. For this...

@emotion/server | Yarn - Package Manager

Extract and inline critical css with emotion for server side rendering. ... to the css prop, a Global component for dynamic global styles,...

@egoist/vue-emotion - npm

Seamlessly use emotion (CSS-in-JS) with Vue.js. Latest version: 0.6.2, last published: 2 years ago. Start using @egoist/vue-emotion in your ...