Next.js only loads global.css after manual page refresh. Another also existing styles.js is ignored

Question

As of now the styling happens in two places: global.css + index.js via styled-components

Problem

After start or restart of local server + manual page refresh, all styles are applied as intended. Also style changes are applied promptly.
Now, if another manual page refresh is performed, only styles from global.css are applied, but styles from index.js file don't initially load. Styles other than global.css only take effect in 2 ways:

1. click one of the links + click on retun button (2nd screenshot)
2. restart local server + page refresh

I recorded the steps I make. Sorry for the breathing noise. 😌
https://www.youtube.com/watch?v=cp-97ZYsQhw

I added the code snippets for a better code overview only. I'm trying to setup a working example on codesandbox.

Question

Why does next.js only load the global.css, but ignore the index.js with more css until either the local server is restarted or some links are clicked?

import Link from "next/link";
import styled from 'styled-components';

const StyledMain = styled.main`
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
`;

const StyledLi = styled.li`
    font-size: var(--fontsize-profileButtons);
    text-align: center;
    list-style: none;
    margin: 50px 0; 
`;

export default function Home() {
    return (
        <>
            <StyledMain>
                <ul>
                    <StyledLi>
                        <Link href="/about">about</Link>
                    </StyledLi>
                    <StyledLi>
                        <Link href="/projects">projects</Link>
                    </StyledLi>
                    <StyledLi>
                        <Link href="/blog">blog</Link>
                    </StyledLi>
                </ul>
            </StyledMain>
        </>
    )
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
  width: 100vw;
  height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

What index.js looks like after page refresh + what it's supposed to look like

Procedure to also load css code inside index.js

Answer 1

I had a similar issue in v13.3.4 and loading my global.css file into a client-side component solved it. Not sure if this is an official solution, though.

Answer 2

Just add your library's css file import to _document.js file, ie

<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/bulma.min.css" />