Hi, I am using a node module and imported a css from it like below

// page.tsx
'use client'
import 'some-node-modules/original.css'; // css from node_modules
import './custom.css'; // custom css file to overwrite some styles of the above css file

const ParentComponent = () => ...



// ChildComponent.tsx
import './child-component.css';

const ChildComponent = () => ...

it works perfect in dev, but when I release it to production, the order looks different. child-component.css and ./custom.css are merged as a single file, but it seems imported earlier than original.css

...
// in production's response
<link rel="stylesheet" href="/_next/static/css/ad1f09019b218539.css" data-precedence="next"/> // child-component.css & custom.css merged
<link rel="stylesheet" href="/_next/static/css/1f273c60e366e515.css" data-precedence="next"/> // original.css from the node module
...

What's interesting is if I don't import child-component.css, then the original.css and custom.css are merged together in a correct order 🤔

What's the best way to keep the order even in production release? Thanks in advance