styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ

こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき

[Shisama]

レガシーと向き合うシリーズ続編です。今回は Scss から styled-components に移行する話です。なぜ styled-components に決定したのか、どう移行していくのかについて興味がある人はぜひ読んでみてください！

[efcl]

Sassで書かれていたスタイルをCSS in JSに移行する話。 styled-componentsを使って書く場合にスタイリングとJSXを分離するためのルール、Sassの変数を抽出して移行するスクリプトについてなど

[BookMarkForProgramming]

“この形式であれば styled なコンポーネントと React コンポーネントがごちゃ混ぜになることはありません。React コンポーネント自体もピュアな React コンポーネントの状態を保つことができます。”

[akymrk]

“在 CSS Modules はメンテナンスオンリーな状態にあり、将来 deprecateとされる可能性が高く、採用するにはリスクが高い”

[hush_in]

変換スクリプト良い

[d4-1977]

解決したかっことって、CSSファイルやクラスの命名がカオスで辛いから、運用ルールを作っていきましょう、という話なのかな🤔　CSSって、技術的なことよりも、運用ルールが辛くなる印象があります

[noseld]

styled componentを外側のコンポーネントにのみあてるのか。vueっぽい。複雑なコンポーネントは定義が長くなるから、個人的にはあまり好みではないな。

[minase_mira]

“styledはコンポーネントを引数に取ってスタイルをあてる以外の使い方をしない ”

[akabekobeko]

SPA ではない複数 HTML で CSS をファイルとして共有するために CSS Modules を採用しているが css-loader サポートがなくなりそうなのは知らなかった。代替を検討しよう。

[t2wave]

scssからcss in jsへの移行。既存顧客のサポートは諦める。scss変数をjsへ変換するツール。

[sathoeku]

知らなかった “現在 CSS Modules はメンテナンスオンリーな状態にあり、将来 deprecateとされる可能性が高く、採用するにはリスクが高いと判断しました。”

[bouzuya]

踏み倒す話

[cuttoff19]

“現在 CSS Modules はメンテナンスオンリーな状態にあり、将来 deprecateとされる可能性が高く、”