Incorrect CSS order when adding styles to a cross file component

[jantimon]

The CSS order in the generated bundle can be incorrect, causing unexpected styling results.

It happens when both selectors have the same specificity and a similar postOrderIndex in the webpack chunkGrap:

To explain the bug I created a small example:

app/order/
├── page.tsx
├── button.tsx
├── fancyButton.tsx
├── iconButton.tsx
└── fancyIconButton.tsx

This example has the following Component Inheritance Tree:

Button
├── FancyButton
└── IconButton
    └── FancyIconButton

With the following components:

button.tsx (base component):

import { styled } from "next-yak";
export const Button = styled.button`
    color: red;
    &:before {
        content: "Button";
    }
`;

iconButton.tsx (extends Button):

import { styled } from "next-yak";
import { Button } from "./button";
export const IconButton = styled(Button)`
    color: #ec79ec;
    &:before {
        content: "IconButton";
    }
`;

fancyButton.tsx (extends Button):

import { Button } from './button';
import { styled } from 'next-yak';
export const FancyButton = styled(Button)`
    color: #48d448;
    &:before {
        content: "FancyButton";
    }
`;

fancyIconButton.tsx (extends IconButton):

import { styled } from "next-yak";
import { IconButton } from "./iconButton";
export const FancyIconButton = styled(IconButton)`
    color: hotpink;
    &:before {
        content: "FancyIconButton";
    }
    ${IconButton} {
        color: #f0f;
    }
`;

page.tsx:

import { FancyButton } from "./fancyButton";
import { FancyIconButton } from "./fancyIconButton";
import { Button } from "./button";

const Example = () => {
    return (
        <div>
            <Button />
            <FancyButton />
            <FancyIconButton />
        </div>
    );
}
export default Example;

Expexted:

Expected order in the CSS bundle:

1. Button styles
2. FancyButton styles (overrides Button)
3. IconButton styles (overrides Button)
4. FancyIconButton styles (overrides IconButton)

Actual:

Actual order in the CSS bundle:

1. Button styles
2. FancyButton styles (overrides Button)
3. FancyIconButton styles (does NOT override IconButton)
4. IconButton styles (wrongly overrides FancyIconButton) 🪳

The issue might b related to how next-yak generates CSS module imports. The order of imports in the components affects the final CSS bundle order, similar to the behavior reported in webpack-contrib/mini-css-extract-plugin#1117.

Workaround

I am still investigating the issue but I could at least fix the issue above by writing the next-yak import last:

fancyIconButton.tsx

import { IconButton } from "./iconButton";
import { styled } from "next-yak";

export const FancyIconButton = styled(IconButton)`
    color: hotpink;
    &:before {
        content: "FancyIconButton";
    }
    ${IconButton} {
        color: #f0f;
    }
`;

[jantimon]

@christinaheidt fixed this issue (pr #203)

however it looks like there are also CSS order problems in Webpack and Next.js

• CSS Order Differs Between Development & Production Modes when Treeshaking. webpack/webpack#7094
• Inconsistent CSS resolution order vercel/next.js#64921

I'll close this issue for now as it looks like there is not much we can do in next-yak itself