From 0404da6c84fc5b13ebb5828adf0e7795efaef1b6 Mon Sep 17 00:00:00 2001
From: Ben Rogerson <info@benrogerson.dev>
Date: Tue, 25 Jul 2023 17:49:59 +0930
Subject: [PATCH] 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 | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/core/lib/twinConfig.ts b/src/core/lib/twinConfig.ts
index c4db82a..7648713 100644
--- a/src/core/lib/twinConfig.ts
+++ b/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,6 +52,7 @@ const configDefaultsStitches = {
 
 function configDefaultsTwin({
   isSolid,
+  isStyledComponents,
   isGoober,
   isStitches,
   isDev,
@@ -54,6 +60,7 @@ function configDefaultsTwin({
   return {
     ...TWIN_CONFIG_DEFAULTS,
     ...(isSolid && configDefaultsSolid),
+    ...(isStyledComponents && configDefaultsStyledComponents),
     ...(isGoober && configDefaultsGoober),
     ...(isStitches && configDefaultsStitches),
     dataTwProp: isDev,