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');

[kavadithya]

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:

1. remove @import google fonts from the scss files
2. 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.

[garyvh2]

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.