Variants and css prop styles do not apply

[8th713]

Bug report

Describe the bug

Div component variants and css prop styles do not apply.

To Reproduce

https://codesandbox.io/s/stitches-bug-su9fq?file=/src/App.tsx

Expected behavior

Variant and css prop styles are applied.

System information

• Version of Stitches: 0.1.0-canary.12

Additional context

If multiple stitch components have the same style, the component's base CSS rules will be duplicated and will take precedence over the additional CSS rules.

[joe-bell]

Try this approach instead, it should give you the behaviour you're looking for here:

const Div = styled('div', {
  margin: 8,
  variants: {
    bg: {
      pink: {
        backgroundColor: 'pink',
      },
      red: {
        backgroundColor: 'red',
      },
      green: {
        backgroundColor: 'green',
      },
    },
  },
  defaultVariants: {
    bg: 'pink'
  }
})

[peduarte]

Hmm. This most definitely shouldnt be happening.

Looks like we have an issue with the CSS injection of base styles. It gets added twice, and the secon time later in the stylesheet, so it overrides the variants.

Here's the generated CSS

.sxbjjes {
  margin: 8px;
  background-color: pink;
}
.sxbjjesy27ki--bg-red {
  background-color: red;
}
.sxbjjesfqayk--bg-green {
  background-color: green;
}
.sxbjjes2qnvx--css {
  background-color: lime;
}
.sxbjjes {
  margin: 8px;
  background-color: pink;
}
.sxbjjeszz1ir--typography-md {
  font-size: 1.25rem;
}
.sxbjjesibggw--css {
  background-color: skyblue;
}

A bit more info, this happens becuase the generated base class for the Div and Title are the same. They are the same because both components share the exact same base styles.

@jonathantneal perhaps this was done as an optimisation, but its causing specificity issues, similar to the ones we had with atomic css