npmpackage.info

Gathering detailed insights and metrics for postcss-units-transform

postcss-units-transform

CSS 任意单位之间的互相转换的 PostCSS 插件

2.0.0

JavaScript

1.02 kB

16,198 2.2

Installations

npm install postcss-units-transform

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.17.5

NPM Version

6.14.14 Score

66.4

Supply Chain

99.2

Quality

75.4

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

CSS

Shell

JavaScript (84.71%)

CSS (14.85%)

Shell (0.44%)

Developer

noyobo

Download Statistics

Total Downloads

16,198

Last Day

Last Week

Last Month

452

Last Year

8,784

GitHub Statistics

2 Stars

18 Commits

2 Watchers

2 Branches

1 Contributors

Updated on Mar 08, 2023

Bundle Size

2.10 kB

Minified

1.02 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

2.0.0

Package Id

postcss-units-transform@2.0.0

Unpacked Size

7.42 kB

Size

3.03 kB

File Count

NPM Version

6.14.14

Node Version

14.17.5

Total Downloads

Cumulative downloads

Total Downloads

16,198

CSS 任意单位之间的互相转换的 PostCSS插件。

Required

PostCSS >= 8.0

PostCSS < 8.0 请使用 postcss-units-transform@1.x

Install

$ npm install postcss-units-transform --save-dev

Usage

Input/Output

如果使用默认的 opts，将会得到如下的输出。

1/* input */
2p {
3  margin: 0 0 20px;
4  font-size: 32px;
5  line-height: 1.2;
6  letter-spacing: 1px; /* no */
7}
8
9/* output */
10p {
11  margin: 0 0 20rpx;
12  font-size: 32rpx;
13  line-height: 1.2;
14  letter-spacing: 1px;
15}

Example

1var fs = require('fs');
2var postcss = require('postcss');
3var pxtorem = require('postcss-pxtorem');
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});

options

Type: Object | Null

Default:

1{
2  divisor: 1,
3  multiple: 1,
4  decimalPlaces: 2,
5  comment: 'no',
6  targetUnits: 'rpx',
7  sourceUnits: 'px',
8  declMembers: '*'
9}

Detail:

divisor(Number): 除数，转换后的值等于 pixel / divisor
multiple(Number): 倍数，转换后的值等于 pixel * multiple
decimalPlaces(Number): 小数点后保留的位数，例如, width: 100px 中的 100，将会被转换成 Number(100 / divisor * multiple).toFixed(decimalPlaces)
comment(String): 不转换 px 单位的注释，默认为 /*no*/。如果设置 comment 的值为 'not replace', width: 100px; /* not replace */ 中的 100px 将不会被转换为 rpx。
sourceUnits(String): 需要转换的单位，默认值为 px
targetUnits(String): 转换单位，默认值为 rpx，如果设置其值为 rem，px 将会被转换为 rem。
declMembers(String[]): 可转换的属性成员名单。

高级用法

1. 通过全局注释开启转换

优先级高于 options.declMembers 互斥关系

/* units-transform */

1/* units-transform */
2.main {
3  height: 1rem;
4  width: 2rem;
5  font-size: 0.28rem;
6}

2. 通过全局注释指定属性开启转换

优先级高于 options.declMembers 互斥关系

/* units-transform:height,width */

1/* units-transform:height,width */
2.main {
3  height: 1rem;
4  width: 2rem;
5  font-size: 0.28rem;
6}

3. 行内注释开启转换

与 options.declMembers 并集的关系

1.main {
2  height: 1rem;
3  width: 2rem; /* units-transform */
4  font-size: 0.36rem;
5}

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.2

/10

Last Scanned on 2025-05-05

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

Other packages similar to postcss-units-transform

Other packages similar to postcss-units-transform

postcss-units-transform

Installations

Developer Guide

No

CommonJS

14.17.5

6.14.14

Score

Pull Requests

0

1

0

1

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

noyobo

Download Statistics

GitHub Statistics

Bundle Size

2.10 kB

1.02 kB

Maintainers

Package Meta Information

Total Downloads

16,198

Dependencies

Peer Dependencies

Dev Dependencies

Required

Install

Usage

Input/Output

Example

options

高级用法

1. 通过全局注释开启转换

2. 通过全局注释指定属性开启转换

3. 行内注释开启转换

10

10

0

0

0

0

0

0

0

0

0

0

0

2.2

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads