Support React Compiler for CSS jsx prop

[laem]

React 19 introduces the React Compiler, which does useMemo optimizations to make React applications faster automatically.

It appears that next-yak's css prop does not work well with react compiler.

See these comments.

[jantimon]

I took a closer look at the experimental react compiler integration

The React Compiler in Next.js works through the babel-plugin-react-compiler Babel plugin that needs to be the first tool to process your code: https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler

The babel-plugin-react-compiler runs directly inside the babel-loader before the swc-loader (webpack loaders are executed in reverse order):

https://github.com/vercel/next.js/blob/a471b1fcac2ba2bc6d89bfa1fb947891859dbc9a/packages/next/src/build/webpack-config.ts#L568-L570

That means the following code:

import { css } from "next-yak";
import { useSize } from "./useSize";

export const Example = () => {
  const size = useSize();

  return (
    <span
      data-size={size}
      css={css`
        color: red;
      `}
    >
      Hello World
    </span>
  );
};

gets compiled by babel to:

import { c as _c } from "react/compiler-runtime";
import { css } from "next-yak";
import { useSize } from "./useSize";
export const Example = () => {
  const $ = _c(3);
  const size = useSize();
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = css`
        color: red;
      `;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  let t1;
  if ($[1] !== size) {
    t1 = <span data-size={size} css={t0}>Hello World</span>;
    $[1] = size;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  return t1;
};

And next yak now has to try to make sense of this code:

 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = css`
        color: red;
      `;
    $[0] = t0;
}

You can probably imagine that this is a very very difficult task for next-yak so we won't be able to support it

But maybe @kdy1 might at some point (maybe once the react compiler is stable) ship a SWC version of the react compiler and run it right before the JSX is transformed