ClassName collision creating stitches components with the same css

[GianDigia]

Bug report

Describe the bug

Creating two components with the same CSS the classNames generated is the same. This is particularly bad while composing styles.

To Reproduce

Create two components with the same style. Then create a wrapping stitches component and try to style one of the two child.

const B = styled('div', {
  width: '200px',
  height: '200px',
});

const C = styled('div', {
  width: '200px',
  height: '200px',
});

const A = styled('div', {
  [`& ${B}`]: {
    background: 'red'
  },
});

Calling A with B and C inside

<A>
  <B />
  <C />
</A>

the resulting code will be

<div class="c-jFVahN">
  <div class="c-klsufs"></div>
  <div class="c-klsufs"></div>
</div>

and both B and C will be coloured in red

Expected behavior

The generated classNames should be different eg.

<div class="c-jFVahN">
  <div class="c-klsufs"></div>
  <div class="c-clmejr"></div>
</div>

[bakkerjoeri]

I'm pretty consistently running into this problem, with simple patterns like this:

const Media = styled('div');
const Body = styled('div');
const Card = styled('div', {
  display: 'flex',
  variants: {
    direction: {
      row: {
        flexDirection: 'row',
        [`& ${Media}`]: {
          flexShrink: 0,
          flexBasis: '66%',
        },
      },
      column: {
        flexDirection: 'column',
      },
    },
  },
  defaultVariants: { direction: 'column' },
});

Then both Media and Body get those properties applied. Is there any workaround in the meantime? Can I force a different class name?

[azuline]

You can use a dummy css variable to ensure a unique hash for the styles.

[rntvicente]

Hi

I have the same problem. Any updates ?