postcss-rpx-plugin
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

postcss-rpx-plugin

Version npm GitHub package.json version GitHub

中文 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.

/* before */
.rule {
  margin: 10rpx 375rpx 0rpx 10px;
  height: 375rpx;
  background: url(icon-16rpx.jpg);
}

/* after */
.rule {
  margin: 1.33333vw 50vw 0 10px;
  height: 50vw;
  background: url(icon-16rpx.jpg);
}

Usage

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

npm i postcss postcss-loader -D

Install the plug-in

npm i postcss-rpx-plugin -D

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

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

configure

in postcss.config.js

module.exports = {
  plugins: [
    // register
    require("postcss-rpx-plugin"),
  ],
};

custom configure postcss.config.js

module.exports = {
  plugins: [
    [
      "postcss-rpx-plugin",
      {
        unit: "rpx",
        width: 750,
        precision: 5,
        outUnit: "vw",
        exclude: "",
      },
    ],
  ],
};

or in package.json

{
  "dependencies": {},
  "devDependencies": {},
  "postcss": {
    "plugins": {
      "postcss-rpx-plugin": {
        "unit": "rpx",
        "width": 750,
        "precision": 5,
        "outUnit": "vw",
        "exclude": ""
      }
    }
  }
}

Options

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

CHANGELOG

V2.0.1

  • fix readme
  • add test
    it("should exclude file", () => {
      const rules = ".rule { margin: 10rpx 375rpx 0rpx 10px; }";
      const expected = ".rule { margin: 10rpx 375rpx 0rpx 10px; }";
      const from = "c:/a/b/c/d.css";
      const pc = postcss(rpx2vm({ exclude: ".css" }));
      const processed = pc.process(rules, { from }).css;
      expect(processed).toBe(expected);
    });

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

    it("should replace the rpx unit with vw - Float", () => {
      const rules = ".rule { height: 375.0rpx; }";
      const expected = ".rule { height: 50vw; }";
      const processed = postcss(rpx2vm()).process(rules).css;
      expect(processed).toBe(expected);
    });
  • url ignore

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

V1.0.0

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

Thanks

postcss-rpxtopx

postcss-rpx-loader

Other

GitHub

You are welcome to put forward your ideas and feedback issues

Package Sidebar

Install

npm i postcss-rpx-plugin

Weekly Downloads

5

Version

2.0.1

License

ISC

Unpacked Size

50.1 kB

Total Files

7

Last publish

Collaborators

  • jawa0919