npm package with design-system built upon theme-ui does not inherit styles and props

Describe the bug I started building a design-system with theme-ui as a basis (https://www.npmjs.com/package/prestyled - yarn add prestyled). The codebase is in typescript and is compiled and packaged with tsdx. When I use the components in the styleguide or import them locally they work as expected. If I import them from the published lib, the styles(sheets) are not attached correctly (e.g. default variants not respected), although the context provider has the correct theme values and the CSS variables are present in the document. If I set props (e.g. variant) to the components that get passed down to the composed theme-ui components, these have not the desired effect. Exempt from this issue is only the sx prop, which works as expected.

I am not sure if this issue is caused by my transpiling setup or something in theme-ui, please have a look at the links to the code below, maybe you can help me!

To Reproduce Steps to reproduce the behavior:

1. Go to https://pixelmord.de/prestyled/#/Components?id=landingpagesection and see the styleguide with correct styles applied, for example <LandingPageSection variant="primary" />
2. Inspect the basic definition for the variant here in the compiled JS: https://github.com/pixelmord/prestyled/blob/master/dist/prestyled.cjs.development.js#L263
3. Inspect the component implementation in the compiled JS here: https://github.com/pixelmord/prestyled/blob/master/dist/prestyled.cjs.development.js#L1084
4. Source: https://github.com/pixelmord/prestyled/blob/master/src/components/LandingPageSection/LandingPageSection.tsx
5. If you want to reproduce the problem in a runnable project, check out my personal website from the branch where I am refactoring to theme-ui and nextJS https://github.com/pixelmord/pixelmord.github.com/tree/refactor-nextjs, yarn install and yarn dev
6. If you inspect the section container on the homepage that holds the headline “latest articles” you can see that the primary color is not set as background per definition in the theme

Expected behavior The transpiled code should work the same way as the source

[zeorin]

I should note that I’m transpiling my component library using the prepare life-cycle script:

    "prepare": "yarn clean && babel src --out-dir dist && flow-copy-source src dist",

This means that updating @babel/core on the consuming package worked. If you’re transpiling when you’re publishing, you may have to update @babel/core in the component library package itself.

[pixelmord]

@zeorin Thanks! Updating @babel/core did it for me as well! Since I also ran into another issue with mixed versions of peer deps (regarding mdx) I want to mention that “debugging” the potential conflicting versions with e.g. yarn list --pattern babel/core helped to set up the correct resolution entries. @lachlanjc I totally feel you, I was on the verge of giving up already a couple of times! These issues with compiling and npm dep mess can really get to you and kill all your productivity 😦