Class becomes too specific when using className on inherited styled component

[dominictobias-bullish]

Environment

• Linaria version: 6.3.0
• Bundler (+ version): Vite 7.1.1
• Node.js version: 22
• OS: MacOS

Description

The button is still grey instead of the className style taking precdence because for some reason the class of SecondaryButton is a more specific chained class instead of just .s1llctjr:

The button should be green.

Reproducible Demo

import { styled } from '@linaria/react';
import { css } from '@linaria/core';

export function App() {
  return <SecondaryButton className={greenButtonStyle}>Hello</SeconaryButton>;
}

const Button = styled.button`
  background: red;
`;

const SecondaryButton = styled(Button)`
  background: grey;
`;

const greenButtonStyle = css`
  background: green;
`;

https://stackblitz.com/edit/vitejs-vite-na95ejhg?file=src%2FApp.tsx&terminal=dev

[dominictobias-bullish]

The solution is to make the green button with styled as well, it doesn't play nice with css function