Vue + TSX でもCSS in JSしたい話#Kyoto.js @did0es
View Slide
About Me 平井 柊太 ( shuta, @did0es ) 立命館大学 情報理工学部 2年 Web Front-end Engineer, Designer@ ElevenBack LLC. & tambourine.inc
https://github.com/shuta13/vue-tsx-sampleサンプルコード
VueをTSXで書くこういうのはご存じですか?
.vueを.tsxで書きかえるつまるところ…
手順Vue CLIで環境を作るvue-tsx-support の追加あとは書くだけ
こんな感じに書けます
Reactみたいな味がするVueみなさん是非お試しを…
このときCSS(scss)は外部ファイル
VueならCSS in JSがいい…???賛否というか否がありそうですが
CSS in JSを、します
styled or emotion検証 1
宣言ファイルないので本家使います
styledいれるさっそく書いてみる
styledつかうあ〜〜
hoverしてエラー確認とりあえず型で終わってそう…
うーんすんなりやりたい
emotionいれる
???
react が無いと怒られた了解!
react いれた カオスでいいね!
エラーなくて良さそうemotionつかう
色ついてない…
おそるおそるターミナルを見ると…
ギェ~~~
うーん
emotionいれる(奥義)
emotionつかう
グエー
厳しい
JSXに props で渡す検証 2
とりあえず書く
いけてますね
ハイ、完了!...じゃなくて
Q. keyframes どうするん?
ここからが本題です
オレオレCSS in JSしたい話#Kyoto.js @did0es
styledやemotionには@keyframes相当のものがあり㽂はじめに
styledとemotionのkeyframes実装見てパクるその 1
emotion/packages/core/src/keyframes.js
styled-components/src/constructors/keyframes.js
styled-components/src/models/Keyframes.js
わかるけどわからん ^o^めっちゃflowtype使うやん
困ったときのMDN頼みその 2
いい感じのWeb APIありましたCSSStyleSheet.insertRule() : https://developer.mozilla.org/ja/docs/Web/API/CSSStyleSheet/insertRule
やりたいこと説明htmlファイルのheadにinsertRuleでstyleをぶち込む
example等参考にtsで関数作成型アップキャストがちょっとつらい
こんな感じでつかう
☆成★功☆
まとめ- vue + tsx でCSS in JSはちょっと面倒- Web APIはえらかった
余談ですが…暇を持て余してこれをライブラリ化しましたhttps://www.npmjs.com/package/vue-tsx-keyframesご興味あればお試しを!
ありがとうございました!Thank you for listening !