styled-components / xstyled

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

Export `XStyled` interface to resolve build errors in pnpm monorepos #372

Closed nerdyman closed 1 year ago

nerdyman commented 2 years ago

Now this is a story all about how my life got flipped turned upside down, and I'd like to take a minute just sit right, there, I'll tell you how I fixed this nasty TypeScript error.

Summary

I have a pnpm monorepo set up using xstyled for its UI kit components, but it doesn't build and fails on the following error:

src/xstyled.config.ts(27,43): error TS4023: 
Exported variable 'styled' has or is using name 'XStyled' from external module "node_modules/.pnpm/@xstyled+styled-components@3.6.0_styled-components@5.3.5/node_modules/@xstyled/styled-components/dist/index" 
but cannot be named.

After doing a bit of digging I found that XStyled is defined in the index.d.ts for @xstyled/emotion and @xstyled/styled-components, but it's not exported which breaks the UI kit build during the generation of d.ts files.

This PR adds XStyled (and BoxStyledTags) as an export for @xstyled/emotion and @xstyled/styled-components. There aren't any runtime code changes, it's just exporting already defined types.

Test plan

I've run through the build steps of the contrib guide and works as expected. I've also got an example repo using the builds from my fork and they work ok too.

https://github.com/nerdyman/xstyled-pnpm-monorepo-ts2742

Hopefully this is up to scratch 🙏

yahor-ramanenka-op commented 1 year ago

@nerdyman please check #392 it should resolve the issue