From 53007c212985b80f69842c2e385c61ea1f96df77 Mon Sep 17 00:00:00 2001
From: Evan Jacobs <ejacobs@aurorasolar.com>
Date: Thu, 9 May 2024 14:06:10 -0400
Subject: [PATCH] chore: prepare for breaking change

---
 benchmarks/package.json                       |   2 +-
 package.json                                  |   7 +-
 packages/system/package.json                  |   3 +
 .../tests/styled-components/styles.test.tsx   |   7 +-
 yarn.lock                                     | 151 +++++++++++++-----
 5 files changed, 123 insertions(+), 47 deletions(-)

diff --git a/benchmarks/package.json b/benchmarks/package.json
index 3267e931..2df802da 100644
--- a/benchmarks/package.json
+++ b/benchmarks/package.json
@@ -29,7 +29,7 @@
     "@xstyled/emotion": "workspace:*",
     "@xstyled/styled-components": "workspace:*",
     "emotion-theming": "^11.0.0",
-    "styled-components": "^5.3.6",
+    "styled-components": "^6.1.9",
     "styled-system": "^5.1.5"
   }
 }
diff --git a/package.json b/package.json
index c17d4d9f..3e4fd43e 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/react": "^18.0.21",
-    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
     "babel-jest": "^29.1.2",
@@ -33,6 +32,7 @@
     "bundlewatch": "^0.3.3",
     "codecov": "^3.8.2",
     "conventional-github-releaser": "^3.1.5",
+    "csstype": "^3.1.3",
     "esbuild": "^0.15.10",
     "eslint": "^8.24.0",
     "eslint-plugin-react": "^7.31.8",
@@ -49,7 +49,7 @@
     "rollup": "^2.79.1",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-esbuild": "^4.10.1",
-    "styled-components": "^5.3.6",
+    "styled-components": "^6.1.11",
     "typescript": "^4.8.4"
   },
   "resolutions": {
@@ -80,8 +80,5 @@
       }
     ]
   },
-  "overrides": {
-    "babel-plugin-styled-components": "2.0.2"
-  },
   "packageManager": "yarn@3.6.1"
 }
diff --git a/packages/system/package.json b/packages/system/package.json
index d36a8043..69b6caff 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -41,5 +41,8 @@
   "dependencies": {
     "@xstyled/util": "^3.7.0",
     "csstype": "^3.1.1"
+  },
+  "devDependencies": {
+    "@emotion/is-prop-valid": "^1.2.2"
   }
 }
diff --git a/packages/system/tests/styled-components/styles.test.tsx b/packages/system/tests/styled-components/styles.test.tsx
index 4db257a3..63b54e30 100644
--- a/packages/system/tests/styled-components/styles.test.tsx
+++ b/packages/system/tests/styled-components/styles.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import 'jest-styled-components'
 import '@testing-library/jest-dom/extend-expect'
+import isPropValid from '@emotion/is-prop-valid'
 import { render, cleanup } from '@testing-library/react'
 import styled from 'styled-components'
 import * as styles from '../../src'
@@ -588,10 +589,10 @@ describe('styles', () => {
         },
         styleRule: 'box-shadow',
         expectations: [
-          ['red', 'var(--x-ring-shadow,0 0 #0000),var(--x-shadow)'],
+          ['red', 'var(--x-ring-shadow, 0 0 #0000),var(--x-shadow)'],
           [
             '12px 12px 2px 1px rgba(0, 0, 255, .2)',
-            'var(--x-ring-shadow,0 0 #0000),var(--x-shadow)',
+            'var(--x-ring-shadow, 0 0 #0000),var(--x-shadow)',
           ],
         ],
       },
