Facebook去年四月發(fā)布了其重大改版。這是一個(gè)雄心勃勃的項(xiàng)目，是對(duì)一個(gè)擁有海量用戶的龐大網(wǎng)站的重建。為了實(shí)現(xiàn)這一目標(biāo)，他們使用了自己創(chuàng)建並開源的幾項(xiàng)技術(shù)，例如React、GraphQL、Relay和一個(gè)名為stylex的新CSS-in-JS庫(kù)。

這個(gè)新庫(kù)是Facebook內(nèi)部使用的，但他們分享了足夠的信息，使得開源實(shí)現(xiàn)style9成為可能。

為什麼需要另一個(gè)CIJ庫(kù)？

現(xiàn)已存在大量的CSS-in-JS (CIJ)庫(kù)，因此可能不清楚為什麼還需要另一個(gè)庫(kù)。正如Christopher Chedeau所闡述的那樣，style9具有與所有其他CIJ解決方案相同的好處，包括作用域選擇器、死代碼消除、確定性解析以及在CSS和JavaScript之間共享值的能力。

然而，有一些方面使style9獨(dú)樹一幟。

最小的運(yùn)行時(shí)

儘管樣式是在JavaScript中定義的，但它們由編譯器提取到常規(guī)的CSS文件中。這意味著最終的JavaScript文件中不會(huì)包含任何樣式。唯一剩下的就是最終的類名，最小的運(yùn)行時(shí)將有條件地應(yīng)用這些類名，就像您通常所做的那樣。這將導(dǎo)致代碼包更小、內(nèi)存使用減少以及渲染速度更快。

由於值是在編譯時(shí)提取的，因此無(wú)法使用真正動(dòng)態(tài)的值。幸運(yùn)的是，這些值並不常見，而且由於它們是唯一的，因此不會(huì)因?yàn)閮?nèi)聯(lián)定義而受到影響。更常見的是有條件地應(yīng)用樣式，當(dāng)然這是支持的。多虧了babel的path.evaluate，局部常量和數(shù)學(xué)表達(dá)式也是支持的。

原子輸出

由於style9的工作方式，每個(gè)屬性聲明都可以成為具有單個(gè)屬性的獨(dú)立類。例如，如果我們?cè)诖a中多個(gè)地方使用opacity: 0，它在生成的CSS中只會(huì)存在一次。這樣做的好處是，CSS文件的大小隨著唯一聲明的數(shù)量而增長(zhǎng)，而不是隨著聲明的總數(shù)而增長(zhǎng)。由於大多數(shù)屬性被多次使用，這可以導(dǎo)致CSS文件大幅縮小。例如，F(xiàn)acebook舊的首頁(yè)使用了413 KB的gzip壓縮CSS。改版後，所有頁(yè)面的CSS大小為74 KB。同樣，較小的文件大小會(huì)導(dǎo)致更好的性能。

有些人可能會(huì)抱怨這一點(diǎn)，認(rèn)為生成的類名不是語(yǔ)義化的，它們是不透明的，並且忽略了級(jí)聯(lián)。這是真的。我們將CSS視為編譯目標(biāo)。但這是有充分理由的。通過(guò)質(zhì)疑以前被認(rèn)為最佳的實(shí)踐，我們可以改善用戶和開發(fā)人員的體驗(yàn)。

此外，style9還有許多其他強(qiáng)大的功能，包括：使用TypeScript進(jìn)行類型化樣式、消除未使用樣式、使用JavaScript變量的能力以及對(duì)媒體查詢、偽選擇器和關(guān)鍵幀的支持。

如何使用它

首先，像往常一樣安裝它：

 <code>npm install style9</code>

style9有針對(duì)Rollup、Webpack、Gatsby和Next.js的插件，它們都基於Babel插件。關(guān)於如何使用它們的說(shuō)明可在存儲(chǔ)庫(kù)中找到。在這裡，我們將使用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>

定義樣式

創(chuàng)建樣式的語(yǔ)法與其他庫(kù)非常相似。我們首先使用樣式對(duì)象調(diào)用style9.create：

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

因?yàn)樗新暶鞫紝a(chǎn)生原子類，所以諸如flex: 1和background: blue之類的簡(jiǎn)寫將不起作用，因?yàn)樗鼈冊(cè)O(shè)置了多個(gè)屬性?？梢哉归_的屬性，例如padding、margin、overflow等，將自動(dòng)轉(zhuǎn)換為它們的完整形式。如果您使用TypeScript，則在使用不受支持的屬性時(shí)會(huì)收到錯(cuò)誤。

解析樣式

要生成類名，我們現(xiàn)在可以調(diào)用style9.create返回的函數(shù)。它接受我們要使用的樣式鍵作為參數(shù)：

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

該函數(shù)的工作方式是這樣的：右側(cè)的樣式優(yōu)先，並將與左側(cè)的樣式合併，就像Object.assign一樣。以下將產(chǎn)生一個(gè)填充為12px且文本為rebeccapurple的元素。

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

我們可以使用以下任何格式有條件地應(yīng)用樣式：

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

這些函數(shù)調(diào)用將在編譯期間被刪除，並替換為直接的字符串連接。上面代碼中的第一行將被替換為類似'c1r9f2e5 ' hasPadding ? 'cu2kwdz ' : ''的內(nèi)容。沒(méi)有留下運(yùn)行時(shí)代碼。

組合樣式

我們可以通過(guò)使用屬性名訪問(wèn)樣式對(duì)象並將其傳遞給style9來(lái)擴(kuò)展樣式對(duì)象。

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

就像函數(shù)調(diào)用一樣，右側(cè)的樣式優(yōu)先。但是，在這種情況下，類名不能靜態(tài)解析。相反，屬性值將被類替換，並在運(yùn)行時(shí)連接。屬性像以前一樣添加到CSS文件中。

總結(jié)

CSS-in-JS 的好處是真實(shí)存在的。也就是說(shuō)，當(dāng)我們將樣式嵌入到代碼中時(shí)，會(huì)產(chǎn)生性能成本。通過(guò)在構(gòu)建時(shí)提取值，我們可以同時(shí)獲得兩全其美的效果。我們可以從將樣式與標(biāo)記放在一起以及使用現(xiàn)有的JavaScript基礎(chǔ)設(shè)施中獲益，同時(shí)還可以生成最佳樣式表。

如果style9聽起來(lái)很有趣，請(qǐng)查看存儲(chǔ)庫(kù)並試用一下。如果您有任何疑問(wèn)，請(qǐng)隨時(shí)提出問(wèn)題或聯(lián)繫我們。

致謝

感謝Giuseppe Gurgone 對(duì)style-sheet和dss的工作，感謝Nicolas Gallagher對(duì)react-native-web的工作，感謝Satyajit Sahoo和Callstack的全體成員對(duì)linaria的工作，感謝Christopher Chedeau、Sebastian McKenzie、Frank Yan、Ashley Watkins、Naman Goel以及在Facebook上從事stylex工作的其他所有人願(yuàn)意公開分享他們的經(jīng)驗(yàn)教訓(xùn)。以及任何其他我錯(cuò)過(guò)的其他人。

鏈接

• johanholmerin/style9
• 使用React、GraphQL和Relay構(gòu)建新的facebook.com – 2019年4月30日
• 使用React和Relay構(gòu)建新的Facebook | Frank Yan – 2019年10月30日
• 新的Facebook.com的技術(shù)棧重建– 2020年5月8日
• johanholmerin/style9-components.macro：style9的Styled Components API – 實(shí)驗(yàn)性

以上是樣式9：構(gòu)建時(shí)間CSS-In-JS的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！