Predictably wrong CSS ordering when sharing components between different component types

[kl13nt-tng]

Link to the code that reproduces this issue

https://codesandbox.io/p/live/a657211a-67d2-4c9a-a4bb-f061e9a08dd2

To Reproduce

Next will mess up the ordering of your component styling under the following conditions (combined):

1. You have some sort of shared component, let's call it "ComponentLayout"
2. ComponentLayout is used in client, server, statically rendered, and dynamically imported components (basically everywhere)
3. ComponentLayout allows you to pass in a className to use with its own, allowing you to override its own styling

What is interesting is that it adds preload links in the correct order, but then messes up the actual stylesheet links.

Current vs. Expected behavior

Current:
Observe as Next proceeds to mess up the ordering, leading to SharedLayout's styles overriding some of your components.

Expected:
Next should respect import and loading order regardless of usages.

Provide environment information

All environments running Next>=14.2.0, regardless of OS and browser.

Which area(s) are affected? (Select all that apply)

Module Resolution

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

No response