@fox-js/postcss-plugin-px2rem

Fox postcss-plugin-px2rem

postcss plugin px2rem,基于postcss-plugin-px2rem进行了二次扩展，支持不同的css的转换规则。目的是为了解决实际开发过程中，项目的设计图是750px，而UI库是基于375px设计图的问题

说明

PostCSS插件，能够把px统一转换为rem的插件

安装

npm

npm i @fox-js/postcss-plugin-px2rem -D

yarn

pnpm add @fox-js/postcss-plugin-px2rem -D

pnpm

pnpm add @fox-js/postcss-plugin-px2rem -D

使用说明

input and output

// input
h1 {
  margin: 0 0 20px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 1px;
}

// output
h1 {
  margin: 0 0 0.2rem;
  font-size: 0.32rem;
  line-height: 1.2;
  letter-spacing: 0.01rem;
}

with vite

import px2rem from 'postcss-plugin-px2rem';
const px2remOpts = {
  ......
};
 
export default {
   postcss: {
       plugins: [
          px2rem(px2remOpts)
       ]
      }
    },
}

配置

配置类型

// 过滤条件
type FilterConditon = string | RegExp | (string | RegExp)[] | Function

// root value
type RootValue = number | Record<string, number>

/**
 * Options
 */
export interface Options {
  // root element font size
  rootValue: RootValue | { (path: string): RootValue }
  // 排除文件
  exclude?: FilterConditon
  // the decimal numbers to allow the REM units to grow to
  unitPrecision: number
  // the selectors to ignore and leave as px
  selectorBlackList?: FilterConditon
  // 允许px转换为rem的属性
  propWhiteList?: FilterConditon
  // 不允许px转换为rem的属性
  propBlackList?: FilterConditon
  // a way to have a single property ignored, when ignoreIdentifier enabled, then replace would be set to true automatically
  ignoreIdentifier?: boolean | string
  // replaces rules containing rems instead of adding fallbacks
  replace: boolean
  // allow px to be converted in media queries
  mediaQuery: false
  // set the minimum pixel value to replace
  minPixelValue: number
}

默认配置

// 默认参数
const defaultOpts: Options = {
  rootValue: 10,
  unitPrecision: 5,
  selectorBlackList: [],
  propWhiteList: [],
  propBlackList: [],
  ignoreIdentifier: false,
  replace: true,
  mediaQuery: false,
  minPixelValue: 0
}