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/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
npm install dp-taro-postcss-pxtransform
Typescript
Module System
Node Version
NPM Version
69.2
Supply Chain
98.3
Quality
75.1
Maintenance
50
Vulnerability
100
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
464
Last Day
1
Last Week
5
Last Month
16
Last Year
135
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
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%
1
Compared to previous day
Last Week
66.7%
5
Compared to previous week
Last Month
-5.9%
16
Compared to previous month
Last Year
50%
135
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
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