How does the importMap works?

[maxmedina05]

I've been trying to integrate the emotion babel plugin with xstyled. But I'm not sure how it works. What "styledBaseImport" for?

I've made an issue for xstyled but I think its more of an emotion thing because the documentation for importMap is not very clear.

I can make it partially work with the .babelrc below but it throws a warning when I use xstyled styled.box and it doesn't add labels to xstyled's

Sandbox if anyone wants to test sandbox

  "plugins": [
    [
      "@emotion/babel-plugin",
      {
        "importMap": {
          "@xstyled/emotion": {
            "default": {
              "canonicalImport": ["@emotion/styled", "default"]
            }
          }
        }
      }
    ]
  ]

Error:

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[maxmedina05]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

yes, thank you for that I added it now. https://codesandbox.io/s/thirsty-margulis-z1qfj?file=/pages/search.tsx

[Andarist]

Unfortunately, I don't see any error there - the console is clear and the browser tab renders just fine.

[maxmedina05]

Unfortunately, I don't see any error there - the console is clear and the browser tab renders just fine.

On my local environment I get this errors always. On the codesandbox, I only get this error after I make some changes on a styled component using styled.box.

Error message from codesandbox:

The issue is that "box" is not being transform as you can see here:

@Andarist Do you have any working example on this "importmap" different to the one on the documentaiton?

[Andarist]

@Andarist Do you have any working example on this "importmap" different to the one on the documentation?

You can check out our test files.

[Andarist]

I still couldn't reproduce this on codesandbox, nor after downloading & running this on my machine. However, I've inspected the transpiled code and it makes sense that you are seeing this error:

var StyledSearch = Object(_xstyled_emotion__WEBPACK_IMPORTED_MODULE_1__["default"])("box", false ? undefined : {
  target: "e1d7qjjd0",
  label: "StyledSearch"
})(false ? undefined : {
  name: "1hcx8jb",
  styles: "padding:0",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9tYXRldXN6YnVyenluc2tpL0Rvd25sb2Fkcy9ldWVtOC9wYWdlcy9zZWFyY2gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdxQiIsImZpbGUiOiIvVXNlcnMvbWF0ZXVzemJ1cnp5bnNraS9Eb3dubG9hZHMvZXVlbTgvcGFnZXMvc2VhcmNoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vIGltcG9ydCB7IEZDIH0gZnJvbSBcInJlYWN0XCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQHhzdHlsZWQvZW1vdGlvbidcclxuXHJcbmNvbnN0IFN0eWxlZFNlYXJjaCA9IHN0eWxlZC5ib3goe1xyXG5cdHBhZGRpbmc6ICcwJyxcclxufSlcclxuXHJcbmNvbnN0IFNlYXJjaCA9ICgpID0+IHtcclxuXHRkZWJ1Z2dlclxyXG5cdHJldHVybiAoXHJcblx0XHQ8U3R5bGVkU2VhcmNoPlxyXG5cdFx0XHQ8aW5wdXQgdHlwZT1cInNlYXJjaFwiIGRlZmF1bHRWYWx1ZT1cImthcHBhXCIgLz5cclxuXHRcdDwvU3R5bGVkU2VhcmNoPlxyXG5cdClcclxufVxyXG5cclxuZXhwb3J0IGRlZmF1bHQgU2VhcmNoXHJcbiJdfQ== */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

As you might notice "box" gets passed to the styled call as an argument. This makes sense from our perspective as lower-cased components are always considered to be host components (this is a JSX rule). We could technically leave this call as-is when styledBaseImport stays undefined and that should fix your issue. I would be open for giving this a deeper thought if you would prepare a PR for this as I won't have the time capacity to handle this myself.

[maxmedina05]

I still couldn't reproduce this on codesandbox, nor after downloading & running this on my machine. However, I've inspected the transpiled code and it makes sense that you are seeing this error:

var StyledSearch = Object(_xstyled_emotion__WEBPACK_IMPORTED_MODULE_1__["default"])("box", false ? undefined : {
  target: "e1d7qjjd0",
  label: "StyledSearch"
})(false ? undefined : {
  name: "1hcx8jb",
  styles: "padding:0",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9tYXRldXN6YnVyenluc2tpL0Rvd25sb2Fkcy9ldWVtOC9wYWdlcy9zZWFyY2gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdxQiIsImZpbGUiOiIvVXNlcnMvbWF0ZXVzemJ1cnp5bnNraS9Eb3dubG9hZHMvZXVlbTgvcGFnZXMvc2VhcmNoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vIGltcG9ydCB7IEZDIH0gZnJvbSBcInJlYWN0XCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQHhzdHlsZWQvZW1vdGlvbidcclxuXHJcbmNvbnN0IFN0eWxlZFNlYXJjaCA9IHN0eWxlZC5ib3goe1xyXG5cdHBhZGRpbmc6ICcwJyxcclxufSlcclxuXHJcbmNvbnN0IFNlYXJjaCA9ICgpID0+IHtcclxuXHRkZWJ1Z2dlclxyXG5cdHJldHVybiAoXHJcblx0XHQ8U3R5bGVkU2VhcmNoPlxyXG5cdFx0XHQ8aW5wdXQgdHlwZT1cInNlYXJjaFwiIGRlZmF1bHRWYWx1ZT1cImthcHBhXCIgLz5cclxuXHRcdDwvU3R5bGVkU2VhcmNoPlxyXG5cdClcclxufVxyXG5cclxuZXhwb3J0IGRlZmF1bHQgU2VhcmNoXHJcbiJdfQ== */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

As you might notice "box" gets passed to the styled call as an argument. This makes sense from our perspective as lower-cased components are always considered to be host components (this is a JSX rule). We could technically leave this call as-is when styledBaseImport stays undefined and that should fix your issue. I would be open for giving this a deeper thought if you would prepare a PR for this as I won't have the time capacity to handle this myself.

@Andarist I can prepare the PR