Upgrade to Pro — share decks privately, control downloads, hide ads and more …

keyframes of Vue&TSX with CSS in JS

5297a6f1a0d91b1ef43b75b2915a0628?s=47 did0es
January 11, 2020

keyframes of Vue&TSX with CSS in JS

5297a6f1a0d91b1ef43b75b2915a0628?s=128

did0es

January 11, 2020
Tweet

Transcript

  1. Vue + TSX でもCSS in JSしたい話 #Kyoto.js @did0es

  2. About Me 平井 柊太 ( shuta,  @did0es ) 立命館大学 情報理工学部

    2年 Web Front-end Engineer, Designer @ ElevenBack LLC. & tambourine.inc
  3. https://github.com/shuta13/vue-tsx-sample サンプルコード

  4. VueをTSXで書く こういうのはご存じですか?

  5. .vueを.tsxで書きかえる つまるところ…

  6. 手順 Vue CLIで環境を作る vue-tsx-support の追加 あとは書くだけ

  7. こんな感じに書けます

  8. Reactみたいな味がするVue みなさん是非お試しを…

  9. このときCSS(scss)は外部ファイル

  10. VueならCSS in JSがいい…??? 賛否というか否がありそうですが

  11. CSS in JSを、します

  12. styled or emotion 検証 1

  13. 宣言ファイルないので本家使います

  14. styledいれる さっそく書いてみる

  15. styledつかう あ〜〜

  16. hoverしてエラー確認 とりあえず型で終わってそう…

  17. うーん すんなりやりたい

  18. emotionいれる

  19. ???

  20. react が無いと怒られた 了解!

  21. react いれた カオスでいいね!

  22. エラーなくて良さそう emotionつかう

  23. 色ついてない…

  24. おそるおそるターミナルを見ると…

  25. ギェ~~~

  26. うーん

  27. emotionいれる(奥義)

  28. emotionつかう

  29. グエー

  30. 厳しい

  31. JSXに props で渡す 検証 2

  32. とりあえず書く

  33. いけてますね

  34. ハイ、完了!...じゃなくて

  35. Q. keyframes どうするん?

  36. ここからが本題です

  37. オレオレCSS in JSしたい話 #Kyoto.js @did0es

  38. styledやemotionには @keyframes相当のものがあり㽂 はじめに

  39. styledとemotionの keyframes実装見てパクる その 1

  40. emotion/packages/core/src/keyframes.js

  41. styled-components/src/constructors/keyframes.js

  42. styled-components/src/models/Keyframes.js

  43. わかるけどわからん ^o^ めっちゃflowtype使うやん

  44. 困ったときのMDN頼み その 2

  45. いい感じのWeb APIありました CSSStyleSheet.insertRule() : https://developer.mozilla.org/ja/ docs/Web/API/CSSStyleSheet/insertRule

  46. やりたいこと説明 htmlファイルのheadに insertRuleでstyleをぶち込む

  47. example等参考にtsで関数作成 型アップキャストがちょっとつらい

  48. こんな感じでつかう

  49. ☆成★功☆

  50. まとめ - vue + tsx でCSS in JSはちょっと面倒 - Web

    APIはえらかった
  51. 余談ですが… 暇を持て余してこれをライブラリ化しました https://www.npmjs.com/package/vue-tsx-keyframes ご興味あればお試しを!

  52. ありがとうございました! Thank you for listening !