PlasmoでMUIとTailwindCSSを共存させる

ブラウザ拡張機能を作れるReactフレームワークPlasmoにて、MUIとTailwindCSSを共存させる方法が調べてもどこにもなかったのでここに残しておく。

plasmo公式のTailwindCSSスタートガイドを参照すると、以下のようなstyle要素を返すメソッドを定義する記述がある。
TailwindCSS単体であればこれで十分だが、MUIを併用させるためにはこれだけでは不十分。

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

MUIを使用するためには、以下のような記述が必要になる。

const styleElement = document.createElement("style")

const styleCache = createCache({
  key: "plasmo-mui-cache",
  prepend: true,
  container: styleElement
});

export const getStyle = () => styleElement;

const MuiThemedContent = () => (
  <CacheProvider value={styleCache}>
    {...children}
  </CacheProvider>
);

Plasmoでこれら両方を使うためには、getStyleで返すstyle要素にMUIのものとTailwindCSSのもの2つをマージしたものを返す必要がある。そのため、以下のように記述する。

import cssText from "data-text:~style.css";
const styleElement = document.createElement("style")

const styleCache = createCache({
  key: "plasmo-mui-cache",
  prepend: true,
  container: styleElement
});

export const getStyle = () => {
  const tailwindCSSStyle = document.createElement("style");
  tailwindCSSStyle.textContent = cssText;
  styleElement.appendChild(tailwindCSSStyle);
  return styleElement;
};

const MuiThemedContent = () => (
  <CacheProvider value={styleCache}>
    {...children}
  </CacheProvider>
);

これでTailwindCSSとMUIが同時に使えるようになる。
内部としては、ShadowDOM内のStyle要素にCSSの記述を固めているため、その部分をマージした形になっている。