I'm switching from the pages dir to the app dir, and the only thing really causing an issue currently is the order of css imports.

My structure is pretty simple. I have app/layout.tsx, and inside of there I am importing normalize.css from an npm package, plus two local css files:

import 'normalize.css/normalize.css';
import '@/styles/globals.css';
import '@/styles/common.css';

Looking inside of the layout.css file, I see the files are ordered as follows:
globals.css > common.css > normalize.css.

For some reason normalize.css is always ordered after the other two files, even though I have that import first. If I play around with the order of globals.css and common.css, it does change the relative order between them, but normalize.css is always placed after them regardless of import order.

(On top of that, I have component module css also being loaded before all of these global styles too-- also a problem.)

To keep it simple though, I think the basic question is how can I force my normalize.css to be the first styles on the page?