CSS in JS 新秀：Vanilla-Extract 浅析

前言

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 = () => ( 
   
    DEMO1