国产精品va欧美精品,欧美色视,精品国产网站

CSS in JS 新秀：Vanilla-Extract 淺析

2022-01-12 00:48Tecvan江江編程技術(shù)

2021年，vanilla-extract 作為黑馬登頂了 css-in-js 滿意度榜首(雖然使用率僅為1%)，號(hào)稱是一個(gè)類型安全、高度兼容 TS 場(chǎng)景的庫(kù)，國(guó)內(nèi)相關(guān)討論還很少，稍微看了一下還挺好用的。

CSS in JS 新秀：Vanilla-Extract 淺析

前言

CSS in JS 新秀：Vanilla-Extract 淺析

介紹

官方文檔：https://vanilla-extract.style/documentation/

打開(kāi)vanilla-extract官網(wǎng)文檔，里面已經(jīng)羅列了他的那些優(yōu)點(diǎn)。作為一個(gè)如果使用 css-in-js 會(huì)首選styled-components的我來(lái)說(shuō)，比較關(guān)注的點(diǎn)主要是：

All styles generated at build time
Type-safe styles via CSSType.

這兩點(diǎn)說(shuō)白了就是，零運(yùn)行時(shí)且支持typescript。

零運(yùn)行時(shí)：vanilla-extract會(huì)在編譯時(shí)期，編譯出 css modules值和css內(nèi)容，不需要帶任何運(yùn)行時(shí)內(nèi)容到生產(chǎn)環(huán)境，相對(duì)來(lái)說(shuō)運(yùn)行速度更高，產(chǎn)物體積更小;

typescript：支持typescript類型檢查，CSS安全;

目前，業(yè)界大多數(shù)相關(guān)競(jìng)品如 styled-components就是一個(gè)運(yùn)行時(shí)方案且基于標(biāo)簽?zāi)０暹M(jìn)行書寫，主要基于stylis解析器解析，如果頻繁更新props還會(huì)造成style標(biāo)簽大量插入到head里。

安裝

Webpack 環(huán)境下，需要同時(shí)安裝 @vanilla-extract/css 與 @vanilla-extract/webpack-plugin 插件：

yarn add @vanilla-extract/css @vanilla-extract/webpack-plugin

安裝完成后，修改 Webpack 配置：

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
module.exports = {
entry: './src/index.js',
// ....
plugins: [new VanillaExtractPlugin()]
};

這里可以看見(jiàn)，當(dāng)我們使用 vanilla-extract 時(shí)，需要安裝兩個(gè)庫(kù)：

@vanilla-extract/css：開(kāi)發(fā)核心庫(kù)，基于該庫(kù)進(jìn)行項(xiàng)目業(yè)務(wù)樣式開(kāi)發(fā);
@vanilla-extract/webpack-plugin：webpack插件。前面也提及了vanilla-extract是一個(gè)零運(yùn)行的庫(kù)，主要是通過(guò)該插件處理。
- 通過(guò)增加webpack配置項(xiàng)，對(duì)相關(guān)后綴文件使用自定義的@vanilla-extract/webpack-plugi/loader進(jìn)行處理。
- 在其內(nèi)部通過(guò)eval庫(kù)在編譯時(shí)先執(zhí)行得到className結(jié)果，避免在運(yùn)行時(shí)執(zhí)行過(guò)程;
- 再移除@vanilla-extract/css庫(kù)，使其不會(huì)影響到生產(chǎn)環(huán)境下js包體大小;

構(gòu)建樣式API

這里只會(huì)對(duì)vanilla-extract比較核心的構(gòu)建樣式相關(guān)幾個(gè)API提及，其他API可以直接前往官網(wǎng)查看。

style

import { style } from '@vanilla-extract/css';
export const parentClass = style({
background: 'red',
':hover': {
background: 'blue',
},
});
export const childClass = style({
selectors: {
'&:nth-child(2n)': {
background: '#fafafa',
},
[`${parentClass} &`]: {
color: 'pink',
},
},
});
import { childClass, parentClass } from './index.styles.css';
const Demo = () => (
<div className={parentClass}>
<div className={childClass}>DEMO1</div>
<div className={childClass}>DEMO2</div>
<div className={childClass}>DEMO3</div>
</div>
);
export default Demo;

這個(gè)簡(jiǎn)單的demo我相信，看幾下就已經(jīng)明白是怎么使用了。但是需要理解的地方是，為了提高可維護(hù)性，「每個(gè)樣式塊只能針對(duì)某個(gè)元素(或者說(shuō)是使用這個(gè)樣式塊的元素)」。那么在上述代碼里的selectors而言，「其目標(biāo)必須是」**&**(也就是自身元素)而不能是其他元素。例如：`${parentClass} &`是OK的，但是`& div`是不允許的。這樣的設(shè)計(jì)，我覺(jué)得更是一種職責(zé)分離吧，每個(gè)樣式塊都針對(duì)某個(gè)元素，那么對(duì)于項(xiàng)目而言，樣式的可維護(hù)性就大大提高了，相比于其他css in js(styled-components)就不容易出現(xiàn)樣式冗余的問(wèn)題。對(duì)于一些特殊情況，比如：在寫styled-components我們會(huì)利用其包裹arco組件(或是其他組件)，然后對(duì)其內(nèi)部元素樣式進(jìn)行覆寫或是新增。

const StyledSelect = styled(Select)`
div {
color: red;
}
`

那么在vanilla-extract樣式塊里是不能直接做到的，因?yàn)槊總€(gè)樣式塊都是針對(duì)某個(gè)元素，是不能直接通過(guò)該樣式塊，直接對(duì)其兄弟元素、子元素進(jìn)行樣式調(diào)整。但是，對(duì)于這種情況，是可以使用另一個(gè)APIglobalStyle進(jìn)行開(kāi)發(fā)。

globalStyle

顧名思義，就是全局樣式API。但是因?yàn)楸旧韛anilla-extract走css module，每個(gè)className都是獨(dú)一無(wú)二，那么通過(guò)globalStyle來(lái)對(duì)其子元素進(jìn)行樣式調(diào)整覆蓋完全是可行的。