Extend variants while composing components

[schonert]

Is your feature request related to a problem? Please describe.
Creating a base component library with the goal of being easily customisable and extendable. In this case i'd like the ability to extend the parent components variants rather then overwrite them.

Describe the solution you'd like
The component library exports a Button component handling size, type, disabled, icons etc. By importing and using this Button to compose your own button with custom styling - variants are not overwritten.

In the example below the entire primary and link types are overwritten in FancyButton

const StyledButton = styled("button", {
  variants: {
    type: {
      primary: {
        backgroundColor: "$accent",
        color: "#fff",
      },
      link: {
        backgroundColor: "transparent",
        color: "$accent",
      },
    },
  },
});

const FancyButton = styled(StyledButton, {
  variants: {
    type: {
      primary: {
        backgroundColor: "pink",
      },
    },
  },
});

export const Button = ({ type = "primary", ...rest }: ButtonProps) => (
  <FancyButton type={type} {...rest} />
);

[peduarte]

@schonert thanks for this 💯 Something we've talked about. Will see if we can fit that in the next beta release.

/cc @jonathantneal

[peduarte]

@schonert This has been implemented in beta.

[LexSwed]

omg this next release is nuts 🤯

[peduarte]

We've published a pre-release of Stitches beta 🚀

Core:

npm install @stitches/[email protected]

React:

npm install @stitches/[email protected]

This issue should have been resolved in the beta version. We'd appreciate it if you could verify it.

⚠️ Please refer to this migration guide as there are some breaking changes.