import createCache from "@emotion/cache";
import rtlPlugin from "@mui/stylis-plugin-rtl";

// Emotion compiles styles with its own bundled stylis (4.2); running the standalone
// stylis 4.4 `prefixer` over those foreign AST nodes crashes in lift() on
// ::placeholder/:read-only rules because 4.2 elements carry no `siblings` field.
// The RTL cache therefore only runs the direction-flipping plugin; vendor prefixing
// is left out, which modern mobile browsers no longer need.
const externalLtrCache = createCache({ key: "external-ltr", prepend: true });
const externalRtlCache = createCache({ key: "external-rtl", prepend: true, stylisPlugins: [rtlPlugin] });

export function externalEmotionCache(direction) {
  return direction === "rtl" ? externalRtlCache : externalLtrCache;
}
