I'm using Next.js with the App Router. I'm importing a few global CSS packages in my app/layout.js file:

import "bootstrap/dist/css/bootstrap.min.css";
import "primereact/resources/themes/mdc-light-indigo/theme.css";
import "primeicons/primeicons.css";
import "./primereact-override.css";
import "./globals.css";

This is the order I want to import them in (e.g. I want PrimeReact to override Bootstrap's classes). Next.js seems to be respecting this order in the final compiled CSS file.
However, in the final compiled CSS file (tested in dev mode), @layer primereact { ... } is getting added to most of the PrimeReact classes, which is making Bootstrap's classes take priority over them. There is no @layer in the original primereact/resources/themes/mdc-light-indigo/theme.css file. 1) Why is this happening? 2) How to stop it and achieve the desired behaviour?
Thank you