Facebookは昨年4月に大規(guī)模な改訂をリリースしました。これは野心的なプロジェクトであり、多數(shù)のユーザーがいる巨大なウェブサイトの再構(gòu)築です。これを達(dá)成するために、彼らは、React、GraphQL、リレー、Stylexと呼ばれる新しいCSS-in-JSライブラリなど、獨(dú)自に作成したいくつかのテクノロジーを使用して使用しました。

この新しいライブラリはFacebookが社內(nèi)で使用していますが、Style9のオープンソースを?qū)g裝するのに十分な情報(bào)を共有しました。

なぜ別のCIJライブラリが必要なのですか？

すでに多數(shù)のCSS-in-JS（CIJ）ライブラリがあるため、別のライブラリが必要な理由は明確ではないかもしれません。 Christopher Chedeauが説明するように、Style9は、スコープセレクター、デッドコードの除去、決定論的解析、CSSとJavaScriptの間で値を共有する能力など、他のすべてのCIJソリューションと同じ利點(diǎn)を持っています。

ただし、Style9をユニークにするいくつかの側(cè)面があります。

最小ランタイム

スタイルはJavaScriptで定義されていますが、コンパイラによって通常のCSSファイルに抽出されます。これは、最終的なJavaScriptファイルにスタイルが含まれないことを意味します。殘っているのは、最終的なクラス名だけです。通常のように、最小のランタイムが條件付きで適用されます。これにより、コードパッケージが小さくなり、メモリの使用量が減少し、レンダリングが速くなります。

コンパイル時(shí)に値は抽出されるため、真に動(dòng)的な値を使用することはできません。幸いなことに、これらの値は一般的ではなく、一意であるため、インラインの定義の影響を受けません。より一般的なのは、條件付きでスタイルの適用です。これはもちろんサポートされています。 Babelのパスのおかげで、率直に言って、ローカル定數(shù)と數(shù)學(xué)的表現(xiàn)もサポートされています。

原子出力

Style9の仕組みにより、各プロパティ宣言は単一のプロパティを持つ別のクラスになる可能性があります。たとえば、コードの複數(shù)の場(chǎng)所で不透明度：0を使用する場(chǎng)合、生成されたCSSには1回しか存在しません。これの利點(diǎn)は、CSSファイルのサイズが宣言の総數(shù)ではなく、一意の宣言の數(shù)とともに増加することです。ほとんどのプロパティは複數(shù)回使用されるため、これによりCSSファイルが大幅に減少する可能性があります。たとえば、Facebookの古いホームページでは、413 kbのGZIP圧縮CSSを使用しました。改訂後、すべてのページのCSSサイズは74 kbです。同様に、ファイルサイズが小さくなるとパフォーマンスが向上します。

生成されたクラス名はセマンティックではなく、不透明であり、カスケードを無視していると考えて、これについて不平を言う人もいるかもしれません。これは本當(dāng)です。 CSSはコンピレーションターゲットと見なします。しかし、正當(dāng)な理由があります。以前に最もよく考えられていたプラクティスに疑問を投げかけることで、ユーザーと開発者の両方のエクスペリエンスを向上させることができます。

さらに、Style9には、タイプスクリプトを備えたタイプスタイル、未使用スタイルの排除、JavaScript変數(shù)の使用機(jī)能、メディアクエリ、擬似選択、キーフレームのサポートなど、他の多くの強(qiáng)力な機(jī)能があります。

それを使用する方法

まず、いつものようにインストールしてください。

 <code>npm install style9</code>

