Gathering detailed insights and metrics for dp-taro-postcss-pxtransform
Gathering detailed insights and metrics for dp-taro-postcss-pxtransform
Gathering detailed insights and metrics for dp-taro-postcss-pxtransform
Gathering detailed insights and metrics for dp-taro-postcss-pxtransform
开放式跨端跨框架解决方案,支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
npm install dp-taro-postcss-pxtransform
Typescript
Module System
Node Version
NPM Version
chore(release): publish 4.1.4
Updated on Jul 11, 2025
chore(release): publish 4.1.3
Updated on Jun 30, 2025
chore(release): publish 4.1.2
Updated on Jun 05, 2025
chore(release): publish 4.1.1
Updated on May 18, 2025
feat(harmony): update runtime hooks & runtime
Updated on May 18, 2025
chore(release): publish 4.1.0
Updated on May 16, 2025
TypeScript (55.59%)
JavaScript (39.82%)
SCSS (2.3%)
Rust (1.91%)
HTML (0.19%)
CSS (0.18%)
Vue (0.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
NOASSERTION License
36,682 Stars
14,246 Commits
4,849 Forks
689 Watchers
133 Branches
602 Contributors
Updated on Jul 12, 2025
Latest Version
2.2.33
Package Id
dp-taro-postcss-pxtransform@2.2.33
Unpacked Size
15.58 kB
Size
5.45 kB
File Count
7
NPM Version
8.5.0
Node Version
16.14.2
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
2
3
PostCSS 单位转换插件,目前已支持小程序端(px 转 rpx),H5 端(px 转 rem)及 RN 端。
基于 postcss-pxtorem。
1$ npm install dp-taro-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};
默认配置下,所有的 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}
1var fs = require("fs"); 2var postcss = require("postcss"); 3var pxtorem = require("dp-taro-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)(必填)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}
对于头部包含注释/*dp-taro-postcss-pxtransform disable*/
的文件,插件不予处理。
/*dp-taro-postcss-pxtransform rn eject enable*/
与 /*dp-taro-postcss-pxtransform rn eject disable*/
中间的代码,
在编译成 RN 端的样式的时候,会被删除。建议将 RN 不支持的但 H5 端又必不可少的样式放到这里面。如:样式重制相关的代码。
1/*dp-taro-postcss-pxtransform rn eject enable*/ 2 3.test { 4 color: black; 5} 6 7/*dp-taro-postcss-pxtransform rn eject disable*/
No vulnerabilities found.
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
all changesets reviewed
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
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
128 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
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