{"_attachments":{},"_id":"postcss-px-to-viewport","_rev":"283269-61f1bf3b2c1293059b1fbc22","author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","dist-tags":{"latest":"1.1.1"},"license":"MIT","maintainers":[{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},{"name":"koderfunk","email":"koderfunk@gmail.com"}],"name":"postcss-px-to-viewport","readme":"# postcss-px-to-viewport\n[![NPM version](https://badge.fury.io/js/postcss-px-to-viewport.svg)](http://badge.fury.io/js/postcss-px-to-viewport)\n\nEnglish | [中文](README_CN.md) \n\nA plugin for [PostCSS](https://github.com/postcss/postcss) that generates viewport units (vw, vh, vmin, vmax) from pixel units.\n\n<a href=\"https://evrone.com/?utm_source=postcss-px-to-viewport\">\n  <img src=\"https://user-images.githubusercontent.com/417688/34437029-dbfe4ee6-ecab-11e7-9d80-2b274b4149b3.png\"\n       alt=\"Sponsored by Evrone\" width=\"231\">\n</a>\n\n## Demo\n\nIf your project involves a fixed width, this script will help to convert pixels into viewport units.\n\n### Input\n\n```css\n.class {\n  margin: -10px .5vh;\n  padding: 5vmin 9.5px 1px;\n  border: 3px solid black;\n  border-bottom-width: 1px;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.class2 {\n  border: 1px solid black;\n  margin-bottom: 1px;\n  font-size: 20px;\n  line-height: 30px;\n}\n\n@media (min-width: 750px) {\n  .class3 {\n    font-size: 16px;\n    line-height: 22px;\n  }\n}\n```\n\n### Output\n```css\n.class {\n  margin: -3.125vw .5vh;\n  padding: 5vmin 2.96875vw 1px;\n  border: 0.9375vw solid black;\n  border-bottom-width: 1px;\n  font-size: 4.375vw;\n  line-height: 6.25vw;\n}\n\n.class2 {\n  border: 1px solid black;\n  margin-bottom: 1px;\n  font-size: 6.25vw;\n  line-height: 9.375vw;\n}\n\n@media (min-width: 750px) {\n  .class3 {\n    font-size: 16px;\n    line-height: 22px;\n  }\n}\n```\n\n## Getting Started\n\n### Installation\nAdd via npm\n```\n$ npm install postcss-px-to-viewport --save-dev\n```\nor yarn\n```\n$ yarn add -D postcss-px-to-viewport\n```\n\n### Usage\n\nDefault Options:\n```js\n{\n  unitToConvert: 'px',\n  viewportWidth: 320,\n  unitPrecision: 5,\n  propList: ['*'],\n  viewportUnit: 'vw',\n  fontViewportUnit: 'vw',\n  selectorBlackList: [],\n  minPixelValue: 1,\n  mediaQuery: false,\n  replace: true,\n  exclude: [],\n  landscape: false,\n  landscapeUnit: 'vw',\n  landscapeWidth: 568\n}\n```\n- `unitToConvert` (String) unit to convert, by default, it is px.\n- `viewportWidth` (Number) The width of the viewport.\n- `unitPrecision` (Number) The decimal numbers to allow the vw units to grow to.\n- `propList` (Array) The properties that can change from px to vw.\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- `viewportUnit` (String) Expected units.\n- `fontViewportUnit` (String) Expected units for 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- `minPixelValue` (Number) Set the minimum pixel value to replace.\n- `mediaQuery` (Boolean) Allow px to be converted in media queries.\n- `replace` (Boolean) replaces rules containing vw instead of adding fallbacks.\n- `exclude` (Array or Regexp) Ignore some files like 'node_modules'\n    - If value is regexp, will ignore the matches files.\n    - If value is array, the elements of the array are regexp.\n- `landscape` (Boolean) Adds `@media (orientation: landscape)` with values converted via `landscapeWidth`.\n- `landscapeUnit` (String) Expected unit for `landscape` option\n- `landscapeWidth` (Number) Viewport width for landscape orientation.\n\n#### Use with gulp-postcss\n\nadd to your `gulpfile.js`:\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar pxtoviewport = require('postcss-px-to-viewport');\n\ngulp.task('css', function () {\n\n    var processors = [\n        pxtoviewport({\n            viewportWidth: 320,\n            viewportUnit: 'vmin'\n        })\n    ];\n\n    return gulp.src(['build/css/**/*.css'])\n        .pipe(postcss(processors))\n        .pipe(gulp.dest('build/css'));\n});\n```\n\n#### Use with PostCss configuration file\n\nadd to your `postcss.config.js`\n```js\nmodule.exports = {\n  plugins: {\n    ...\n    'postcss-px-to-viewport': {\n      // options\n    }\n  }\n}\n```\n\n## Running the tests\n\nIn order to run tests, you need to install `jasmine-node` globally:\n```\n$ npm install jasmine-node -g\n```\nThen run the tests via npm script:\n```\n$ npm run test\n```\n\n## Contributing\n\nPlease read [Code of Conduct](CODE-OF-CONDUCT.md) and [Contributing Guidelines](CONTRIBUTING.md) for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/evrone/postcss-px-to-viewport/tags). \n\n## Changelog\n\nThe changelog is [here](CHANGELOG.md).\n\n## Authors\n\n* [Dmitry Karpunin](https://github.com/KODerFunk) - *Initial work*\n* [Ivan Bunin](https://github.com/chernobelenkiy)\n\nSee also the list of [contributors](https://github.com/evrone/postcss-px-to-viewport/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## Acknowledgments\n\n* Hat tip to https://github.com/cuth/postcss-pxtorem/ for inspiring us for this project.\n","time":{"created":"2022-01-26T21:38:03.070Z","modified":"2023-07-31T02:03:45.303Z","1.1.1":"2019-07-09T05:53:14.271Z","1.1.0":"2019-02-05T11:16:42.966Z","1.0.0":"2019-01-29T07:15:08.099Z","0.0.3":"2016-08-23T10:20:08.956Z","0.0.2":"2016-03-01T15:20:35.701Z","0.0.1":"2016-01-19T09:19:45.564Z"},"versions":{"1.1.1":{"name":"postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"1.1.1","author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/evrone/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/evrone/postcss-px-to-viewport/issues"},"homepage":"https://github.com/evrone/postcss-px-to-viewport","main":"index.js","scripts":{"test":"jasmine-node spec"},"devDependencies":{"jasmine-node":"~1.11.0"},"keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"dependencies":{"object-assign":">=4.0.1","postcss":">=5.0.2"},"gitHead":"40da73adf24d85693aa0650766c14c768d69569d","_id":"postcss-px-to-viewport@1.1.1","_nodeVersion":"12.5.0","_npmVersion":"6.9.0","dist":{"shasum":"a25ca410b553c9892cc8b525cc710da47bf1aa55","size":9640,"noattachment":false,"tarball":"https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz","integrity":"sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ=="},"maintainers":[{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},{"name":"koderfunk","email":"koderfunk@gmail.com"}],"_npmUser":{"name":"koderfunk","email":"koderfunk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-px-to-viewport_1.1.1_1562651594147_0.5033156177155342"},"_hasShrinkwrap":false,"publish_time":1562651594271,"_cnpm_publish_time":1562651594271,"_cnpmcore_publish_time":"2021-12-17T08:36:39.974Z"},"1.1.0":{"name":"postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"1.1.0","author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/evrone/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/evrone/postcss-px-to-viewport/issues"},"homepage":"https://github.com/evrone/postcss-px-to-viewport","main":"index.js","scripts":{"test":"jasmine-node spec"},"devDependencies":{"jasmine-node":"~1.11.0"},"keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"dependencies":{"object-assign":">=4.0.1","postcss":">=5.0.2"},"gitHead":"8a04888323322918b7f03b79ebef9e9fd45f790c","_id":"postcss-px-to-viewport@1.1.0","_npmVersion":"6.0.0","_nodeVersion":"10.0.0","_npmUser":{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},"dist":{"shasum":"459356251d0dd1dd7af8b324c28c32da444de610","size":7926,"noattachment":false,"tarball":"https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.0.tgz","integrity":"sha512-EtgneDV+BWtdZly/FNNcY+GynSsvkZE8wFKapwO4cvke/LjRTNbBBZNglG/hipY1Wfb22u7qiMndLJ8maYEwXQ=="},"maintainers":[{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},{"name":"koderfunk","email":"koderfunk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-px-to-viewport_1.1.0_1549365402874_0.8832079294007777"},"_hasShrinkwrap":false,"publish_time":1549365402966,"_cnpm_publish_time":1549365402966,"_cnpmcore_publish_time":"2021-12-17T08:36:40.200Z"},"1.0.0":{"name":"postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"1.0.0","author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/evrone/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/evrone/postcss-px-to-viewport/issues"},"homepage":"https://github.com/evrone/postcss-px-to-viewport","main":"index.js","scripts":{"test":"jasmine-node spec"},"devDependencies":{"jasmine-node":"~1.11.0"},"keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"dependencies":{"object-assign":">=4.0.1","postcss":">=5.0.2"},"gitHead":"ab547f4dceb3fe4315eb302da9863460123d1a9b","_id":"postcss-px-to-viewport@1.0.0","_npmVersion":"6.0.0","_nodeVersion":"10.0.0","_npmUser":{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},"dist":{"shasum":"02640381a777100b8ed4fe431b9e15bc6268606f","size":4934,"noattachment":false,"tarball":"https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.0.0.tgz","integrity":"sha512-ewMNhCNvP6L/M837s7KGYYaKrR05/FQ/fyKFteTVVB2KGF3fNyIk8wlCMNsRdDoPqgD9zjYtEVUdeBnOY2+69w=="},"maintainers":[{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},{"name":"koderfunk","email":"koderfunk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-px-to-viewport_1.0.0_1548746107962_0.07824664416244431"},"_hasShrinkwrap":false,"publish_time":1548746108099,"_cnpm_publish_time":1548746108099,"_cnpmcore_publish_time":"2021-12-17T08:36:40.451Z"},"0.0.3":{"name":"postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"0.0.3","author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/evrone/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/evrone/postcss-px-to-viewport/issues"},"homepage":"https://github.com/evrone/postcss-px-to-viewport","main":"index.js","keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"dependencies":{"object-assign":"^4.0.1","postcss":"^5.0.2"},"gitHead":"95214818ff69282a5abe0292d6a494d05065d389","_id":"postcss-px-to-viewport@0.0.3","scripts":{},"_shasum":"761259af20ad70adb01f503697337276d7831363","_from":".","_npmVersion":"3.5.3","_nodeVersion":"5.4.0","_npmUser":{"name":"koderfunk","email":"koderfunk@gmail.com"},"dist":{"shasum":"761259af20ad70adb01f503697337276d7831363","size":3355,"noattachment":false,"tarball":"https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-0.0.3.tgz","integrity":"sha512-C7w2/A2XkpnlGvt5VOxnwebJjYxarU3Jt3wuwekwwWccH8UqfZC7b4T0cH4iRau1qA3dSf9eBLgSOSoBF4/GKw=="},"maintainers":[{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},{"name":"koderfunk","email":"koderfunk@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/postcss-px-to-viewport-0.0.3.tgz_1471947607177_0.9919163470622152"},"directories":{},"publish_time":1471947608956,"_hasShrinkwrap":false,"_cnpm_publish_time":1471947608956,"_cnpmcore_publish_time":"2021-12-17T08:36:40.696Z"},"0.0.2":{"name":"postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"0.0.2","author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/evrone/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/evrone/postcss-px-to-viewport/issues"},"homepage":"https://github.com/evrone/postcss-px-to-viewport","main":"index.js","keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"dependencies":{"object-assign":"^4.0.1","postcss":"^5.0.2"},"gitHead":"2b8e75f569a13124439766981d17e625d21df46a","_id":"postcss-px-to-viewport@0.0.2","scripts":{},"_shasum":"726cc95422ebfef34ea2aa04e89f97e4bd5707be","_from":".","_npmVersion":"3.5.3","_nodeVersion":"5.4.0","_npmUser":{"name":"koderfunk","email":"koderfunk@gmail.com"},"dist":{"shasum":"726cc95422ebfef34ea2aa04e89f97e4bd5707be","size":2753,"noattachment":false,"tarball":"https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-0.0.2.tgz","integrity":"sha512-yrDzfcDy5kQ1UeckbzdslVm8QtLGna8TZSvk5hV4rzJ6VthAP2xopMH8qL1noAjzRRwcOE9bBSEAL6bmk1MadQ=="},"maintainers":[{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},{"name":"koderfunk","email":"koderfunk@gmail.com"}],"_npmOperationalInternal":{"host":"packages-9-west.internal.npmjs.com","tmp":"tmp/postcss-px-to-viewport-0.0.2.tgz_1456845632236_0.915484358323738"},"directories":{},"publish_time":1456845635701,"_hasShrinkwrap":false,"_cnpm_publish_time":1456845635701,"_cnpmcore_publish_time":"2021-12-17T08:36:40.897Z"},"0.0.1":{"name":"postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"0.0.1","author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/evrone/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/evrone/postcss-px-to-viewport/issues"},"homepage":"https://github.com/evrone/postcss-px-to-viewport","main":"index.js","keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"dependencies":{"object-assign":"^4.0.1","postcss":"^5.0.2"},"gitHead":"ecf0ef2bad54c9f4cf6f8b64a5d2777eef4b33b9","_id":"postcss-px-to-viewport@0.0.1","scripts":{},"_shasum":"282a44939cdd48e27d54732d23ea35a93e4d8bf7","_from":".","_npmVersion":"3.5.3","_nodeVersion":"5.4.0","_npmUser":{"name":"koderfunk","email":"koderfunk@gmail.com"},"dist":{"shasum":"282a44939cdd48e27d54732d23ea35a93e4d8bf7","size":7365,"noattachment":false,"tarball":"https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-0.0.1.tgz","integrity":"sha512-Ld+rmZuJzQQlk5RVKNiYZlCEvvrOs1pah4+EKAgJg7kto0cGoxBThpRoYE8yxYJn6jo61L6wiGUkrYik5sQFRw=="},"maintainers":[{"name":"chernobelenkiy","email":"chernobelenkiy@gmail.com"},{"name":"koderfunk","email":"koderfunk@gmail.com"}],"directories":{},"publish_time":1453195185564,"_hasShrinkwrap":false,"_cnpm_publish_time":1453195185564,"_cnpmcore_publish_time":"2021-12-17T08:36:41.114Z"}},"bugs":{"url":"https://github.com/evrone/postcss-px-to-viewport/issues"},"homepage":"https://github.com/evrone/postcss-px-to-viewport","keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"repository":{"type":"git","url":"git+ssh://git@github.com/evrone/postcss-px-to-viewport.git"},"_source_registry_name":"default"}