This appears to only be an issue when building for development. If I build for production, the style sheets are generated as expected and don't cause the precedence issue that I'm seeing in development. For example, in dev, the ButtonBase styles are being generated and included in both layout.css and page.css files. However, those styles are only included in a single generated file when building for prod and allow more specific styles to be applied by style sheets being included later in the document.

I am using AppBar is an example here. The AppBar is a component that wraps Paper and override the background. In Next.js app router, AppBar is used in layout.tsx and then a Paper is used in page.tsx.

The root cause comes from the styles of the Paper being generated to both layout.css and page.css and Next.js orders the <link> by loading the layout.css before page.css (meaning page.css has higher priority than layout.css for the same classes):

Because the produced HTML of AppBar includes classes of the Paper like this:

<div class="appbar paper">

// layout.css
.paper { background: white };
.appbar { background: blue };

// page.css 
.paper { background: white };

This causes .paper in page.css to win the .appbar in layout.css.

In production, the CSS files are built with a different process, so there are no duplicate CSS however, there is a possibility that the order of the might be different.

Update

This issue involves Next.js because page.tsx is processed before layout.tsx. This makes it hard for Pigment CSS to know if Paper is already used in the upper layout or not.

Just bumped into this bug as well with my project. Would love to see it resolved.

Hey folks. I am looking into this.