Duplicated classes in extended components

[ivanbanov]

Description

Extending a component seems to be working fine when it's just 1 level, extending an extended component leads to duplicated classes.

Link to Reproduction

https://stackblitz.com/edit/github-lhhzk8-dkevkj?file=src%2Fapp.tsx,panda.config.ts

Steps to reproduce

// bg_blue.light
const Box = styled('div', {
  base: { background: 'blue.light' },
});

// bg_red.light
const ExtendedBox = styled(Box, {
  base: { background: 'red.light' },
});

// bg_blue.light bg_red.light
const ExtendedBox2 = styled(ExtendedBox, {
  base: { background: 'red.light' },
});

resulting in

JS Framework

react

Panda CSS Version

0.34.1

[astahmer]

hm, I remember this being an issue but I thought I had fixed it here

looking at your stackblitz, it seems fine ?

do I need to do anything else ?

[ivanbanov]

Sorry the example was not ideal, I updated the link. The problem relies on extended components that may use an already extracted class, which will give more specificity to that class, and then the element will have the wrong style.

In the link the div with wrong classes should be

// ExtendedBox2
- bg_red.light text_[white] bg_blue.light text_[white]
+ bg_blue.light text_[white]

// ExtendedDiv2
- bg_blue.light text_[white] bg_red.light text_[white]
+ bg_red.light text_[white]