人人九九精,国产一级视屏,先锋av资源在线

CSS in JS 新秀：Vanilla-Extract 淺析

前言

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

CSS in JS 新秀：Vanilla-Extract 淺析

介紹

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

打開vanilla-extract官網文檔，里面已經羅列了他的那些優點。作為一個如果使用 css-in-js 會首選styled-components的我來說，比較關注的點主要是：

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

這兩點說白了就是，零運行時且支持typescript。

零運行時：vanilla-extract會在編譯時期，編譯出 css modules值和css內容，不需要帶任何運行時內容到生產環境，相對來說運行速度更高，產物體積更小;

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

目前，業界大多數相關競品如 styled-components就是一個運行時方案且基于標簽模板進行書寫，主要基于stylis解析器解析，如果頻繁更新props還會造成style標簽大量插入到head里。

安裝

Webpack 環境下，需要同時安裝 @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()]
};

這里可以看見，當我們使用 vanilla-extract 時，需要安裝兩個庫：

@vanilla-extract/css：開發核心庫，基于該庫進行項目業務樣式開發;
@vanilla-extract/webpack-plugin：webpack插件。前面也提及了vanilla-extract是一個零運行的庫，主要是通過該插件處理。
- 通過增加webpack配置項，對相關后綴文件使用自定義的@vanilla-extract/webpack-plugi/loader進行處理。
- 在其內部通過eval庫在編譯時先執行得到className結果，避免在運行時執行過程;
- 再移除@vanilla-extract/css庫，使其不會影響到生產環境下js包體大小;

構建樣式API

這里只會對vanilla-extract比較核心的構建樣式相關幾個API提及，其他API可以直接前往官網查看。

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;

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