Weird behaviour of global css when using linaria/loader

[vlatkoodrljin]

I followed official nextjs linaria example:

https://github.com/vercel/next.js/blob/canary/examples/with-linaria

to setup basic app and tried to import simple global css:

global.css

body {
  margin: 0;
}

directly into _app.js.

_app.js

import Layout from '../components/Layout';
import '../global.css';

const App = props => {
  const { Component, pageProps } = props;
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};

export default App;

CSS is added correctly to the top of the css file but when I inspect body tag using Chrome I see that global css styles are applied from the last component in the tree, does anybody know why? Am I doing something wrong?

[theskillwithin]

any progress on this issue?

[karlhorky]

Did you see the new version of the Next.js Linaria example added in this PR here? https://github.com/vercel/next.js/pull/41085/files

There are also other solutions in https://github.com/callstack/linaria/issues/589