本記事はOPENLOGI AdventCalendar 15日目の記事です。
問題提起
JSDOMの中で ピンク という色はどういう扱いを受けているか知っていますか？
colorのピンクはjsdomの中だとレンダーされなく、存在が消されています！
と思っていたのですが実装が変わったみたいです。
ピンクはちゃんとレンダーされます。
答えだけ知りたいって方はこちらをクリックで
Vue.jsのコード例ですが触ったことないひともなんとなくわかるかと思う簡単な例にしてます。。
それでは実際にコードを追ってみましょう。！！！
実コードみせる
ブラウザ編
こちらのコードを実際にWeb上でレンダーするとどうなるか見ていきたいと思います。
Greeting.vue
<template>
<div>
color: <span :style="{ color: color }">{{ color }}</span>
</div>
</template>
<script>
export default {
name: "Greeting",
props: {
color: {
type: String,
default: "blue"
}
}
};
</script>
吐き出されるHTML
<div>color: <span style="color: blue;">blue</span></div>
画面で見るとこんな感じ
CodeSandboxで実際に触ってみる場合はこちら。
node.js編
（（今年の八月くらいまでは））例えばVue-test-utilsとかブラウザに依存しない環境で
<Greeting :color="pink">
をレンダーすると
<div>color: <span style>pink</span></div>
ってなりました。
要するにピンクがスタイルとして認識されてなかったです。
仮想DOMのなかでどういう実装になっているか
JSDOMのなかでのカラーレンダリングとかはchad3814/CSSStyleDeclarationというライブラリに依存していました。
そのなかの ここらへん
case 'maroon':
case 'red':
case 'orange':
case 'yellow':
case 'olive':
case 'purple':
case 'fuchsia':
case 'white':
case 'lime':
case 'green':
case 'navy':
case 'blue':
case 'aqua':
case 'teal':
case 'black':
case 'silver':
case 'gray':
この色しか使えなかったのです。ピンクはありませんね。もしピンクをどうしてもVue-test-utilsのテストで使いたいならこのライブラリをフォークして cace pink を追加すると大丈夫な仕様になっていました。
このあたりにとても詳しくかかれていますが、「JSDOMはpinkプロパティをセットできねーぜ」ってイシューが建てられていました。
- JSDOM doesn't retrieve the "*style.backgroundColor = 'pink'" property set on a table row #1965
書き換えてみる
node_modules/からCSSStyleDeclarationの部分を書き換えるとレンダリングされました。
jsdomのイシュー読んでみた
このあたりのイシューを読んでみた
We don't support getting the style property as JS properties on style for now. You would have to use tr.style.getPropertyValue(). I believe @Zirro is working on a rewrite of the entire CSSOM support in jsdom, though, which should bring support for this feature.
ZirroさんのJSDOMのCSS部分の書き換えが終わり無事にピンクが使えるようになりました。
終わりに
今回「JSDOMだとピンクが使えないよ！」って話を書こうとしたらまさかのすでに対応済みでかなり焦りました。内容の薄い感じになりましたが、ライブラリの実装とかイシューとか少しおってみたので楽しかったです。