@@ -622,7 +623,7 @@ describe('styles', () => {
       },
     ],
   ])('#%s', (name, config) => {
-    const Dummy = styled.div`
+    const Dummy = styled.div.withConfig({ shouldForwardProp: isPropValid })`
       ${styles[(config as any).utility || name]};
     `
 
diff --git a/yarn.lock b/yarn.lock
index c8bb58c8..ca8a04b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1913,6 +1913,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:1.2.2, @emotion/is-prop-valid@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@emotion/is-prop-valid@npm:1.2.2"
+  dependencies:
+    "@emotion/memoize": ^0.8.1
+  checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.1":
   version: 1.2.1
   resolution: "@emotion/is-prop-valid@npm:1.2.1"
@@ -2018,6 +2027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/unitless@npm:0.8.1, @emotion/unitless@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/unitless@npm:0.8.1"
+  checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
+  languageName: node
+  linkType: hard
+
 "@emotion/unitless@npm:^0.7.4":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
@@ -2025,13 +2041,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.8.1":
-  version: 0.8.1
-  resolution: "@emotion/unitless@npm:0.8.1"
-  checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
-  languageName: node
-  linkType: hard
-
 "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1":
   version: 1.0.1
   resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1"
@@ -5453,16 +5462,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hoist-non-react-statics@npm:*":
-  version: 3.3.1
-  resolution: "@types/hoist-non-react-statics@npm:3.3.1"
-  dependencies:
-    "@types/react": "*"
-    hoist-non-react-statics: ^3.3.0
-  checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719
-  languageName: node
-  linkType: hard
-
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -5727,7 +5726,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.21":
+"@types/react@npm:*, @types/react@npm:>=16":
   version: 18.2.15
   resolution: "@types/react@npm:18.2.15"
   dependencies:
@@ -5738,6 +5737,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^18.0.21":
+  version: 18.3.1
+  resolution: "@types/react@npm:18.3.1"
+  dependencies:
+    "@types/prop-types": "*"
+    csstype: ^3.0.2
+  checksum: 9224ef319a0c2b7f66e7e7f06012aa5eb638a6c76c9742843eab1a5d243f2bed5ff829ddbb41efd60d33a266420528adfcb84cb93f238b00e905f98c3a355768
+  languageName: node
+  linkType: hard
+
 "@types/responselike@npm:^1.0.0":
   version: 1.0.0
   resolution: "@types/responselike@npm:1.0.0"
@@ -5842,14 +5851,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/styled-components@npm:^5.1.26":
-  version: 5.1.26
-  resolution: "@types/styled-components@npm:5.1.26"
-  dependencies:
-    "@types/hoist-non-react-statics": "*"
-    "@types/react": "*"
-    csstype: ^3.0.2
-  checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76
+"@types/stylis@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf
   languageName: node
   linkType: hard
 
@@ -6351,15 +6356,15 @@ __metadata:
     "@emotion/core": ^11.0.0
     "@emotion/react": ^11.10.4
     "@emotion/styled": ^11.10.4
-    "@xstyled/emotion": ^3.8.1
-    "@xstyled/styled-components": ^3.8.1
+    "@xstyled/emotion": "workspace:*"
+    "@xstyled/styled-components": "workspace:*"
     babel-loader: ^8.2.5
     benchmark: ^2.1.4
     emotion-theming: ^11.0.0
     html-webpack-plugin: ^5.5.0
     react: ^18.2.0
     react-dom: ^18.2.0
-    styled-components: ^5.3.6
+    styled-components: ^6.1.9
     styled-system: ^5.1.5
     webpack: ^5.74.0
     webpack-cli: ^4.10.0
@@ -6376,7 +6381,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@xstyled/emotion@^3.8.1, @xstyled/emotion@workspace:packages/emotion":
+"@xstyled/emotion@workspace:*, @xstyled/emotion@workspace:packages/emotion":
   version: 0.0.0-use.local
   resolution: "@xstyled/emotion@workspace:packages/emotion"
   dependencies:
@@ -6397,15 +6402,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@xstyled/styled-components@^3.6.0, @xstyled/styled-components@^3.8.1, @xstyled/styled-components@workspace:packages/styled-components":
+"@xstyled/styled-components@^3.6.0, @xstyled/styled-components@workspace:*, @xstyled/styled-components@workspace:packages/styled-components":
   version: 0.0.0-use.local
   resolution: "@xstyled/styled-components@workspace:packages/styled-components"
   dependencies:
+    "@emotion/is-prop-valid": ^1.2.2
     "@xstyled/core": ^3.8.1
     "@xstyled/system": ^3.8.1
     "@xstyled/util": ^3.7.0
   peerDependencies:
-    styled-components: ^4.0.0 || ^5.0.0
+    styled-components: ^6.1.11
   languageName: unknown
   linkType: soft
 
@@ -6413,6 +6419,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@xstyled/system@workspace:packages/system"
   dependencies:
+    "@emotion/is-prop-valid": ^1.2.2
     "@xstyled/util": ^3.7.0
     csstype: ^3.1.1
   languageName: unknown
@@ -9420,7 +9427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:^3.0.0":
+"css-to-react-native@npm:3.2.0, css-to-react-native@npm:^3.0.0":
   version: 3.2.0
   resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
@@ -9564,6 +9571,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:3.1.3, csstype@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2, csstype@npm:^3.1.1":
   version: 3.1.2
   resolution: "csstype@npm:3.1.2"
@@ -13714,7 +13728,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -17969,6 +17983,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "nanoid@npm:3.3.7"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2
+  languageName: node
+  linkType: hard
+
 "napi-build-utils@npm:^1.0.1":
   version: 1.0.2
   resolution: "napi-build-utils@npm:1.0.2"
@@ -19830,6 +19853,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: ^3.3.7
+    picocolors: ^1.0.0
+    source-map-js: ^1.2.0
+  checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.2.15, postcss@npm:^8.2.9, postcss@npm:^8.3.11":
   version: 8.4.27
   resolution: "postcss@npm:8.4.27"
@@ -21220,7 +21254,6 @@ __metadata:
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^13.4.0
     "@types/react": ^18.0.21
-    "@types/styled-components": ^5.1.26
     "@typescript-eslint/eslint-plugin": ^5.39.0
     "@typescript-eslint/parser": ^5.39.0
     babel-jest: ^29.1.2
@@ -21228,6 +21261,7 @@ __metadata:
     bundlewatch: ^0.3.3
     codecov: ^3.8.2
     conventional-github-releaser: ^3.1.5
+    csstype: ^3.1.3
     esbuild: ^0.15.10
     eslint: ^8.24.0
     eslint-plugin-react: ^7.31.8
@@ -21244,7 +21278,7 @@ __metadata:
     rollup: ^2.79.1
     rollup-plugin-dts: ^4.2.2
     rollup-plugin-esbuild: ^4.10.1
-    styled-components: ^5.3.6
+    styled-components: ^6.1.11
     typescript: ^4.8.4
   languageName: unknown
   linkType: soft
@@ -21618,7 +21652,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.1.0":
+"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -21956,6 +21990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97
+  languageName: node
+  linkType: hard
+
 "source-map-support@npm:0.5.13":
   version: 0.5.13
   resolution: "source-map-support@npm:0.5.13"
@@ -22570,7 +22611,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.2.3, styled-components@npm:^5.3.6":
+"styled-components@npm:^5.2.3":
   version: 5.3.11
   resolution: "styled-components@npm:5.3.11"
   dependencies:
@@ -22592,6 +22633,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styled-components@npm:^6.1.11, styled-components@npm:^6.1.9":
+  version: 6.1.11
+  resolution: "styled-components@npm:6.1.11"
+  dependencies:
+    "@emotion/is-prop-valid": 1.2.2
+    "@emotion/unitless": 0.8.1
+    "@types/stylis": 4.2.5
+    css-to-react-native: 3.2.0
+    csstype: 3.1.3
+    postcss: 8.4.38
+    shallowequal: 1.1.0
+    stylis: 4.3.2
+    tslib: 2.6.2
+  peerDependencies:
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: 18fb43fe49b61c7b5d3b6c6bd6fd315c7f83310916b52e7b788286064f6586d3211d40528d9413b4f812c6ff806ae25976f7e400f9b125a8f7ea653b39f155c8
+  languageName: node
+  linkType: hard
+
 "styled-system@npm:^5.1.5":
   version: 5.1.5
   resolution: "styled-system@npm:5.1.5"
@@ -22632,6 +22693,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.3.2":
+  version: 4.3.2
+  resolution: "stylis@npm:4.3.2"
+  checksum: 0faa8a97ff38369f47354376cd9f0def9bf12846da54c28c5987f64aaf67dcb6f00dce88a8632013bfb823b2c4d1d62a44f4ac20363a3505a7ab4e21b70179fc
+  languageName: node
+  linkType: hard
+
 "sudo-prompt@npm:^8.2.0":
   version: 8.2.5
   resolution: "sudo-prompt@npm:8.2.5"
@@ -23110,6 +23178,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.6.2":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.10.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"