Gathering detailed insights and metrics for postcss-pxtransform
Gathering detailed insights and metrics for postcss-pxtransform
Gathering detailed insights and metrics for postcss-pxtransform
Gathering detailed insights and metrics for postcss-pxtransform
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
npm install postcss-pxtransform
Typescript
Module System
Node Version
NPM Version
78.8
Supply Chain
100
Quality
96.7
Maintenance
100
Vulnerability
99.6
License
chore(release): publish 3.6.37 --tag=v3-latest
Updated on May 09, 2025
chore(release): publish 4.0.13
Updated on May 09, 2025
chore(release): publish 4.0.12
Updated on Apr 15, 2025
chore(release): publish 4.0.10
Updated on Apr 09, 2025
chore(release): publish 3.6.36
Updated on Apr 10, 2025
fix(react-components): 导出新增组件
Updated on Apr 01, 2025
TypeScript (53.58%)
JavaScript (41.57%)
SCSS (2.43%)
Rust (2.02%)
HTML (0.2%)
CSS (0.19%)
Vue (0.01%)
Total Downloads
1,304,975
Last Day
581
Last Week
2,924
Last Month
13,125
Last Year
184,481
NOASSERTION License
36,466 Stars
14,137 Commits
4,836 Forks
691 Watchers
125 Branches
592 Contributors
Updated on May 13, 2025
Minified
Minified + Gzipped
Latest Version
3.6.37
Package Id
postcss-pxtransform@3.6.37
Unpacked Size
51.86 kB
Size
9.90 kB
File Count
8
NPM Version
8.19.4
Node Version
16.20.2
Published on
May 09, 2025
Cumulative downloads
Total Downloads
Last Day
309.2%
581
Compared to previous day
Last Week
48.2%
2,924
Compared to previous week
Last Month
-12%
13,125
Compared to previous month
Last Year
-22.8%
184,481
Compared to previous year
PostCSS 单位转换插件,目前已支持小程序端(px 转rpx),H5 端(px 转 rem)及 RN 端。
基于 postcss-pxtorem。
1$ npm install postcss-pxtransform --save-dev
1options = { 2 platform: 'weapp', 3 designWidth: 750, 4}
1options = {
2 platform: 'h5',
3 designWidth: 750,
4}
1options = { 2 platform: 'rn', 3 designWidth: 750, 4}
基础组件库一般是375
,如果业务系统UI设计是750
,可以如下配置后1:1
切图,小程序、H5、RN时有效
1options = { 2 platform: 'h5', 3 designWidth (input) { 4 if (input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-taro') > -1) { 5 return 375 6 } 7 return 750 8 }, 9}
默认配置下,所有的 px 都会被转换。
1/* input */ 2h1 { 3 margin: 0 0 20px; 4 font-size: 32px; 5 line-height: 1.2; 6 letter-spacing: 1px; 7} 8 9/* weapp output */ 10h1 { 11 margin: 0 0 20rpx; 12 font-size: 32rpx; 13 line-height: 1.2; 14 letter-spacing: 1rpx; 15} 16 17/* h5 output */ 18h1 { 19 margin: 0 0 0.5rem; 20 font-size: 1rem; 21 line-height: 1.2; 22 letter-spacing: 0.025rem; 23} 24 25/* rn output */ 26h1 { 27 margin: 0 0 10px; 28 font-size: 16px; 29 line-height: 1.2; 30 letter-spacing: 0.5px; 31} 32
1var fs = require('fs'); 2var postcss = require('postcss'); 3var pxtorem = require('postcss-pxtransform'); 4var css = fs.readFileSync('main.css', 'utf8'); 5var options = { 6 replace: false 7}; 8var processedCss = postcss(pxtorem(options)).process(css).css; 9 10fs.writeFile('main-rem.css', processedCss, function (err) { 11 if (err) { 12 throw err; 13 } 14 console.log('Rem file written.'); 15});
参数默认值如下:
1{ 2 unitPrecision: 5, 3 propList: ['*'], 4 selectorBlackList: [], 5 replace: true, 6 mediaQuery: false, 7 minPixelValue: 0 8}
Type: Object | Null
platform
(String)(必填)weapp
或 h5
或 rn
designWidth
(Number|Function)(必填)640
或 750
或 828
unitPrecision
(Number)The decimal numbers to allow the REM units to grow to.
propList
(Array)The properties that can change from px to rem.
*
to enable all properties. Example: ['*']
*
at the start or end of a word. (['*position*']
will match background-position-y
)!
to not match a property. Example: ['*', '!letter-spacing']
['*', '!font*']
selectorBlackList
(Array) The selectors to ignore and leave as px.
['body']
will match .body-class
[/^body$/]
will match body
but not .body
replace
(Boolean)replaces rules containing rems instead of adding fallbacks.
mediaQuery
(Boolean)Allow px to be converted in media queries.
minPixelValue
(Number)Set the minimum pixel value to replace.
当前忽略单个属性的最简单的方法,就是 px 单位使用大写字母。
1 /*`px` is converted to `rem`*/ 2.convert { 3 font-size: 16px; // converted to 1rem 4} 5 6 /* `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers*/ 7.ignore { 8 border: 1Px solid; // ignored 9 border-width: 2PX; // ignored 10}
对于头部包含注释/*postcss-pxtransform disable*/
的文件,插件不予处理。
/*postcss-pxtransform rn eject enable*/
与 /*postcss-pxtransform rn eject disable*/
中间的代码,
在编译成 RN 端的样式的时候,会被删除。建议将 RN 不支持的但 H5 端又必不可少的样式放到这里面。如:样式重制相关的代码。
1/*postcss-pxtransform rn eject enable*/ 2 3.test { 4 color: black; 5} 6 7/*postcss-pxtransform rn eject disable*/
No vulnerabilities found.
Reason
all changesets reviewed
Reason
30 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10
Reason
security policy file detected
Details
Reason
no dangerous workflow patterns detected
Reason
packaging workflow detected
Details
Reason
license file detected
Details
Reason
binaries present in source code
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
137 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-05-12
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More