1. ykhirao

    Posted

    ykhirao
Changes in title
+JSDOMからピンクを探せ!!
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,119 @@
+本記事は[OPENLOGI AdventCalendar](https://qiita.com/advent-calendar/2018/openlogi) 15日目の記事です。
+
+## 問題提起
+
+JSDOMの中で **ピンク** という色はどういう扱いを受けているか知っていますか?
+
+<details>
+colorのピンクはjsdomの中だとレンダーされなく、存在が消されています!
+と思っていたのですが実装が変わったみたいです。
+ピンクはちゃんとレンダーされます。
+<summary>答えだけ知りたいって方はこちらをクリックで :pray:</summary>
+
+Vue.jsのコード例ですが触ったことないひともなんとなくわかるかと思う簡単な例にしてます。。
+それでは実際にコードを追ってみましょう。!!!
+
+## 実コードみせる
+
+
+### ブラウザ編
+
+こちらのコードを実際にWeb上でレンダーするとどうなるか見ていきたいと思います。
+
+Greeting.vue
+
+```html
+<template>
+ <div>
+ color: <span :style="{ color: color }">{{ color }}</span>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Greeting",
+ props: {
+ color: {
+ type: String,
+ default: "blue"
+ }
+ }
+};
+</script>
+
+```
+
+吐き出されるHTML
+
+```HTML
+<div>color: <span style="color: blue;">blue</span></div>
+```
+
+画面で見るとこんな感じ
+
+<img width="451" alt="スクリーンショット 2018-12-18 23.36.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/459f80bb-9b83-4d0c-91f2-2e189c855356.png">
+
+CodeSandboxで実際に触ってみる場合はこちら。
+[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/7w1kz03o8x)
+
+### node.js編
+
+((今年の八月くらいまでは))例えばVue-test-utilsとかブラウザに依存しない環境で
+
+```HTML
+<Greeting :color="pink">
+をレンダーすると
+<div>color: <span style>pink</span></div>
+ってなりました。
+```
+
+要するにピンクがスタイルとして認識されてなかったです。
+
+## 仮想DOMのなかでどういう実装になっているか
+
+JSDOMのなかでのカラーレンダリングとかはchad3814/CSSStyleDeclarationというライブラリに依存していました。
+
+そのなかの [ここらへん](https://github.com/chad3814/CSSStyleDeclaration/blob/5c51d1657f8b693d46744e05239c24ae03be57e5/lib/parsers.js#L100-L116)
+
+```js
+ 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` を追加すると大丈夫な仕様になっていました。
+
+[このあたり](https://github.com/jsdom/jsdom/issues/1965)にとても詳しくかかれていますが、「JSDOMはpinkプロパティをセットできねーぜ」ってイシューが建てられていました。
+
+- JSDOM doesn't retrieve the "*style.backgroundColor = 'pink'" property set on a table row #1965
+
+## 書き換えてみる
+
+node_modules/からCSSStyleDeclarationの部分を書き換えるとレンダリングされました。
+
+## jsdomのイシュー読んでみた
+
+[このあたり](https://github.com/jsdom/jsdom/issues/1965)のイシューを読んでみた
+
+> 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だとピンクが使えないよ!」って話を書こうとしたらまさかのすでに対応済みでかなり焦りました。内容の薄い感じになりましたが、ライブラリの実装とかイシューとか少しおってみたので楽しかったです。
+