CSS is applied after page is rendered.

[rajpraful]

Hi all, I am developing a PWA and using the next-CSS plugin.

When the page is loaded for the first time, the page without CSS is displayed for a second, and then CSS is applied.

How to avoid this?

is this regarding media query CSS? because CSS I have written is

@media screen and (min-width: 769px) {
.logo {
max-height: 12rem;
}

.background {
background-image: url('/static/background.jpg');
}
}

[leerob]

Hey! You shouldn't need to use the next-css plugin now that CSS support is built directly into the platform.

https://github.com/zeit/next.js/blob/canary/examples/with-next-css/pages/_app.js

[leerob]

I would make sure you're loading your global CSS in _app.js as well.

[rajpraful]

Thanks, But I still have that issue.

[valse]

After some upgrades I'm starting having the same css order issue... There was a similar issue with css modules but I'm using styled-css (with the sass plugin)

[valse]

My issue was due to the new 3.3.0 styled-css version and has been fixed after the next.js 9.4.1 upgrade

[jackylo-hc]

I have same issue with using 9.4.1 and sass, without any plugin
I saw the global style in _app.js will be appended in the bottom of the head
It's fine in production but not development env