remove property when it is used as variant

[seeden]

This feature is little bit connected with #69

Here is small example

const Test = styled(Box)`
  ${variant({
      key: 'container',
      default: 'md',
      prop: 'size',
  }))
`;

Theme

  ....
  sizes:  {
    sm: 540,
    md: 720,
    lg: 960,
    xl: 1140,
    xs: 30,
  },
  container: {
   sm: css`
    width: 320px;
  `
  }
  ...

When you render It will render with size property but also it will try to use size property inside Box and it will create another css and override width 320px with width: 540 and height 540px as well.

Can you remove property when it is used as variant and do not forward it to extended component?

[seeden]

maybe it is related to styled-components/styled-components#3006

[gregberge]

forwardedProps are the business of styled-components, not xstyled.

For size you have a solution, create your own Box component without size: https://xstyled.dev/docs/style-using-props/#avoid-undesired-props