From 00b9f72fd28a11dd896b39917e6a1dd842fc6756 Mon Sep 17 00:00:00 2001
From: Ivan Banov <ivanbanov@gmail.com>
Date: Wed, 7 Jul 2021 12:13:44 +0200
Subject: [PATCH] Improve docs for emotion plugin

---
 .../getting-started/migrate-from-emotion.mdx  | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/website/pages/docs/getting-started/migrate-from-emotion.mdx b/website/pages/docs/getting-started/migrate-from-emotion.mdx
index 6c2ce932..a6e5e915 100644
--- a/website/pages/docs/getting-started/migrate-from-emotion.mdx
+++ b/website/pages/docs/getting-started/migrate-from-emotion.mdx
@@ -221,30 +221,27 @@ To avoid the `/** @jsx jsx */` you can use `@xstyled/babel-preset-emotion-css-pr
 
 You may want to use [Emotion Babel plugin](https://emotion.sh/docs/babel) for minification of styles, dead code elimination, components as selectors, and a nicer debugging experience.
 
-You have to specify xstyled inside the `importMap`:
-
 **.babelrc**
 
 ```js
 {
   ...,
-  "plugins": [
+  "presets": [
     [
-      "@emotion/babel-plugin",
+      "@xstyled/babel-preset-emotion-css-prop",
       {
-        "importMap": {
-          "@xstyled/emotion": {
-            "default": {
-              "canonicalImport": ["@emotion/styled", "default"]
-            }
-          }
-        }
+        // @emotion/babel-plugin options
+        // https://emotion.sh/docs/@emotion/babel-plugin
       }
     ]
   ]
 }
 ```
 
+Note: `importMap` has some known issues coming from Emotion side
+- [Emotion not compatible with styled.box](https://github.com/gregberge/xstyled/issues/286)
+- [CSS prop doesnt have access to the theme](https://github.com/gregberge/xstyled/issues/285)
+
 ### Difference in `css` prop usage
 
 `css` prop with `@xstyled/emotion` is slightly different from `css` prop with `@emotion/react`.