月入6K的小前端给 unocss 写了个小插件自从知道了 unocss 的大名，我就对它爱不释手，新项目我是一个不落的用

插件地址

自从知道了 unocss 的大名，我就对它爱不释手，新项目我是一个不落的用上了他，老项目也是能用的都会把它用上；最近遇到一个大屏项目，通常大屏使用 vw 适配的，我当时的实现方案是，unocss 配合 postcss-px-to-viewport 来实现的单位转换。但是在使用过程中发现这个仓库已经年久失修了，并且需要单独配置。就心血来潮是不是可以给unocss写个小插件来转换一下，也让咱这个小前端发挥发挥余热。

unocss-preset-px-to-viewport

为了纪念 postcss-px-to-viewport 这位老功臣我在插件的名字里面加上了 px-to-viewport，为了区分这个unocss的插件，名字的前缀是 unocss。

插件的配置项仍然保留了 postcss-px-to-viewport 的配置项，根据需要删除了我自认为多余的参数

interface PxToVwOptions {
  viewportWidth: number;  // 设计稿宽度 默认 375
  unitPrecision: number;  // 保留小数位 默认 3
  viewportUnit: string;   // 视窗单位 默认 vw
  minPixelValue: number; // 最小值不被转换 默认 1px
}

使用方法，因为unocss默认为 rem 单位，所以此插件需要依赖于 @unocss/preset-rem-to-px 预设来将 rem 转为 px，然后再去转为 vw

import { defineConfig } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
import presetPxTovw from 'unocss-preset-px-to-viewport'

export default defineConfig({
  presets: [
    presetRemToPx(),
    presetPxTovw(),
  ],
})

核心代码，其实大部分工作 unocss 都已经做好了，我们只要根据需要把值处理成自己想要的样子就行

export default function pxToVwPreset(options: Partial<PxToVwOptions> = defaultOptions): Preset {
  const mergedOptions: PxToVwOptions = { ...defaultOptions, ...options };

  return {
    name: '@unocss/preset-px-to-vw',
    postprocess: (util: UtilObject) => {
      const pxReplace = createPxReplace(mergedOptions);
      util.entries.forEach((i) => {
        const value = i[1];
        if (typeof value === 'string' && pxToVwRE.test(value)) {
          i[1] = value.replace(pxToVwRE, pxReplace);
        }
      });
    },
  };
}

不得不说有了unocss真的很方便！