本文轉載自微信公眾號「Tecvan」，作者江江。轉載本文請聯系Tecvan公眾號。

前言

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

介紹

官方文檔：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組件(或是其他組件)，然后對其內部元素樣式進行覆寫或是新增。

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

那么在vanilla-extract樣式塊里是不能直接做到的，因為每個樣式塊都是針對某個元素，是不能直接通過該樣式塊，直接對其兄弟元素、子元素進行樣式調整。但是，對于這種情況，是可以使用另一個APIglobalStyle進行開發。

globalStyle

顧名思義，就是全局樣式API。但是因為本身vanilla-extract走css module，每個className都是獨一無二，那么通過globalStyle來對其子元素進行樣式調整覆蓋完全是可行的。

import { style, globalStyle } from '@vanilla-extract/css'; 
 
export const parentClass = style({}); 
 
globalStyle(`${parentClass} > div`, { 
  color: 'red' 
}); 
 
const Demo = () => ( 
    <div className={parentClass}> 
        <Select/> 
    </div> 
) 

相比于 Styled-components 的優點

• 零運行時;
• 樣式開發走Typescript安全類型;
• style設計職責分離;(當然，styled-components也是可以的，只是完全取決于看開發者)
• ...

總結

目前了解下來，vanilla-extract是一個總體還不錯的css in js庫，雖然目前使用率比較低，但是后續廠商平臺項目會考慮在一些地方使用看看效果(畢竟不會增大js體積)。