{"id":13781946,"url":"https://github.com/Genuifx/postcss-pxtorpx-pro","last_synced_at":"2025-05-11T15:32:07.392Z","repository":{"id":38424994,"uuid":"245570396","full_name":"Genuifx/postcss-pxtorpx-pro","owner":"Genuifx","description":"转换px单位为rpx，并允许指定任意单位及其转换函数，支持指定黑名单prop。 A CSS post-processor that converts px to rpx or any other unit.","archived":false,"fork":false,"pushed_at":"2023-07-18T21:11:32.000Z","size":452,"stargazers_count":20,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T04:48:24.628Z","etag":null,"topics":["mini-app","miniprogram","postcss","postcss-plugin","postcss-plugins-px2rem","rpx","weapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Genuifx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-03-07T04:50:55.000Z","updated_at":"2025-03-22T15:51:14.000Z","dependencies_parsed_at":"2024-01-07T00:08:25.616Z","dependency_job_id":null,"html_url":"https://github.com/Genuifx/postcss-pxtorpx-pro","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Genuifx%2Fpostcss-pxtorpx-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Genuifx%2Fpostcss-pxtorpx-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Genuifx%2Fpostcss-pxtorpx-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Genuifx%2Fpostcss-pxtorpx-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Genuifx","download_url":"https://codeload.github.com/Genuifx/postcss-pxtorpx-pro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253588634,"owners_count":21932291,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mini-app","miniprogram","postcss","postcss-plugin","postcss-plugins-px2rem","rpx","weapp"],"created_at":"2024-08-03T18:01:31.204Z","updated_at":"2025-05-11T15:32:07.007Z","avatar_url":"https://github.com/Genuifx.png","language":"JavaScript","funding_links":[],"categories":["工具"],"sub_categories":[],"readme":"# postcss-pxtorpx-pro ![Node.js CI](https://github.com/Genuifx/postcss-pxtorpx-pro/workflows/Node.js%20CI/badge.svg) [![npm version](https://badge.fury.io/js/postcss-pxtorpx-pro.svg)](https://badge.fury.io/js/postcss-pxtorpx-pro)\n\n本项目从[pxtorem](https://github.com/cuth/postcss-pxtorem)基础上修改而来，转换px单位为rpx，并允许指定任意单位及其转换函数，支持指定黑名单prop。\n\n由于可以指定需要转换的单位和转化函数，故该插件理论上可以将px单位转为任意单位。默认转为rpx单位。\n\nThis repo is fork from [pxtorem](https://github.com/cuth/postcss-pxtorem), but more powerful than it. This plugin can transform pixels unit to any unit theoretically, which default transform to `rpx` unit.\n\n`rpx` is the unit make for developing mini-program, see [@wxa](https://webank.gitee.io/wxa/)\n\nA plugin for [PostCSS](https://github.com/ai/postcss) that generates rpx units from pixel units.\n\n## Install\n\n```shell\n$ npm install postcss-pxtorpx-pro --save-dev\n```\n\n## Usage\n\n像素是web开发中最常用的单位，但在做响应式页面开发之时稍显无力，开发者需要编写大量适配代码。故在移动端开发中我们常搭配rem, vw等单位使用，而在开发各类小程序中，我们又常用rpx取代vw。\n\nPixels are the easiest unit to use (*opinion*). The only issue with them is that they don't let browsers change the default font size of 16. This script converts every px value to a rem from the properties you choose to allow the browser to set the font size.\n\n\n### Input/Output\n\n*With the default settings, only font related properties are targeted.*\n\n```css\n// input\nh1 {\n    margin: 0 0 20px;\n    font-size: 32px;\n    line-height: 1.2;\n    letter-spacing: 1px;\n}\n\n// output\nh1 { \n  margin: 0 0 40rpx; \n  font-size: 64rpx; \n  line-height: 1.2; \n  letter-spacing: 2rpx; \n}\n```\n\n### Example\n\n```js\nvar fs = require('fs');\nvar postcss = require('postcss');\nvar pxtorpx = require('postcss-pxtorpx-pro');\nvar css = fs.readFileSync('main.css', 'utf8');\nvar options = {\n    replace: false\n};\nvar processedCss = postcss(pxtorpx(options)).process(css).css;\n\nfs.writeFile('main-rpx.css', processedCss, function (err) {\n  if (err) {\n    throw err;\n  }\n  console.log('Rpx file written.');\n});\n```\n\n### options\n\nType: `Object | Null`  \nDefault:\n```js\n{\n  // 转化的单位\n  unit: 'rpx',\n  // 单位精度\n  unitPrecision: 5,\n  // 不需要处理的css选择器\n  selectorBlackList: [],\n  // 不需要转化的css属性\n  propBlackList: [], \n  // 直接修改px，还是新加一条css规则\n  replace: true,\n  // 是否匹配媒介查询的px\n  mediaQuery: false,\n  // 需要转化的最小的pixel值，低于该值的px单位不做转化\n  minPixelValue: 0,\n  // 不处理的文件\n  exclude: null,\n  // 转化函数\n  // 默认设计稿按照750宽，2倍图的出\n  transform: (x) =\u003e 2*x\n}\n```\n- `unit`(String) The unit transform to. default `rpx`.\n- `unitPrecision` (Number) The decimal numbers to allow the rpx units to grow to.\n- `transform` (Function) function to transform pixels to other unit. default `(x) =\u003e 2 * x`.\n- `propBlackList` (Array) The properties that can change from px to rpx.\n    - Values need to be exact matches.\n    - Use wildcard `*` to enable all properties. Example: `['*']`\n    - Use `*` at the start or end of a word. (`['*position*']` will match `background-position-y`)\n    - Use `!` to not match a property. Example: `['*', '!letter-spacing']`\n    - Combine the \"not\" prefix with the other prefixes. Example: `['*', '!font*']` \n- `selectorBlackList` (Array) The selectors to ignore and leave as px.\n    - If value is string, it checks to see if selector contains the string.\n        - `['body']` will match `.body-class`\n    - If value is regexp, it checks to see if the selector matches the regexp.\n        - `[/^body$/]` will match `body` but not `.body`\n- `replace` (Boolean) Replaces rules containing rpxs instead of adding fallbacks.\n- `mediaQuery` (Boolean) Allow px to be converted in media queries.\n- `minPixelValue` (Number) Set the minimum pixel value to replace.\n- `exclude` (String, Regexp, Function) The file path to ignore and leave as px.\n    - If value is string, it checks to see if file path contains the string.\n        - `'exclude'` will match `\\project\\postcss-pxtorpx\\exclude\\path`\n    - If value is regexp, it checks to see if file path matches the regexp.\n        - `/exclude/i` will match `\\project\\postcss-pxtorpx\\exclude\\path`\n    - If value is function, you can use exclude function to return a true and the file will be ignored.\n        - the callback will pass the file path as  a parameter, it should returns a Boolean result.\n        - `function (file) { return file.indexOf('exclude') !== -1; }`\n\n### Use with gulp-postcss and autoprefixer\n\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar autoprefixer = require('autoprefixer');\nvar pxtorpx = require('postcss-pxtorpx-pro');\n\ngulp.task('css', function () {\n\n    var processors = [\n        autoprefixer({\n            browsers: 'last 1 version'\n        }),\n        pxtorpx({\n            replace: false\n        })\n    ];\n\n    return gulp.src(['build/css/**/*.css'])\n        .pipe(postcss(processors))\n        .pipe(gulp.dest('build/css'));\n});\n```\n\n### A message about ignoring properties\nCurrently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration.\n\n```css\n// `px` is converted to `rem`\n.convert {\n    font-size: 16px; // converted to 1rem\n}\n\n// `Px` or `PX` is ignored by `postcss-pxtorpx` but still accepted by browsers\n.ignore {\n    border: 1Px solid; // ignored\n    border-width: 2PX; // ignored\n}\n```\n\n\n### REF\n\n开发本插件之前，没有留意到已经有童鞋做了一个[类似的](https://github.com/dnxbf321/postcss-pxtorpx), 不过看下功能，本插件应该更加强大一些，故取其同名加pro。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGenuifx%2Fpostcss-pxtorpx-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGenuifx%2Fpostcss-pxtorpx-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGenuifx%2Fpostcss-pxtorpx-pro/lists"}