next.js: Compiler does not place css @imports in own style tags the way babel used to.

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

14.18.1

What browser are you using?

chrome

What operating system are you using?

mac0s

How are you deploying your application?

vercel

Describe the Bug

I just got bit in the upgrade.

In nextjs v10, this is considered valid:

* {
    font-family: "Abril Fatface";
}

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=block');

This works because each @import statement is wrapped in its own style tag.

In nextjs v12, @import statements are not wrapped in their own style tag.

Expected Behavior

I expect each @import statement is wrapped in its own style tag.

To Reproduce

In nextjs v12, add this to global.css

* {
    font-family: "Abril Fatface";
}

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=block');

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 4
Comments: 23 (7 by maintainers)

Most upvoted comments

I can confirm that this issue is still occurring with nextjs 12.1.0 production mode. Does anyone know any alternative way to load google fonts while using swcMinify?

Edit: The issue does not seem to be related to swc, and occurs even with swcMinify = false in nextjs 12+ versions; I worked around it in the following way:

remove @import google fonts from the scss files
new imports.css file that contains all the @import statements, which is imported first in _app.tsx This works with swc enabled too, production & dev versions.

kavadithya on Feb 20, 2022

Confirming that @scottccoates mentioned above.

I had Tailwind definitions at the top of the file and then a font Google Font import afterwards like this

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

Moving the imports as the top first thing on the file, solved the problem

/* ./styles/globals.css */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

I also confirm this working correctly on Next 11

Hope this is useful.

garyvh2 on Jan 4, 2022

Same problem with @import on the top

lucasoz on Feb 7, 2022

Nah, moving @import ... around doesn’t fix anything for me.

My CSS files used to have @imports at the top as seen here: https://guildplanner.pro/_next/static/css/4b3115bd6e9f5f53cd0c.css

But with NextJs 12, those leading @imports are gone now.

shehi on Jan 4, 2022

Update on previous comment:

I was importing bootstrap first in my _app.js file, that was causing my issue:

import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/global.scss';

If i switch the import order, making the global css file first, it works, even without scss.

scott-coates on Dec 28, 2021

Per #30567:

Loading the font with next dev works but not with next build (next start).

I can confirm that importing fonts works in dev but not with next build. Generated styles in production are not valid.

@balazsorban44 @zackdotcomputer Any update on a fix for the above in next 12. Im still facing the issue on production only, even with the correct import hierarchy.

Started facing it on upgrading from v11.1.4 to v12.3.4.
Im also importing fonts via typekit

casperfernandes on Aug 10, 2023

In my case, I was using the @import statement in the global.css file, and also I was using the tailwindcss for styling.

I was able to fix this issue by defining the fonts in the _document.js file.

import { Head, Html, Main, NextScript } from 'next/document';
import React from 'react';

export default function document(): JSX.Element {
  return (
    <Html lang={'en_US'}>
      <Head>
        <link rel={'icon'} href={'/favicon.ico'} />
        <link rel={'stylesheet'} href={"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"} />
        {/* You also can add JS files here */}
      </Head>
      <body>
      <Main />
      <NextScript />
      </body>
    </Html>
  );
}

shahradelahi on Feb 27, 2023

Same issue here, I am using NextJS v14 with sass and app router @import url’s position incorrect after build

vann-at-cpcp-dot-tw on Feb 18, 2024

For font loading, we recommend leveraging our built-in font optimization: https://nextjs.org/docs/basic-features/font-optimization

balazsorban44 on Feb 20, 2022

I can confirm this as an issue, but as Tim said, it’s not related to SWC. (I tried adding a .babelrc file, and this still reproduces)

I could narrow it down to this change: https://github.com/vercel/next.js/compare/v11.1.3-canary.99...v11.1.3-canary.100

Most likely this PR #30165

Prior this, the generated CSS looked like this:

@import url(https://fonts.googleapis.com/css2?family=Emilys+Candy&display=block);

body,html {
    padding: 0;
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
}

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

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Emilys Candy
}

But after, it was left untouched:

body,html {
    padding: 0;
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
}

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

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Emilys Candy
}

@import url("https://fonts.googleapis.com/css2?family=Emilys+Candy&display=block");

balazsorban44 on Dec 21, 2021