emotion: extractCritical doesn't extract css from components

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:

  1. Use extractCritical to extract the CSS from the React app
  2. 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).

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 18 (8 by maintainers)

Most upvoted comments

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