Style9には、Rollup、Webpack、Gatsby、およびNext.js用のプラグインがあり、すべてBabelプラグインに基づいています。それらの使用方法に関する指示は、リポジトリにあります。ここでは、WebPackプラグインを使用します。

 <code>const Style9Plugin = require('style9/webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ // 這將轉(zhuǎn)換style9調(diào)用{ test: /\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }, // 這是正常的Webpack CSS提取的一部分{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ // 這將對(duì)最終的CSS文件中的聲明進(jìn)行排序并刪除重復(fù)的聲明new Style9Plugin(), // 這是正常的Webpack CSS提取的一部分new MiniCssExtractPlugin() ] };</code>

スタイルを定義します

スタイルを作成するための構(gòu)文は、他のライブラリと非常に似ています。最初にstyle9を呼び出します。スタイルオブジェクトを使用して作成します。

 <code>import style9 from 'style9'; const styles = style9.create({ button: { padding: 0, color: 'rebeccapurple' }, padding: { padding: 12 }, icon: { width: 24, height: 24 } });</code>

すべての宣言は原子クラスを生成するため、Flex：1やBackground：Blueのような略語は複數(shù)の特性を設(shè)定するため機(jī)能しません。パディング、マージン、オーバーフローなど、拡張できるプロパティは、自動(dòng)的にフルフォームに変換されます。 TypeScriptを使用すると、サポートされていないプロパティを使用するとエラーが表示されます。

分析スタイル

クラス名を生成するには、style9.createで返された関數(shù)を呼び出すことができます。パラメーターとして使用するスタイルキーを受け入れます。

 <code>const className = styles('button');</code>

関數(shù)は次のように機(jī)能します。右側(cè)のスタイルが優(yōu)先され、Object.Assignのように、左側(cè)のスタイルとマージされます。以下は、12pxで満たされた要素を生成し、テキストはRebeccapurpleです。

 <code>const className = styles('button', 'padding');</code>

次の形式のいずれかを使用して、スタイルを條件付きで適用できます。

 <code>// 邏輯與styles('button', hasPadding && 'padding'); // 三元運(yùn)算符styles('button', isGreen ? 'green' : 'red'); // 布爾對(duì)象styles({ button: true, green: isGreen, padding: hasPadding });</code>

これらの関數(shù)呼び出しは、編集中に削除され、直接文字列の連結(jié)に置き換えられます。上記のコードの最初の行は、「C1R9F2E5」ハスパディングのようなものに置き換えられますか？ 'cu2kwdz'： ''。ランタイムコードは殘っていません。

コンビネーションスタイル

スタイルオブジェクトをプロパティ名でスタイルオブジェクトにアクセスし、style9に渡すことにより、スタイルオブジェクトを拡張できます。

 <code>const styles = style9.create({ blue: { color: 'blue; } }); const otherStyles = style9.create({ red: { color: 'red; } }); // 將為紅色const className = style9(styles.blue, otherStyles.red);</code>

関數(shù)呼び出しと同じように、右側(cè)のスタイルが優(yōu)先されます。ただし、この場(chǎng)合、クラス名を靜的に解析することはできません。代わりに、プロパティ値はクラスに置き換えられ、実行時(shí)に接続されます。プロパティは、以前と同様にCSSファイルに追加されます。

要約します

CSS-in-JSの利點(diǎn)は本物です。つまり、スタイルをコードに埋め込むと、パフォーマンスコストがあります。ビルド時(shí)に値を抽出することにより、同時(shí)に両方の世界の最高のものを達(dá)成することができます。タグをまとめてスタイルを入れたり、既存のJavaScriptインフラストラクチャを使用したり、最高のスタイルシートを生成したりすることで利益を得ることができます。

Style9が楽しい場(chǎng)合は、リポジトリをチェックして試してみてください。ご質(zhì)問がある場(chǎng)合は、お?dú)葺Xに質(zhì)問するか、お問い合わせください。

謝辭

スタイルシートとDSSでの作業(yè)についてジュゼッペグルゴーネ、ニコラスギャラガー、リアンネイティブウェブ、サティヤジットサフー、およびコールスタックのすべてのメンバーがリナリア、クリストファーチェドー、セバスチャンマッケンジー、フランクヤン、アシュリーワトキンス、ナマンゲール、フェイスブックでのシェアでのシェアでのシェアでのシェアでの作業(yè)のために、コールスタックのすべてのメンバーに感謝します。そして、私が逃した他の人々。

リンク

• Johanholmerin/Style9
• React、GraphQL、Relayを使用して新しいFacebook.comを構(gòu)築します - 2019年4月30日
• ReactとRelayを使用して新しいFacebookを構(gòu)築します|フランク?ヤン - 2019年10月30日
• New Facebook.comのTech Stack再構(gòu)築 - 2020年5月8日
• johanholmerin/style9-components.macro：スタイル9のスタイルのコンポーネントAPI - 実験的

以上がstyle9：ビルドタイムCSS-in-jsの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。