【移动端适配】postcss插件postcss-px2vp

2878

引子

最近一年里呀,主要写React、PC端、小程序比较多,所以移动端适配啥的就用得少了。以前写Vue的时候,总会用到的postcss-px-to-viewport这个插件也因为在React里用styled-components来写样式然后选择使用其他自动转换方案所以很久没有再用,但是最近想着跟进一下vue3+vite的学习,所以又把demo弄了起来。

遇到问题

说干就干,就按着自己的习惯开始搭demo,vite、vue3、typescript、JSX,这几个之前已经有经验,所以很容易就弄好了。
然后就是UI框架,element-plus试了一下,这次就不说了。
然后来搭移动端,UI框架选用Vant,然后移动端嘛,肯定要搞自适应的,postcss是vite自带了的,postcss-px-to-viewport很自然就用起来了,但是一个之前遇到过的问题现在就出现了:
Vant的设计稿是375的,但是平时我这的设计师一般出的双倍图,用750,所以postcss-px-to-viewport的viewportWidth得可以在不同文件中有不同的值,以前的解决方案是这样的:

// .postcssrc.js
const path = require('path');

module.exports = ({file}) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant'))
    ? 375
    : 750;

  return {
    plugins: {
      autoprefixer: {},
      'postcss-px-to-viewport': {
        viewportWidth: designWidth
      }
    }
  };
};


但是vite里这种方法不会返回file值(推测是webpack和rollup的不同处理),所以这种办法行不通了,我需要一种可以动态配置参数的插件,让我可以像下面这样配置:

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import styleImport from 'vite-plugin-style-import';
import px2vp from 'postcss-px2vp';

const vantStyleImport = () => {
  const libraryName = 'vant';
  return styleImport({
    libs: [
      {
        libraryName,
        esModule: true,
        resolveStyle(name) {
          return `${libraryName}/es/${name}/style`;
        }
      }
    ]
  });
};

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        px2vp({
          viewportWidth(rule) {
            const file = rule.source?.input.file;
            // 根据文件名动态配置viewport width
            if (file?.includes('vant')) return 375;
            return 750;
          }
        })
      ]
    }
  },
  plugins: [vue(), vueJsx(), vantStyleImport()]
});

再者,postcss-px-to-viewport是js编写,没有类型提示,也没有@types类型;
插件编写的方法也是postcss 8版本里不推荐的形式。postcss-8-plugin-migration
所以,决定自己用typescript重写一下这个插件,顺便把动态传参加了进去。

postcss-px2vp

项目地址:github.com/sexyHuang/p…

使用上基本和postcss-px-to-viewport没有差异,主要区别是:

  • 像上面提到那样动态处理参数,除了上述参数,其余参数也可以用类似的形式动态处理。

  • 有完善的类型提示和参数说明

    image.png

  • 重写为postcss 8插件

最后

其实说这么多,也就是想大伙有需要的时候可以想起这个插件,
当然最大功劳还是原插件postcss-px-to-viewpost, 这里也不多提它的功能用法啥的了,详细可以看看掘金里的相关文章