Emotion: Support for @import in `injectGlobal`

Created on 14 Jul 2017 · 6Comments · Source: emotion-js/emotion

emotion version: 5.2.0
react version: 15.6.1

Relevant code.

injectGlobal`
  @import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');
  body { color: blue; }
`

What you did:

Compiled the code above

What happened:

The semi-colon on the end of the @import statement is removed, resulting in the following selector and its rules to be skipped by the browser.

Reproduction:

Problem description:

Most helpful comment

@mattfysh

browser will have to parse, execute JS to find out about the embed css, then it will have to download that css (along with fonts) and display
If you embed it directly within HTML, it will parse and execute at the same time with JS

thangngoc89 on 14 Jul 2017

👍2

All 6 comments

Workaround:

injectGlobal`
  @import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');
  body {}
  body { color: blue; }
`

mattfysh on 14 Jul 2017

👍2

@mattfysh From a performance perspective, you shouldn't do this at all. Instead, add the file at a <link> tag in <head>

thangngoc89 on 14 Jul 2017

ok I'll do that - curious to know the reasoning behind the performance hit though. thanks

mattfysh on 14 Jul 2017

@mattfysh

browser will have to parse, execute JS to find out about the embed css, then it will have to download that css (along with fonts) and display
If you embed it directly within HTML, it will parse and execute at the same time with JS

thangngoc89 on 14 Jul 2017

👍2

I know this isn't what you are asking about for this issue but here is a better way to use google fonts.

import { fontFace } from 'emotion'
fontFace`
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v6/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
`

Used in the example here:
https://github.com/tkh44/emotion/blob/master/example/src/main.js#L47-L53