[Css-in-js]wyw-in-js的使用

最新推荐文章于 2024-07-16 20:51:21 发布

豆子前端

最新推荐文章于 2024-07-16 20:51:21 发布

阅读量446

点赞数 12

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_41996454/article/details/140475216

版权

[Css-in-js]wyw-in-js的使用

简介

官方文档：https://wyw-in-js.dev/

wyw-in-js 是“Whatever-you-want-in-JS”的缩写，是世界上第一个用于创建各种零运行时 CSS（以及更多）-in-JS 库的工具包。从本质上讲，它使开发人员能够使用任意语法和功能构建自己的解决方案，从而完全独立于特定实现。

WyW-in-JS 提供了一套API，用于创建自定义处理器，比如在Linaria中的css和styled，或在Griffel中的makeStyles。它支持多种语法形式，包括标记模板、函数调用和对象字面量。一个特别值得注意的特性是，它能在构建阶段计算未准备好的JavaScript代码，生成可供处理器转换为样式（或其他输出）的一组工件。

该项目还允许你在样式定义中自由地使用JavaScript，包括导入、条件语句和循环，极大地拓展了编写样式的能力。为了保证与各种构建系统的兼容性，WyW-in-JS 提供了适配流行打包器（如Webpack、Vite和esbuild）以及框架（如Next.js）的加载器和插件。

为什么要用这个库

最主要的是，它除了兼容Linaria之外，还可以兼容其它的css-in-js方案，而且Linaria在实际使用的时候，会遇到一些坑（比如在不同系统的某些情况下，linaria并没有按照对应的css生成出类名来，而组件又引用了未生成的类名，会直接报错），这些在WyW-in-JS 都有所优化。

除此之外，它继承了Linaria的所有优点特性，尤其是零运行时…

无额外代码：库不包含任何在应用运行时会执行的JavaScript代码。这意味着它不会在浏览器中添加任何额外的逻辑或功能，除了生成CSS。
样式内联：样式直接内联到组件中，而不是通过外部的CSS文件引入。这可以减少HTTP请求的数量，并且可能提高应用的加载速度。
无需打包器：零运行时库可能不需要构建工具或打包器来处理样式。它们可能在编译时直接将样式转换为CSS字符串，并将其嵌入到JavaScript代码中。
样式隔离：CSS-in-JS库通常提供局部作用域的样式，这意味着样式只会影响它们被定义的组件，而不会影响到其他部分的DOM。
无需额外的运行时库：与某些CSS-in-JS库不同，零运行时库不依赖于在应用中包含额外的运行时库来处理样式的注入或更新。
性能优化：由于没有额外的运行时代码，这种库可能提供更好的性能，尤其是在初始加载和样式更新时。
易于维护：没有额外的运行时代码，库的维护和调试可能更为简单。
自定义性强：开发者可以根据自己的需求定制样式生成逻辑，而不受库实现的限制。

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';

// Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

// Then use it as a class name
<h1 className={header}>Hello world</h1>;

在webpack中使用

module.exports = {
  module: {
    rules: [
      {
        test: /\.js/,
        use: [{ loader: '@wyw-in-js/webpack-loader' }],
      },
    ],
  },
};

在Vite中使用

之前使用linaria是使用这样的写法

import linaria from '@linaria/rollup'
const plugins = [
	...,
  linaria({
    include: ['**/*.{ts,tsx}'],
    babelOptions: {
      presets: ['@babel/preset-typescript', '@babel/preset-react', '@linaria'],
    },
  })
]

直接平替即可

import wyw from "@wyw-in-js/vite"
const plugins = [
  ...,
  wyw({
		include: ['**/*.{ts,tsx}'],
		babelOptions: {
			presets: ["@babel/preset-typescript", "@babel/preset-react"],
		},
	})
]