theme-ui: EmotionContext version mismatch can break `styled.div(css({...`

Describe the bug

The theme references in the import { css } from 'theme-ui' function don’t work on version v0.5.0-alpha.0

It still works in the theme styles, variants, and sx prop.

To Reproduce

Upgrade Theme UI to v0.5.0-alpha.0
Upgrade Emotion to v11
Rename the emotion package names in you codebase
Use the css function from theme-ui in an emotion component

export const StyledHeader = styled.div(
  css({
    // doesn't work
    color: 'primary',
    bg: 'background',
    zIndex: 'nav',
    maxWidth: 'sidebar',
    borderRadius: 'small',

    // works
    px: 4,
  })
)

This code outputs

.StyledHeader {
  color: primary;
  background-color: background;
  z-index: nav;
  max-width: sidebar;
  border-radius: small;
  padding-left: 32px;
  padding-right: 32px;
}

Expected behavior Should output something like

.StyledHeader {
  color: var(--theme-ui-colors-primary, #000000);
  background-color: var(--theme-ui-colors-background, #ffffff);
  z-index: 10;
  max-width: 350px;
  border-radius: 4px;
  padding-left: 32px;
  padding-right: 32px;
}

Screenshots Shot_0 2

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (10 by maintainers)

Most upvoted comments

I assumed it’s just keyframes, Global, and styled? I might have missed something.

I think you are right atm, not sure 100%, but who knows in he future. In any case I usually prefer transparent vs ease-of-use in the case of developers as users, assuming they can handle a few more steps. Maybe a good candidate for your polls 😃

atanasster on Nov 24, 2020

Ignoring it isn’t so bad. People usually believe it’s their fault, because they didn’t “install properly”, but I think it’s a design flaw on our part. It’s too easy to break in userland.

Another idea:

We’re importing @emotion/react package.json to pass their version as EMOTION_VERSION through context. We could print a huge warning that something went wrong if the version we import doesn’t match (by semver) the version we depend on. Then, after we’ve shown a “disclaimer”, the responsibility is on the user.

I’m not a huge fan of this solution, but it might be practical.

hasparus on Nov 24, 2020

Thanks for the issue, @fcisio! I really appreciate you taking the time instead of writing “fools, the most important feature of Theme UI doesn’t work” 😄

hasparus on Nov 24, 2020