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

Reproduce the issue with the global.css example in Next.js 12.0.7, then trace the Next.js compiler's CSS handling for @import statements and compare it with the reported Next.js 10 behavior. Done means each @import is emitted in its own style tag as expected, with coverage for the provided reproduction.