{"id":16040005,"url":"https://github.com/sonofmagic/postcss-rem-to-responsive-pixel","last_synced_at":"2025-03-16T07:32:31.392Z","repository":{"id":41380342,"uuid":"431874337","full_name":"sonofmagic/postcss-rem-to-responsive-pixel","owner":"sonofmagic","description":"Convert rem units to px or rpx units using PostCSS. Based on postcss-pxtorem and postcss-rem-to-pixel, and rewrite with typescript, and support Postcss8","archived":false,"fork":false,"pushed_at":"2025-02-04T06:43:06.000Z","size":522,"stargazers_count":17,"open_issues_count":12,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-27T05:51:09.951Z","etag":null,"topics":["css","pixel","postcss","postcss-plugin","rem","uni","uni-app","wechat"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonofmagic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["sonofmagic"],"custom":["https://github.com/sonofmagic/sponsors"]}},"created_at":"2021-11-25T14:28:26.000Z","updated_at":"2024-10-19T10:56:31.000Z","dependencies_parsed_at":"2023-12-27T10:21:47.182Z","dependency_job_id":"8eb0279d-c489-4e2c-b5e0-15076e1a6821","html_url":"https://github.com/sonofmagic/postcss-rem-to-responsive-pixel","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":0.2777777777777778,"last_synced_commit":"522273b6386f9cee07fcd2d2ecc5ed0bb39c3813"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"sonofmagic/npm-lib-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Fpostcss-rem-to-responsive-pixel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Fpostcss-rem-to-responsive-pixel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Fpostcss-rem-to-responsive-pixel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Fpostcss-rem-to-responsive-pixel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonofmagic","download_url":"https://codeload.github.com/sonofmagic/postcss-rem-to-responsive-pixel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243806050,"owners_count":20350775,"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":["css","pixel","postcss","postcss-plugin","rem","uni","uni-app","wechat"],"created_at":"2024-10-08T23:09:24.894Z","updated_at":"2025-03-16T07:32:31.058Z","avatar_url":"https://github.com/sonofmagic.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sonofmagic","https://github.com/sonofmagic/sponsors"],"categories":[],"sub_categories":[],"readme":"# postcss-rem-to-responsive-pixel\n\n\u003e [!IMPORTANT]\n\u003e Code has been moved to [sonofmagic/postcss-plugins](https://github.com/sonofmagic/postcss-plugins), this repo is archived!\n\nA plugin for [PostCSS](https://github.com/ai/postcss) that generates px or rpx units from rem units.\n\n- Rewrite with `typescript` and well tested.\n- TransformUnit Support `px` and `rpx`!\n\n\u003e If you still use `postcss@7.x`, you should use `postcss-rem-to-responsive-pixel@5.x`\n\u003e [See version 6 breaking changes](./v6.md)\n\n## Install\n\n```shell\nnpm i -D postcss-rem-to-responsive-pixel\nyarn add -D postcss-rem-to-responsive-pixel\npnpm i -D postcss-rem-to-responsive-pixel\n```\n\n## Usage\n\n### Use with postcss.config.js\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: [\n    // for example\n    // require('autoprefixer'),\n    // require('tailwindcss'),\n    require('postcss-rem-to-responsive-pixel')({\n      rootValue: 32,\n      propList: ['*'],\n      transformUnit: 'rpx',\n    }),\n  ],\n}\n```\n\nWhen you use `tailwindcss` to write your website or miniprogram, the default unit is `rem`, so sometimes we have to transform our unit to `px` or `rpx`.\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('tailwindcss'),\n    require('postcss-rem-to-responsive-pixel')({\n      rootValue: 32,\n      propList: ['*'],\n      transformUnit: 'rpx',\n    }),\n  ],\n}\n```\n\n## Input/Output\n\n_With the default settings, only font related properties are targeted._\n\n```scss\n// input\nh1 {\n  margin: 0 0 20px;\n  font-size: 2rem;\n  line-height: 1.2;\n  letter-spacing: 0.0625rem;\n}\n\n// output\nh1 {\n  margin: 0 0 20px;\n  font-size: 64rpx;\n  line-height: 1.2;\n  letter-spacing: 2rpx;\n}\n```\n\n## Options\n\nType: `Object | Null`  \nDefault:\n\n```js\n{\n  rootValue: 16,\n  unitPrecision: 5,\n  selectorBlackList: [],\n  propList: ['font', 'font-size', 'line-height', 'letter-spacing'],\n  replace: true,\n  mediaQuery: false,\n  minRemValue: 0,\n  exclude: [/node_modules/i],\n  transformUnit: 'px',\n  disabled: false\n}\n```\n\n### rootValue\n\nType: `number`\n\nThe root element font size.\n\n## unitPrecision\n\nType: `number`\n\nThe decimal precision px units are allowed to use, floored (rounding down on half).\n\n## propList\n\nType: `(string | RegExp)[]`\n\nThe properties that can change from rem to px.\n\n## selectorBlackList\n\nType: `(string | RegExp)[]`\n\nThe selectors to ignore and leave as rem.\n\n## replace\n\nType: `boolean`\n\nreplaces rules containing rems instead of adding fallbacks.\n\n## mediaQuery\n\nType: `boolean`\n\nAllow rem to be converted in media queries.\n\n## minRemValue\n\nType: `number`\n\nSet the minimum rem value to replace.\n\n## exclude\n\nType: `(string | RegExp)[] | ((filePath: string) =\u003e boolean)`\n\nThe file path to ignore and leave as px.\n\n## transformUnit\n\nType: `'px' | 'rpx'`\n\nThe transform output unit.\n\n## disabled\n\nType: `boolean`\n\nIf disable this plugin.\n\n### A message about ignoring properties\n\nCurrently, the easiest way to have a single property ignored is to use a capital in the rem unit declaration.\n\n```css\n// `rem` is converted to `px`\n.convert {\n  font-size: 1rem; // converted to 16px\n}\n\n// `Rem` or `REM` is ignored by `postcss-rem-to-pixel` but still accepted by browsers\n.ignore {\n  border: 1rem solid; // ignored\n  border-width: 2rem; // ignored\n}\n```\n\nThanks to the author of `postcss-rem-to-pixel` and `postcss-pxtorem`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonofmagic%2Fpostcss-rem-to-responsive-pixel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonofmagic%2Fpostcss-rem-to-responsive-pixel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonofmagic%2Fpostcss-rem-to-responsive-pixel/lists"}