npmpackage.info

Gathering detailed insights and metrics for postcss-px-to-relative-unit

postcss-px-to-relative-unit

A postcss plugin to convert px to relative length units (vw / rem)

2.0.0

MIT

JavaScript

12.57 kB

2,375 1.7

Installations

npm install postcss-px-to-relative-unit

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.17.6

NPM Version

6.14.15 Score

69.6

Supply Chain

98.8

Quality

75.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

3

Total

11

Closed

8

Issues

Open

1

Total

1

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

CSS

JavaScript (82.58%)

CSS (17.42%)

Developer

pandaGao

Download Statistics

Total Downloads

2,375

Last Day

Last Week

Last Month

Last Year

312

GitHub Statistics

MIT License

7 Stars

6 Commits

2 Forks

1 Watchers

3 Branches

1 Contributors

Updated on Mar 29, 2024

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

2.0.0

Package Id

postcss-px-to-relative-unit@2.0.0

Unpacked Size

12.57 kB

Size

4.04 kB

File Count

NPM Version

6.14.15

Node Version

14.17.6

Total Downloads

Cumulative downloads

Total Downloads

2,375

Last Day

Compared to previous day

Last Week

28.6%

Compared to previous week

Last Month

-20.9%

Compared to previous month

Last Year

-0.3%

312

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

postcss

Dev Dependencies

jest postcss prettier

postcss-px-to-relative-unit

A Postcss plugin to convert px to relative length units (vw / rem)

Install

1npm install postcss-px-to-relative-unit

Usage

1// webpack.config.js
2const pxToUnit = require('postcss-px-to-relative-unit')
3
4...
5{
6  loader: 'postcss-loader',
7  plugins: [
8    pxToUnit({
9      // options
10    })
11  ]
12}
13...

Options

1pxToUnit({
2  targetUnit: "vw",
3  ignoreThreshold: 1,
4  viewportWidth: 375,
5  viewportHeight: 667,
6  htmlFontSize: 37.5,
7  unitPrecision: 5,
8  excludeFiles: [],
9  excludeSelectors: [],
10  excludeProperties: [],
11});

Options	Default	Description
targetUnit	'vw'	target relative length unit. Support 'vw', 'rem' and 'vw&rem'
ignoreThreshold	1	px values less than this threshold won't be converted
viewportWidth	375	base viewport width (for targetUnit: 'vw' )
viewportHeight	667	base viewport height (for targetUnit: 'vw', currently useless)
htmlFontSize	37.5	base html font-size (for targetUnit: 'rem')
unitPrecision	5	unit value precision
excludeFiles	[]	exclude file path, support regexp. (example: [/node_modules/])
excludeSelectors	[]	exclude css selector, support string and regexp. (example: ['.ignore'])
excludeProperties	[]	exclude css properties, support string and regexp. (example: [/^width$/])

targetUnit: 'vw&rem'

If you want to use unit vw and also worry about browser support, you can use 'vw&rem' mode. For example:

1// Input
2.test {
3  border: 3.75px solid #fff;
4}
5
6// Output
7.test {
8  border: 0.1rem solid #fff;
9  border: 1vw solid #fff;
10}

For browser doesn't support vw, it will automatically use rem to layout.

Notice: If you need to limit max/min width of the layout, this mode is not suit for you

PX

Convert process is case sensitive, you could use PX in some edge case.

1// Input
2.test {
3  padding: 3.75px 3.75px;
4}
5
6// Output
7.test {
8  padding: 3.75px 1vw;
9}

License

This project is licensed under the MIT License - see the LICENSE file for details

No vulnerabilities found.

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

0

Code-Review

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

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

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

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

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

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/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-px-to-relative-unit

Other packages similar to postcss-px-to-relative-unit

postcss-px-to-relative-unit

Installations

Developer Guide

No

CommonJS

14.17.6

6.14.15

Score

Pull Requests

3

11

8

Issues

1

1

0

Releases

Unable to fetch releases

Languages

Developer

pandaGao

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

2,375

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

postcss-px-to-relative-unit

Install

Usage

Options

targetUnit: 'vw&rem'

PX

License

10

10

0

0

0

0

0

0

0

0

1.7

/10