chore: prepare for breaking change

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"
   }
 }

package.json

@@ -25,14 +25,14 @@
     "@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",
     "browser-resolve": "^2.0.0",
     "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": "[email protected]"
 }

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"
   }
 }

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]};
     `