Using @emotion/react

[TranquilMarmot]

I want to try using @emotion/react with Fresh but I'm not sure that it's entirely possible.

I tried adding this in my import_map.json:

"@emotion/react": "https://esm.sh/@emotion/[email protected]",
"@emotion/react/": "https://esm.sh/@emotion/[email protected]/"

Then, in deno.json, I set this under compilerOptions:

"jsxImportSource": "@emotion/react"

This results in the following error:

error: Uncaught (in promise) TypeError: Import 'https://esm.sh/@emotion/[email protected]/jsx-runtime' failed: 500 Internal Server Error
    at file:///home/nate/fresh-test/routes/index.tsx:1:1
  await import(entrypoint);
  ^
    at async dev (https://deno.land/x/[email protected]/src/dev/mod.ts:187:3)
    at async file:///home/nate/fresh-test/dev.ts:5:1

Which is kind of a weird error since https://esm.sh/@emotion/[email protected]/jsx-runtime definitely exists. Maybe I'm mis-understanding how the imports/esm works?

Some other notes:

• This probably needs to use preact-compat; see this discussion for some details
• Emotion also has some pretty intense SSR steps that might be interesting to try with Fresh... but that's a whole project 😄

[TranquilMarmot]

Alright, giving this another shot I got it working even with server-side rendering!

Kind of a mess, though 😅

Here's my import_map.json

{
  "imports": {
    "$fresh/": "https://deno.land/x/[email protected]/",
    "react": "https://esm.sh/[email protected]/compat",
    "react/": "https://esm.sh/[email protected]/compat/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "preact-render-to-string": "https://esm.sh/*[email protected]",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
    "@emotion/react": "https://esm.sh/*@emotion/[email protected]",
    "@emotion/react/": "https://esm.sh/*@emotion/[email protected]/",
    "@emotion/cache": "https://esm.sh/@emotion/[email protected]",
    "@emotion/serialize": "https://esm.sh/@emotion/[email protected]",
    "@emotion/use-insertion-effect-with-fallbacks": "https://esm.sh/@emotion/[email protected]",
    "@emotion/utils": "https://esm.sh/@emotion/[email protected]",
    "@emotion/weak-memoize": "https://esm.sh/@emotion/[email protected]",
    "hoist-non-react-statics": "https://esm.sh/*[email protected]",
    "react-is": "https://esm.sh/*[email protected]",
    "@babel/runtime/": "https://esm.sh/@babel/[email protected]/"
  }
}

The * in the esm.sh import for i.e. @emotion/react tells it that all of the dependencies for that package are external. This allows us to specify react as actually pointing to @preact/compat which is needed to @emotion/react to run.

Then, in deno.json, I just had to set jsxImportSource to @emotion/react.

The only thing that's still broken is JSX typescript types now... since @emotion/react augments things like JSX.Element to add a css prop, things get lost in translation and all types for JSX stop working.

[TranquilMarmot]

It also seems like with this approach, any changes to styles inside of an island after it already renders will not work properly. Only one compiled <style> tag is sent from the server.

For example,

import { useState } from "preact/hooks";
import { Button } from "../components/Button.tsx";

interface CounterProps {
  start: number;
}

export default function Counter(props: CounterProps) {
  const [count, setCount] = useState(props.start);
  return (
    <div
      css={{
        backgroundColor: count === 0 ? "red" : "blue",
      }}
    >
      <p>{count}</p>
      <Button onClick={() => setCount(count - 1)}>-1</Button>
      <Button onClick={() => setCount(count + 1)}>+1</Button>
    </div>
  );
}

This will initially render with the correct background color set. When the count changes, so does its class and the server does not send along the new class in the inserted styles.