Custom CSS units implemented with @emotion/cache as a stylis plugin

emotion-plugin-css-unit.js

import { CacheProvider } from "@emotion/react"
import createCache from "@emotion/cache"

function cssUnitPlugin(unitInPx = 8, unit = "gu") {
  const re = new RegExp("([0-9]+)" + unit, "g")
  const convert = (value) => value.replace(re, replacer)
  const replacer = (_, value) => `${value * unitInPx}px`

  return (element) => {
    if (element.type === "decl" && element.value.includes(unit)) {
      element.value = convert(element.value)
    }
  }
}

const cache = createCache({
  key: "css",
  stylisPlugins: [ cssUnitPlugin(8, "gu") ],
})

export function App({ children }) {
  return (
    <CacheProvider value={cache}>
      // …
    </CacheProvider>
  )
}