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
}