TypeError when passing a style object with default variants or of type CSS

[jorenrui]

Bug report

TypeError when passing a style object with default variants or of type CSS

Describe the bug

1. When a style object has a defaultVariants, it shows a type error.

const smallChipStyles = {
  display: "inline-block",
  padding: "8px",
  borderWidth: "1px",
  borderStyle: "solid",

  variants: {
    color: {
      blue: {
        color: "blue",
        borderColor: "blue"
      }
    }
  },
  // Adding default variants to a style object
  // shows a type error.
  // Remove this then the error goes away.
+  defaultVariants: {
+    color: 'blue',
+  },
};

2. Variants is lost when you use CSS for the style object's type

+ const bigChipStyles: CSS = {
  display: "inline-block",
  padding: "8px",
  borderWidth: "1px",
  borderStyle: "solid",

  variants: {
    color: {
      blue: {
        color: "blue",
        borderColor: "blue"
      }
    }
  },
  defaultVariants: {
    color: 'blue',
  },
};

To Reproduce

CodeSandbox: https://codesandbox.io/s/festive-bell-jn5de?file=/src/App.tsx

System information

• OS: macOs
• Version of Stitches: 0.1.0-canary.6
• Version of Node.js: v14.15.4

Additional context

My use-case for this was using Radix then using the styles of an existing component.

Example:

export const StyledButton = styled('button', BUTTON_STYLES);

// Dialog.Trigger from Radix
export const StyledTrigger = styled(Dialog.Trigger, BUTTON_STYLES);

In this example, the Dialog's Trigger and the styled Button have the same styles.

[peduarte]

Fixed in V1. Please refer to migration guide and changelog