{"id":30304695,"url":"https://github.com/ben-lau/postcss-pixel-to-remvw","last_synced_at":"2025-10-26T15:15:20.929Z","repository":{"id":43074633,"uuid":"400192198","full_name":"ben-lau/postcss-pixel-to-remvw","owner":"ben-lau","description":"a postcss plugin for converting px to rem and vw","archived":false,"fork":false,"pushed_at":"2024-07-26T10:39:07.000Z","size":136,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-17T07:25:31.200Z","etag":null,"topics":["css3","postcss","postcss-plugin","rem","vw"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ben-lau.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-08-26T14:10:52.000Z","updated_at":"2025-06-13T06:43:00.000Z","dependencies_parsed_at":"2025-04-13T09:15:49.543Z","dependency_job_id":null,"html_url":"https://github.com/ben-lau/postcss-pixel-to-remvw","commit_stats":null,"previous_names":["ben-lau/postcss-px-to-remvw"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/ben-lau/postcss-pixel-to-remvw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ben-lau%2Fpostcss-pixel-to-remvw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ben-lau%2Fpostcss-pixel-to-remvw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ben-lau%2Fpostcss-pixel-to-remvw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ben-lau%2Fpostcss-pixel-to-remvw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ben-lau","download_url":"https://codeload.github.com/ben-lau/postcss-pixel-to-remvw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ben-lau%2Fpostcss-pixel-to-remvw/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274718220,"owners_count":25337075,"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","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css3","postcss","postcss-plugin","rem","vw"],"created_at":"2025-08-17T07:25:23.150Z","updated_at":"2025-10-26T15:15:20.850Z","avatar_url":"https://github.com/ben-lau.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-pixel-to-remvw\n\n[![Package Quality](https://packagequality.com/badge/postcss-pixel-to-remvw.png)](https://packagequality.com/#?package=postcss-pixel-to-remvw)\n\na postcss plugin for converting px to rem and vw, also you can choose only convert one of then.\n\n**This version requires `postcss` version 8**\n\nFor postcss v7, you have to use [postcss-pixel-to-remvw v1](https://github.com/ben-lau/postcss-pixel-to-remvw/tree/older-postcss)\n\n# Install\n\n```\nnpm install postcss-pixel-to-remvw -D\n```\n\n# Example\n\n## normal\n\n- Input\n\n```css\nh1 {\n  margin: 0 0 20px 20px;\n  font-size: 32px;\n  line-height: 1.2;\n  letter-spacing: 1px;\n}\n```\n\n- Output\n\n```css\nh1 {\n  margin: 0 0 0.26667rem 0.26667rem;\n  margin: 0 0 2.66667vw 2.66667vw;\n  font-size: 0.42667rem;\n  font-size: 4.26667vw;\n  line-height: 1.2;\n  letter-spacing: 0.01333rem;\n  letter-spacing: 0.13333vw;\n}\n```\n\n# Disable convert marker\n\n**Now, the disabled convert marker does not have to be at the top of the file, you can place it outside any root-level node**\n\n## not convert all\n\n- Input\n\n```css\n/*disable-convert*/\nh1 {\n  margin: 0 0 20px 20px;\n  font-size: 32px;\n  line-height: 1.2;\n  letter-spacing: 1px;\n}\n```\n\n- Output\n\n```css\n/*disable-convert*/\nh1 {\n  margin: 0 0 20px 20px;\n  font-size: 32px;\n  line-height: 1.2;\n  letter-spacing: 1px;\n}\n```\n\n## not convert to vw (compact with the pc)\n\n- Input\n\n```css\n/*disable-convert-vw*/\nh1 {\n  margin: 0 0 20px 20px;\n  font-size: 32px;\n  line-height: 1.2;\n  letter-spacing: 1px;\n}\n```\n\n- Output\n\n```css\n/*disable-convert-vw*/\nh1 {\n  margin: 0 0 0.26667rem 0.26667rem;\n  font-size: 0.42667rem;\n  line-height: 1.2;\n  letter-spacing: 0.01333rem;\n}\n```\n\n## not convert some\n\n- Input\n\n```css\n/*disable-convert-vw*/\nh1 {\n  margin: 0 0 20px 20px;\n  font-size: 32px; /*no*/\n  line-height: 1.2;\n  letter-spacing: 1px;\n}\n```\n\n- Output\n\n```css\n/*disable-convert-vw*/\nh1 {\n  margin: 0 0 0.26667rem 0.26667rem;\n  font-size: 32px; /*no*/\n  line-height: 1.2;\n  letter-spacing: 0.01333rem;\n}\n```\n\n# Usage\n\n## In Webpack\n\n```javascript\nexport default {\n  module: {\n    loaders: [\n      {\n        test: /\\.css$/,\n        loader: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'postcss-loader',\n            options: {\n              postcssOptions: {\n                plugins: [\n                  [\n                    'postcss-pixel-to-remvw',\n                    {\n                      // Options\n                    },\n                  ],\n                ],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## common usage\n\n```javascript\nconst { writeFile, readFileSync } = require('fs');\nconst postcss = require('postcss');\nconst pxtoremvw = require('postcss-pixel-to-remvw');\n\nconst processedCss = postcss(pxtoremvw()).process(readFileSync('test.css')).css;\n\nwriteFile('test.remvw.css', processedCss, err =\u003e {\n  if (err) throw err;\n  console.log('Rem file written.');\n});\n```\n\n# Configuration\n\ndefault:\n\n```javascript\n{\n  baseSize: {\n    rem: 75, // 10rem = 750px\n    vw: 7.5, // 100vw = 750px\n  },\n  unitPrecision: 5,\n  selectorBlackList: [],\n  propList: ['*'],\n  minPixelValue: 0,\n  exclude: null,\n  // Single rule does not convert\n  keepRuleComment: 'no',\n  // The entire file is not converted\n  commentOfDisableAll: 'disable-convert',\n  // The entire file is not converted to rem\n  commentOfDisableRem: 'disable-convert-rem',\n  // nThe entire file is not converted to vw\n  commentOfDisableVW: 'disable-convert-vw',\n};\n```\n\n- `baseSize` {Object} the base size config, default is { rem: 75, vw: 7.5 }\n  - `rem` {Number | undefined} the root element font size, means 1rem = [your setting] px; It won't convert to rem while `rem` is undefined\n  - `vw` {Number | undefined} the base ratio for viewport width, means 1vw = [your setting] px; It won't convert to vw while `vw` is undefined\n- `unitPrecision` {Number} the digital accurarcy of converted stylesheet\n- `selectorBlackList` {string[]} The selectors list to ignore conversion\n  - If value is string, it checks to see if selector contains the string.['body'] will match .body-class\n  - If value is regexp, it checks to see if the selector matches the regexp. [/^body$/] will match body but not .body\n- `propList` {string[]} The properties that can do the conversion.\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- `minPixelValue` {Number} the minimum pixel value to replace\n- `exclude` {String | Regexp | ()=\u003eboolean} the file path to ignore conversion\n  - If value is string, it checks to see if file path contains the string.\n    - 'exclude' will match \\project\\postcss-pxtorem\\exclude\\path\n  - If value is regexp, it checks to see if file path matches the regexp.\n    - /exclude/i will match \\project\\postcss-pxtorem\\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- `keepRuleComment` {String} a comment stating that the property will not be converted\n- `commentOfDisableAll` {String} a comment stating that the whole file will not be converted\n- `commentOfDisableRem` {String} a comment stating that the whole file will not be converted to rem,but keep convert to vw\n- `commentOfDisableVW` {String} a comment stating that the whole file will not be converted to vw,but keep convert to rem\n\n# TODO\n\n- [x] compact with older version of postcss\n- [x] unit test\n  - [x] baseSize\n  - [x] keepRuleComment\n  - [x] commentOfDisableAll\n  - [x] commentOfDisableRem\n  - [x] commentOfDisableVW\n  - [ ] unitPrecision\n  - [ ] selectorBlackList\n  - [ ] propList\n  - [ ] minPixelValue\n  - [ ] exclude\n\nThanks to [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fben-lau%2Fpostcss-pixel-to-remvw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fben-lau%2Fpostcss-pixel-to-remvw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fben-lau%2Fpostcss-pixel-to-remvw/lists"}