Re-introducing @emotion/react [Summary Issue]

[sebald]

Description

Last year we switched from @emotion/react(back then it was @emotion/core) to the framework agnostic @emotion/css. One of the main reasons for this was that we wanted to use className and hooks for styling instead of using the css prop.

Using the css prop came with some issue, like leaking the css prop to every single component, which was not our intention. Just to name one.

Context

The reason we want to switch back is that we ran into multiple issues implementing global styles and the order in which styles are applied (see
#1197 #1317 and #1372). Especially the later one will could always lead to problems in the future.

Thus, the decision to use @emtoion/react again. The hope is that we have better control over style ordering (emotion currently only has a "prepend" option for the cache, there is no way to insert at a specific order, see also emotion-js/emotion#2037) and can remove custom implementations like the @marigold/server.

Consequences

We have to reimplement all the features of the current styling solution. Meaning:

• A Component that acts as base for styling with the following features:
  • renders an arbitrary HTML element (via as prop -> polymorphic component)
  • passes down all props to the rendered element (expect styling props)
  • adds normalization based on given element
  • accepts a style objects (via css prop) that will generated styles
  • interpolates style values based on theme (with the help of theme-ui)
  • accepts variants (via variants prop)
  • respects the weighting of styles (normalization < variants < css prop)
  • normalization can only be applied once and must not override variants/css prop styles (see #1372 for an example)
• Provider to pass theme and other configurations
  • accepts a theme based on current specification
• SSR render styles
• Allow to add global styles (html, body via theme.root)
  • apply global styles
• Change Marigold Documentation files (replace useClassname/useStyles hooks)
  • rewrite Guide useStyles
  • rewrite Box Primitive
  • rewrite Theme & Variants

[ti10le]

First PR (#1436) is for this points in: 'A Component that acts as base for styling with the following features'

Next step after merging first PR:

• @sebald I think the next step is to use Element in Box and change every usage of useClassname & useStyles to Element or Box with css prop. Do you agree?

---

Following steps:

• Provider: I think we have the functionality to pass theme but have to add the GlobalStyles functionality in it
• add GlobalStyles almost the same as like in this branch: global-css-with-seperate-caches

[sebald]

@ti10le close? :)

[ti10le]

@sebald noo GlobalStyles and rewrite of some docs guidelines missing