I have a Next.js application where I try to use css layers to control the precedence. The css is a mix of global css and third-party libraries (e.g. Mantine UI). Therefore, I have the following line in my global.css:
@layer reset, basecolors, mantine, dsno, kyvtokens, kyvtokenstodesignsystemet, styrbord;
The global.css file is the first imported in my layout.tsx:
import '../globals.css';
import '@mantine/core/styles.layer.css';
import '@mantine/dates/styles.layer.css';
import '@mantine/dropzone/styles.layer.css';
import '@mantine/notifications/styles.layer.css';
import '@kystverket/styrbord/style.css';
import 'material-symbols';
However, in the generated layout.css, the files appear in a different order:
./node_modules/@kystverket/styrbord/dist/style.css
./node_modules/@mantine/core/styles.layer.css
./node_modules/@mantine/dates/styles.layer.css
... other files...
./src/app/globals.css
I appears that postcss loads the files by alphabetical order, so anything in ./node_modules appear before ./src. This means that some of the layers have already been declared before the layer ordering, which breaks the ordering. Do anyone know how I can ensure that globals.css is the first file added to the generated css?
