{"id":51617632,"url":"https://github.com/minko-fe/postcss-pxtoviewport","last_synced_at":"2026-07-12T15:02:54.849Z","repository":{"id":64425217,"uuid":"529176654","full_name":"minko-fe/postcss-pxtoviewport","owner":"minko-fe","description":"A postcss plugin that converts px to viewport units (vw, vh, vmin, vmax).  px 转 viewport 单位的 postcss 插件","archived":false,"fork":false,"pushed_at":"2024-05-11T03:55:57.000Z","size":595,"stargazers_count":9,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-12T01:24:13.590Z","etag":null,"topics":["css","postcss","postcss-plugin","postcss-px-to-viewport","pxtoviewport","viewport"],"latest_commit_sha":null,"homepage":"https://hemengke1997.github.io/postcss-pxtoviewport/","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/minko-fe.png","metadata":{"files":{"readme":"README-en.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING-en.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-26T08:26:44.000Z","updated_at":"2024-10-16T01:59:52.000Z","dependencies_parsed_at":"2024-05-12T14:47:05.195Z","dependency_job_id":null,"html_url":"https://github.com/minko-fe/postcss-pxtoviewport","commit_stats":null,"previous_names":["minko-fe/postcss-pxtoviewport"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/minko-fe/postcss-pxtoviewport","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtoviewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtoviewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtoviewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtoviewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minko-fe","download_url":"https://codeload.github.com/minko-fe/postcss-pxtoviewport/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtoviewport/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35394859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-12T02:00:06.386Z","response_time":87,"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":["css","postcss","postcss-plugin","postcss-px-to-viewport","pxtoviewport","viewport"],"created_at":"2026-07-12T15:02:54.076Z","updated_at":"2026-07-12T15:02:54.840Z","avatar_url":"https://github.com/minko-fe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-pxtoviewport\n\n**English** | [中文](./README.md)\n\nA plugin for [PostCSS](https://github.com/ai/postcss) that generates viewport units (vw, vh, vmin, vmax) from pixel units.\n\n**If you don't need the following new features, you can use the official library: [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport)**\n\n## ✨ [New Features](#-about-new-features)\n\n- Dynamically override any `postcss-pxtoviewport` supported option in style files\n- Dynamically disable transforming rem in style files.\n- **Compatible with vite, _Solved the problem of px to rem failing after vite build_**.\n\n## 🔧 Install\n\n```bash\npnpm install postcss @minko-fe/postcss-pxtoviewport -D\n```\n\n## ✍️ Usage\n\n### postcss.config.js\n\n#### example\n\n```js\n// postcss.config.js\nimport pxtoviewport from '@minko-fe/postcss-pxtoviewport'\n\nexport default {\n  plugins: [\n    pxtoviewport({\n      viewportWidth: 375,\n      selectorBlackList: ['some-class'],\n      propList: ['*'],\n      atRules: ['media'],\n      // ...\n    }),\n  ],\n}\n```\n\n### options\n\n| Name              | Type                                                                | Default                                                | Description                                                                                                        |\n| ----------------- | ------------------------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |\n| unitToConvert     | `string`                                                            | `px`                                                   | unit to convert, by default, it is px                                                                              |\n| viewportWidth     | `number` \\| `((input: Input) =\u003e number)`                            | 375                                                    | The width of the viewport                                                                                          |\n| unitPrecision     | `number`                                                            | 5                                                      | The decimal numbers to allow the vw units to grow to                                                               |\n| propList          | `string[]`                                                          | `['*']`                                                | The properties that can change from px to vw. Refer to：[propList](#propList)                                      |\n| viewportUnit      | `string`                                                            | `vw`                                                   | Expected units                                                                                                     |\n| fontViewportUnit  | `string`                                                            | `vw`                                                   | Expected units for font                                                                                            |\n| propList          | `string[]`                                                          | ['font', 'font-size', 'line-height', 'letter-spacing'] | The properties that can change from px to viewport. Refer to: [propList](#propList)                                |\n| selectorBlackList | `(string \\| RegExp)[]`                                              | []                                                     | The selectors to ignore and leave as px. Refer to: [selectorBlackList](#selectorBlackList)                         |\n| replace           | `boolean`                                                           | true                                                   | replaces rules containing vw instead of adding fallbacks                                                           |\n| atRules           | `boolean` \\| `string[]`                                             | false                                                  | Allow px to be converted in at-rules. Refer to [At-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) |\n| minPixelValue     | `number`                                                            | 0                                                      | Set the minimum pixel value to replace.                                                                            |\n| include           | `string` \\| `RegExp` \\| `((filePath: string) =\u003e boolean)` \\| `null` | null                                                   | The file path to convert px to viewport. Higher priority than `exclude`. Same rules as `exclude`                   |\n| exclude           | `string` \\| `RegExp` \\| `((filePath: string) =\u003e boolean) \\| null`   | /node_modules/i                                        | The file path to ignore and leave as px. Refer to: [exclude](#exclude)                                             |\n| disable           | `boolean`                                                           | false                                                  | disable plugin                                                                                                     |\n| convertUnit       | `ConvertUnit` \\| `ConvertUnit[]` \\| false \\| null                   | null                                                   | convert unit when plugin process end                                                                               |\n\n#### propList\n\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\n#### selectorBlackList\n\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\n#### exclude\n\n- If value is string, it checks to see if file path contains the string.\n  - `'exclude'` will match `\\project\\postcss-pxtoviewport\\exclude\\path`\n- If value is regexp, it checks to see if file path matches the regexp.\n  - `/exclude/i` will match `\\project\\postcss-pxtoviewport\\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.includes('exclude') }`\n\n## ✨ About new features\n\n### ⚙️ Dynamically set plugin options in css\n\n#### disable plugin\n\n```css\n/* pxtoviewport?disable=true */\n.rule {\n  font-size: 15px; // 15px\n}\n```\n\nIf you write `15PX` (as long as it's not `px`), the plugin also ignores it, because `unitToConvert` defaults to `px`\nIf you want to use `PX` to ignore and want the final unit to be `px`, you can:\n\n```js\n// postcss.config.js\nimport pxtoviewport from '@minko-fe/postcss-pxtoviewport'\n\nexport default {\n  plugins: [\n    pxtoviewport({\n      convertUnit: {\n        source: /px$/i,\n        target: 'px',\n      },\n    }),\n  ],\n}\n```\n\n#### set viewportWidth\n\n```css\n/* pxtoviewport?viewportWidth=750 */\n.rule {\n  font-size: 30px; // 4vw\n}\n```\n\n🌰 The above is just a simple example, you can set any of the options supported by `postcss-pxtoviewport` in the css file\n\nYou may have seen that the css comment is very much like the browser url?😼.\nThat's right. For the specification, just refer to: [query-string](https://github.com/sindresorhus/query-string)\n\n#### example\n\n```css\n/* pxtoviewport?disable=false\u0026viewportWidth=750\u0026propList[]=*\u0026replace=false\u0026selectorBlackList[]=/some-class/i */\n```\n\n### disable the next line in css file\n\n```css\n.rule {\n  /* pxtoviewport-disable-next-line */\n  font-size: 15px; // 15px\n}\n```\n\n## ❤️ Thanks\n\n[postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport)\n\n[@tcstory/postcss-px-to-viewport](https://github.com/tcstory/postcss-px-to-viewport)\n\n## 👀 Related\n\nA CSS post-processor that converts px to rem: [postcss-pxtorem](https://github.com/hemengke1997/postcss-pxtorem)\n\n## 💕 Support\n\n**If this has helped you, please don't hesitate to give a STAR, thanks! 😎**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminko-fe%2Fpostcss-pxtoviewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminko-fe%2Fpostcss-pxtoviewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminko-fe%2Fpostcss-pxtoviewport/lists"}