feat(emotion): add importMap to the babel plugin (#293)

styled-components · Jul 8, 2021 · 657f7fe · 657f7fe
1 parent 46145a6
commit 657f7fe
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/packages/babel-preset-emotion-css-prop/src/index.ts b/packages/babel-preset-emotion-css-prop/src/index.ts
@@ -19,6 +19,7 @@ export default (
     sourceMap,
     autoLabel,
     labelFormat,
+    importMap,
     instances = [],
     ...options
   } = {},
@@ -40,6 +41,7 @@ export default (
           sourceMap,
           autoLabel,
           labelFormat,
+          importMap,
           instances: ['@xstyled/emotion', ...instances],
           cssPropOptimization: true,
         },

diff --git 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`.