Add support for styled-components v6 (#818)

This PR adds support for styled-components v6 by setting the
`sassyPseudo` option to true for the styled-components preset.
Prefixing selectors like hover with an ampersand (eg: `&:hover`) were
made a requirement in the latest version.

Another change is that when using styled, all props will be added to the
element and you'll likely see a console warning. This isn't handled by
twin so we'll need to use [transient
props](https://styled-components.com/docs/api#transient-props) to get
around that.

Related #805

src/core/lib/twinConfig.ts

@@ -25,6 +25,11 @@ const TWIN_CONFIG_DEFAULTS = {
 } as const
 
 // Defaults for different css-in-js libraries
+
+const configDefaultsStyledComponents = {
+  sassyPseudo: true, // Sets selectors like hover to &:hover
+} as const
+
 const configDefaultsGoober = {
   sassyPseudo: true, // Sets selectors like hover to &:hover
 } as const
@@ -47,13 +52,15 @@ const configDefaultsStitches = {
 
 function configDefaultsTwin({
   isSolid,
+  isStyledComponents,
   isGoober,
   isStitches,
   isDev,
 }: GetPackageUsed & { isDev: boolean }): TwinConfigAll {
   return {
     ...TWIN_CONFIG_DEFAULTS,
     ...(isSolid && configDefaultsSolid),
+    ...(isStyledComponents && configDefaultsStyledComponents),
     ...(isGoober && configDefaultsGoober),
     ...(isStitches && configDefaultsStitches),
     dataTwProp: isDev,