styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 106 forks source link

Can't import createCss from @xstyled/emotion #295

Open maxmedina05 opened 3 years ago

maxmedina05 commented 3 years ago

🐛 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
agriffis commented 3 years ago

@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 commented 3 years ago

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?

maxmedina05 commented 3 years ago

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.

AlfonzAlfonz commented 2 years ago

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?