postcss-rpx-plugin

中文 README

Based on postcss A plug-in for converting rpx units in CSS into VW units. It is applicable to the design draft with fixed width and uncertain height in the mobile end. You can also set the width and matching unit by yourself.

1/* before */
2.rule {
3  margin: 10rpx 375rpx 0rpx 10px;
4  height: 375rpx;
5  background: url(icon-16rpx.jpg);
6}
7
8/* after */
9.rule {
10  margin: 1.33333vw 50vw 0 10px;
11  height: 50vw;
12  background: url(icon-16rpx.jpg);
13}

Usage

First install postcss-loader And postcss。 CLI with CSS loader integrated can skip this step

1npm i postcss postcss-loader -D

Install the plug-in

1npm i postcss-rpx-plugin -D

Please use the version of postcss@7 postcss@6 postcss@5

1# postcss@7 postcss@6 postcss@5
2npm i postcss-rpx-plugin@1.0.3 -D

configure

in postcss.config.js

1module.exports = {
2  plugins: [
3    // register
4    require("postcss-rpx-plugin"),
5  ],
6};

custom configure postcss.config.js

1module.exports = {
2  plugins: [
3    [
4      "postcss-rpx-plugin",
5      {
6        unit: "rpx",
7        width: 750,
8        precision: 5,
9        outUnit: "vw",
10        exclude: "",
11      },
12    ],
13  ],
14};

or in package.json

1{
2  "dependencies": {},
3  "devDependencies": {},
4  "postcss": {
5    "plugins": {
6      "postcss-rpx-plugin": {
7        "unit": "rpx",
8        "width": 750,
9        "precision": 5,
10        "outUnit": "vw",
11        "exclude": ""
12      }
13    }
14  }
15}

Options

1const unit = options?.unit || "rpx"; // unit
2const width = options?.width || 750; // ui design width
3const precision = options?.precision || 5; // decimal places
4const outUnit = options?.outUnit || "vw"; //  out unit
5const exclude = options?.exclude || ""; // exclude some file,support regex

CHANGELOG

V2.0.1

• fix readme
• add test

  1it("should exclude file", () => {
  2  const rules = ".rule { margin: 10rpx 375rpx 0rpx 10px; }";
  3  const expected = ".rule { margin: 10rpx 375rpx 0rpx 10px; }";
  4  const from = "c:/a/b/c/d.css";
  5  const pc = postcss(rpx2vm({ exclude: ".css" }));
  6  const processed = pc.process(rules, { from }).css;
  7  expect(processed).toBe(expected);
  8});

V2.0.0

• support postcss@8

V1.0.3

• fix build options?.unit error
• fix @type ?

V1.0.2

• add @type

V1.0.1

• Float rpx

  1it("should replace the rpx unit with vw - Float", () => {
  2  const rules = ".rule { height: 375.0rpx; }";
  3  const expected = ".rule { height: 50vw; }";
  4  const processed = postcss(rpx2vm()).process(rules).css;
  5  expect(processed).toBe(expected);
  6});

• url ignore

  1it("should not replace values in `url()`", () => {
  2  const rules = ".rule { background: url(icon-16rpx.jpg); }";
  3  const expected = ".rule { background: url(icon-16rpx.jpg); }";
  4  const processed = postcss(rpx2vm()).process(rules).css;
  5  expect(processed).toBe(expected);
  6});

V1.0.0

• Int rpx

  1it("should replace the rpx unit with vw - Int", () => {
  2  const rules = ".rule { margin: 10rpx 375rpx 0rpx 10px; }";
  3  const expected = ".rule { margin: 1.33333vw 50vw 0 10px; }";
  4  const processed = postcss(rpx2vm()).process(rules).css;
  5  expect(processed).toBe(expected);
  6});

Thanks

postcss-rpxtopx

postcss-rpx-loader

Other

You are welcome to put forward your ideas and feedback issues