Merge pull request #2043 from system-ui/remove-emotion-styled-2

Remove @emotion/styled usage

Author: hasparus

MIGRATING.md

@@ -1,5 +1,17 @@
 # Migration Guides
 
+## v0.14
+
+- `theme-ui`, `@theme-ui/components` and `@theme-ui/mdx` packages no longer
+  depend on `@emotion/styled`.
+
+- Previously deprecated `Component.withComponent` API was removed.
+
+- `as` prop was removed from Themed.X components from `@theme-ui/mdx`.
+
+  - All occurences of `<Themed.X as="element">` can be changed to
+    `<element sx={t => t.styles.X} />`.
+
 ## v0.13
 
 **Moved Emotion and `@mdx-js/react` to peerDependencies to solve context

examples/gatsby-plugin/package.json

@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "gatsby": "^4.7.2",

examples/gatsby/package.json

@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "gatsby": "^4.7.2",

examples/next/package.json

@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@next/mdx": "^12.0.7",

jest.config.js

@@ -17,6 +17,7 @@ const config = {
     '/style-guide/',
     'tailwind.config.js',
     '/dist/',
+    '/__test-utils__/',
   ],
   coverageReporters: ['lcov', 'text', 'html'],
   collectCoverageFrom: [

package.json

@@ -13,6 +13,7 @@
     "typecheck:tests": "tsc --noEmit -P ./tsconfig.test.json",
     "logo": "yarn workspace docs logo",
     "postinstall": "preconstruct dev",
+    "dev": "preconstruct dev",
     "version:bump": "lerna version",
     "version:bump-next": "lerna version prerelease --preid alpha --exact",
     "release": "yarn clean && yarn build && yarn shipit",

packages/components/README.md

@@ -6,7 +6,7 @@ Primitive layout, typographic, and other components for use with Theme UI.
 separate installation is not required._
 
 ```sh
-npm i @theme-ui/components @emotion/react @emotion/styled
+npm i @theme-ui/components @emotion/react
 ```
 
 https://theme-ui.com/components