should critical be a the top of head?

[sndrs]

first of all, thanks for creating this plugin, i love it :)

i have a question regarding this bit:

https://github.com/silvenon/gatsby-plugin-linaria/blob/a52b2cb3a2b0e59847ef0fdb291357008e1a325c/src/gatsby-ssr.js#L35-L43

i'm adding a reset by just doing import 'reset.css' and having gatsby inject it into the head. the same with some @font-faces.

when using this plugin, the linaria's critical css is inserted before any other css i've added.

this instinctively feels the wrong way round to me – i was wondering what your reason was for choosing this order?

[silvenon]

🤔 I agree with you. @cometkim what do you think?

[cometkim]

Gatsby merges all loaded styles into common.css by default and extracts them via mini-css-extractor. This plugin increases the priority of linaria css and separates it from common.css and attached it with order according to the actual resource priorities set in webpack config.

In most cases, this is not a problem because linaria is used for scoped style. However, declaring global styles in both ways(linaria and others) can be confusing no matter how we ordered it.

[silvenon]

If we imagine Linaria with other styles like this:

import { styled } from 'linaria/react'
import '../styles/reset.css'

styled`
  body {
    background: purple;
    color: white;
  }
`

or if reset.css had been imported in gatsby-browser.js, whatever, I would expect the styles from reset.css to be added before Linaria's global styles. I can't think of a case where it wouldn't be obvious how we should order the styles. 🤔

[cometkim]

Oh, actually styles already ordered how you expected, because this plugin attaches the same styles in the bottom of .

We have another possible problem is: we can get blink of css problem if we use global styles with linaria.

for exam:

import { css } from 'linaria';

/**
 * in other.css
 * body { background: red; }
 */
import './other.css';

export const globalStyles = css`
  :global() {
    body { background: blue }
  }
`;

The result background color of body tag is RED in first paint, but it instantly changed into BLUE after fetching linaria's full css.

[silvenon]

Fix published in v2.0.0.