postcss-px-to-unit

An efficient PostCSS plugin for converting px units to relative length units (vw / rem). This project has been refactored with performance optimizations, providing faster processing speed and more reliable conversion results.

Install

1# npm
2npm install postcss-px-to-unit -D
3
4# yarn
5yarn add postcss-px-to-unit -D
6
7# pnpm
8pnpm add postcss-px-to-unit -D

Usage

1// webpack.config.js
2import PxToUnit from 'postcss-px-to-unit';
3
4...
5{
6  loader: 'postcss-loader',
7  plugins: [
8    PxToUnit({
9      // options
10    })
11  ]
12}
13...

1// vite.config.js
2import PxToUnit from "postcss-px-to-unit";
3
4export default defineConfig(() => ({
5  // ...
6  css: {
7    postcss: {
8      plugins: [
9        PxToUnit({
10          // options
11        }),
12      ],
13    },
14  },
15  // ...
16}));

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});

Option	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 unused)
htmlFontSize	37.5	Base html font-size (for targetUnit: 'rem')
unitPrecision	5	Unit value precision
excludeFiles	[]	Exclude file paths, supports regexp. (example: [/node_modules/])
excludeSelectors	[]	Exclude CSS selectors, supports string and regexp. (example: ['.ignore'])
excludeProperties	[]	Exclude CSS properties, supports string and regexp. (example: [/^width$/])

targetUnit: 'vw&rem' mode

If you want to use vw units but are concerned about browser compatibility, you can use the '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 browsers that don't support vw, it will automatically use rem for layout.

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

PX case sensitivity

The conversion process is case sensitive. You can use PX to avoid conversion in special cases.

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

Performance Optimizations

Compared to the original version, this project includes the following optimizations:

• More efficient CSS parsing and processing logic
• Reduction of unnecessary calculations and conversion operations
• Optimized file processing workflow, improving processing speed for large projects

License

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