xstyled icon indicating copy to clipboard operation
xstyled copied to clipboard

Can't import createCss from @xstyled/emotion

Open maxmedina05 opened this issue 3 years ago • 4 comments

🐛 Bug Report

I was trying to follow the documentation on how to add a new utility. I noticed I can't import createCss from @xstyled/emotion. As described in the documentation. I also noticed that createCss is not being exported from index.ts See here

When I try I get the following error:

image

I also tried to export this function from the index file but then I get another error

image

To Reproduce

  1. create a xstyled.config.js
  2. import createCss from '@xstyled/emotion'
  3. Check browser console

Expected behavior

It should be able to import this function as stated in the documentation

Link to repl or repo (highly encouraged)

Check it here: https://stackblitz.com/edit/react-sncouj?file=src/xstyled.config.js

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 11.5.1
 - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 - Memory: 126.09 MB / 16.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 14.12.0 - ~/.nvm/versions/node/v14.12.0/bin/node
 - Yarn: 1.22.10 - ~/.nvm/versions/node/v14.12.0/bin/yarn
 - npm: 7.12.1 - ~/.nvm/versions/node/v14.12.0/bin/npm

maxmedina05 avatar Aug 10 '21 08:08 maxmedina05

@maxmedina05 The createCss export is further down in that file:

https://github.com/gregberge/xstyled/blob/250d21f6c033e8f304dafd5b622007c3dcf24453/packages/emotion/src/index.ts#L19

(I wasn't able to make the stackblitz thing do anything. I've never used stackblitz so I don't know what was wrong.)

Is this still a problem for you?

agriffis avatar Aug 24 '21 16:08 agriffis

I'm sorry, that's an import not an export :man_facepalming:

I see you're right, it's exported in styled-components here:

https://github.com/gregberge/xstyled/blob/250d21f6c033e8f304dafd5b622007c3dcf24453/packages/styled-components/src/index.ts#L16

Did you get anywhere debugging your attempt to export it?

agriffis avatar Aug 24 '21 16:08 agriffis

I'm sorry, that's an import not an export 🤦‍♂️

I see you're right, it's exported in styled-components here:

https://github.com/gregberge/xstyled/blob/250d21f6c033e8f304dafd5b622007c3dcf24453/packages/styled-components/src/index.ts#L16

Did you get anywhere debugging your attempt to export it?

It is still a problem to me. I wasn't able to get anywhere by debugging. When I export I get the error I get above.

maxmedina05 avatar Aug 25 '21 07:08 maxmedina05

I tried to edit directly the index.esm.js and index.js inside node_modules/@xstyled/emotion and it worked without the issue above. Isn't the issue caused by linking the package locally (for example with yarn link) or something similar?

AlfonzAlfonz avatar Oct 17 '21 21:10 AlfonzAlfonz