ElectronでCSSをJSのrequireを使って読み込む

Electron Advent Calendar 25日目が空いていたので今思いついた適当な記事で埋めてみる。

Electronではbabel-registerを使えばwebpackとかを使わないで変換できるし、そもそもChromiumの新しいバージョンで動くのでBabelもいらないケースもある。async/awaitも55には乗るしね（今はまだ53）。

CSSも同じように、CSS Variablesは使えるし、コンポーネントごとにCSSを分割していけばセレクタのネストもなくてもほとんど問題ないのでSassもpostcssもいらない。そうすると./node_modules/.bin/electronだけで開発環境が起動できてハッピーだ。

ただ、コンポーネントごとにCSSを分けるとめんどうなのがいちいちmain.cssとかに@importを買いてCSSを読み込まないといけない点。せめてwebpackのstyle-loaderみたいにJSの中でimport './Foo.css'みたいにできればコンポーネント内で解決できるので嬉しい。

そこでNode.jsのrequire.extensionsでこんな感じにしてみるとどうかと思った。

require.extensions['.css'] = function(m, filename) {
  let link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('href', filename);
  document.head.appendChild(link);
};

これで

require('./Foo.css');

みたいにするとhead内にlink要素がappendされてCSSが読み込まれる。リリース時にbundleしたいときはwebpackのcss-loaderとstyle-loaderを使えばたぶん動く（未確認）。

実際にこれで読み込まれるのは確認したけど実際のプロジェクトでは試してないので何か問題はあるかも。どうだろうか。