{"_id":"@apimediaru/postcss-px-to-viewport","_rev":"2-b09ca02b625886af19a62c64518560d4","name":"@apimediaru/postcss-px-to-viewport","dist-tags":{"latest":"1.2.4"},"versions":{"1.2.3":{"name":"@apimediaru/postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"1.2.3","author":{"name":"API Media","email":"it@apimedia.ru"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/apimediaru/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/apimediaru/postcss-px-to-viewport/issues"},"homepage":"https://github.com/apimediaru/postcss-px-to-viewport","main":"index.js","keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"scripts":{"test":"jest spec/*.spec.js","release":"standard-version && npm publish"},"dependencies":{"object-assign":">=4.0.1"},"devDependencies":{"jest":"^25.4.0","postcss":">=5.0.2","standard-version":"latest"},"peerDependencies":{"postcss":">=5.0.2"},"publishConfig":{"access":"public"},"gitHead":"5be63c5c15eee697399f006761d9cf2f7025b521","_id":"@apimediaru/postcss-px-to-viewport@1.2.3","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-rdxr71XwFkpHWT8HlbzIwYJfOokIrP/4v3vniAj6jRXGDrYyuPhbDxk7b4lnU4ll7i5M9InI4muD/td5hj1flg==","shasum":"0e4b2b17f76241dbf2908eb6409fe42d0cbfc868","tarball":"https://registry.npmjs.org/@apimediaru/postcss-px-to-viewport/-/postcss-px-to-viewport-1.2.3.tgz","fileCount":14,"unpackedSize":39651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBC03CRA9TVsSAnZWagAAMjUP/1EmJuKj+GRNx73jDAfz\n1FR95dFTqoFbAXoy7YiX8r0M9Ub7mNi2MVFGW37GmY7Y45zkT78b0szFTgCW\n2pTKlHYN31nFotODkYEQA5HOC8/LHZoqOW2F/PPhFqE5jCD0oEFesiG8n2zy\n8Qoc/exKyHk2bwH4C6sj1Vd5z3nshH5Xjz4F8iUw8h3a7QD77U5W7wmJIx1/\nq4IY6+E3L94XYxo0tKID1M0YKNBG5F6YrV387GFhG9CRuTsjk9kNVq8eRdC1\nq1pht/QBFECuY2D0eYkzQBThbBICJ+0OnjL0P4Rk24xlSjeJWCCusN8yWHnu\nVkqvChXsSrQYsKhCmR0V4xhRTQs/OTo7m4L/W9nGoN1F1zinbyLo1nFLzUQd\ng4YS2R7Ev5eOYVt199aBX6JPJY0/g2YCZIKpUitRs4x9OnDJ++uuxbaNSUxI\nF4DqWCDH+2XsOWoIJdRtgLV50qWK3wa6iKYzPCeG6PAsXrAOCLnFuPBCBXyJ\nnuZ64l9P3GTlf6Ne/UFzCVktslj++dNsaH5JHbAi8kFpsXpNhtjoN3KPfCpr\nHvhnIqCr6WiPH6zHmPhUxto3p/CFFYY04qhCESNZGPCGwa2da2wxeHiZYMlk\njwUgioC+58ACtUo+T7WD/LsOTYIaMrCGKcyuayTKIunEZz5H/7Ar6rcWAKsj\nMlFD\r\n=dQQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2kc1JKlxUVwsYPY53lR2On3f22ObwQ222jk07l6tRBAiBo+19imqRe30E8HJDJtLplOTM7zjYaQxD6Go/ode5PzQ=="}]},"maintainers":[{"name":"exileofaranei","email":"anoceanofmyownregret@gmail.com"},{"name":"graandy","email":"it@apimedia.ru"}],"_npmUser":{"name":"graandy","email":"it@apimedia.ru"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-px-to-viewport_1.2.3_1594109238637_0.8881038145533189"},"_hasShrinkwrap":false},"1.2.4":{"name":"@apimediaru/postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"1.2.4","author":{"name":"API Media","email":"it@apimedia.ru"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/apimediaru/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/apimediaru/postcss-px-to-viewport/issues"},"homepage":"https://github.com/apimediaru/postcss-px-to-viewport","main":"index.js","keywords":["css","units","pixel","px","viewport","vw","vh","vmin","vmax","postcss","postcss-plugin"],"scripts":{"test":"jest spec/*.spec.js","release":"standard-version && npm publish"},"dependencies":{"object-assign":">=4.0.1"},"devDependencies":{"jest":"^25.4.0","postcss":">=5.0.2","standard-version":"latest"},"peerDependencies":{"postcss":">=5.0.2"},"publishConfig":{"access":"public"},"gitHead":"0096f1fc818255e3d1c87689e869c3dfeec9b5a5","_id":"@apimediaru/postcss-px-to-viewport@1.2.4","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-WV/fJUlY3rayF2LOKPg0dbT1y4H8bXGB5eoAyg0GPBOaPelAjhIzjz6U0gQz9OBFvrt4y54HWoqemIb5KYdIew==","shasum":"fd24f6a7f80ec8ffc0d9adc8142490eee0a08e90","tarball":"https://registry.npmjs.org/@apimediaru/postcss-px-to-viewport/-/postcss-px-to-viewport-1.2.4.tgz","fileCount":14,"unpackedSize":39738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBC23CRA9TVsSAnZWagAAhfgP+QFJGJSmjKp3aN/OZKJj\nqqIpD9j2Uem7mOfvVu0MHxMKPx0zygDdEiRv9aW4KB8D6gwNQ8g7PHh/NjEw\noGjx0ezO616vZz49lQHQuF8mJGaJhNrqWiwgXitJx9Kea1driIrtf+27De9+\niFuO18V7tJPKS9rRmYshudD6D4PKKkTLvEQKdDRpjQ5ZwJ3IyFiJM+kM0oWp\nH136JfKvmaD431IesLEPh93o6J9Tb39M7oPiBweQ4T4MYxiYU17BGjJwkRBW\nfYgOvC1/FRMhbqxrRutOohtTqOnSykz8d/QbYvYXR34esvITHlm1xT88jIf1\n1jH25F4NjBrE0LYSLzRDo8XT8hHQi/gbm5YwVaKxUMesQa3wl6JaZXfw2S5y\nNOD9IwhDhU/TBuPEGJMOMacypmtmlEgY9yFbBqBfrk84h6IJXFgLPu7fSyZG\nvHUdrRxl33ccYUhgOO+aRwjClzp+xPLfOACYEUWjvLXZJQrILdN0Rvl7swL3\nVHRof2n6DAeprH4fQppZabD6xFjfYRAHWUpF0RoWyGajK1uYXTBXRYzEY3CL\n60bF7LDa/MoYPRqc0k/AOAymiZsjHJAWMXbWLky6HOJLoxOHE4yKe/a0mDE4\n8xyRHbt48YcdHY1qk8ewRh2DrE2336bP3hnyX4S/0wculhHuuVY2zZ5z72YV\nlf3z\r\n=5Egi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvvbmkESHKVeHb81Oqth1hxvATpyZ/N9yM/2svdLcTBgIhAL1G/h2+OH1HBCk+MEdMj1hj1xtXf9BOveP6OSI/I9GL"}]},"maintainers":[{"name":"exileofaranei","email":"anoceanofmyownregret@gmail.com"},{"name":"graandy","email":"it@apimedia.ru"}],"_npmUser":{"name":"graandy","email":"it@apimedia.ru"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-px-to-viewport_1.2.4_1594109366674_0.1893130849046738"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-07T08:07:18.376Z","1.2.3":"2020-07-07T08:07:18.789Z","modified":"2022-04-04T14:38:09.352Z","1.2.4":"2020-07-07T08:09:26.829Z"},"maintainers":[{"name":"exileofaranei","email":"anoceanofmyownregret@gmail.com"},{"name":"graandy","email":"it@apimedia.ru"}],"description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","homepage":"https://github.com/apimediaru/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/apimediaru/postcss-px-to-viewport.git"},"author":{"name":"API Media","email":"it@apimedia.ru"},"bugs":{"url":"https://github.com/apimediaru/postcss-px-to-viewport/issues"},"license":"MIT","readme":"# postcss-px-to-viewport\r\n[![NPM version](https://badge.fury.io/js/postcss-px-to-viewport.svg)](http://badge.fury.io/js/postcss-px-to-viewport)\r\n\r\nEnglish | [中文](README_CN.md) \r\n\r\nA plugin for [PostCSS](https://github.com/postcss/postcss) that generates viewport units (vw, vh, vmin, vmax) from pixel units.\r\n\r\n## Demo\r\n\r\nIf your project involves a fixed width, this script will help to convert pixels into viewport units.\r\n\r\n### Input\r\n\r\n```css\r\n.class {\r\n  margin: -10px .5vh;\r\n  padding: 5vmin 9.5px 1px;\r\n  border: 3px solid black;\r\n  border-bottom-width: 1px;\r\n  font-size: 14px;\r\n  line-height: 20px;\r\n}\r\n\r\n.class2 {\r\n  padding-top: 10px; /* px-to-viewport-ignore */\r\n  /* px-to-viewport-ignore-next */\r\n  padding-bottom: 10px;\r\n  /* Any other comment */\r\n  border: 1px solid black;\r\n  margin-bottom: 1px;\r\n  font-size: 20px;\r\n  line-height: 30px;\r\n}\r\n\r\n@media (min-width: 750px) {\r\n  .class3 {\r\n    font-size: 16px;\r\n    line-height: 22px;\r\n  }\r\n}\r\n```\r\n\r\n### Output\r\n```css\r\n.class {\r\n  margin: -3.125vw .5vh;\r\n  padding: 5vmin 2.96875vw 1px;\r\n  border: 0.9375vw solid black;\r\n  border-bottom-width: 1px;\r\n  font-size: 4.375vw;\r\n  line-height: 6.25vw;\r\n}\r\n\r\n.class2 {\r\n  padding-top: 10px;\r\n  padding-bottom: 10px;\r\n  /* Any other comment */\r\n  border: 1px solid black;\r\n  margin-bottom: 1px;\r\n  font-size: 6.25vw;\r\n  line-height: 9.375vw;\r\n}\r\n\r\n@media (min-width: 750px) {\r\n  .class3 {\r\n    font-size: 16px;\r\n    line-height: 22px;\r\n  }\r\n}\r\n```\r\n\r\n## Getting Started\r\n\r\n### Installation\r\nAdd via npm\r\n```\r\n$ npm install @apimediaru/postcss-px-to-viewport --save-dev\r\n```\r\n\r\n\r\n### Usage\r\n\r\nDefault Options:\r\n```js\r\n{\r\n  unitToConvert: 'px',\r\n  viewportWidth: 320,\r\n  unitPrecision: 5,\r\n  propList: ['*'],\r\n  viewportUnit: 'vw',\r\n  fontViewportUnit: 'vw',\r\n  selectorBlackList: [],\r\n  minPixelValue: 1,\r\n  mediaQuery: false,\r\n  replace: true,\r\n  exclude: undefined,\r\n  include: undefined,\r\n  landscape: false,\r\n  landscapeUnit: 'vw',\r\n  landscapeWidth: 568,\r\n  \r\n  api_multiplier: 1\r\n}\r\n```\r\n- `unitToConvert` (String) unit to convert, by default, it is px.\r\n- `viewportWidth` (Number) The width of the viewport.\r\n- `unitPrecision` (Number) The decimal numbers to allow the vw units to grow to.\r\n- `propList` (Array) The properties that can change from px to vw.\r\n  - Values need to be exact matches.\r\n  - Use wildcard * to enable all properties. Example: ['*']\r\n  - Use * at the start or end of a word. (['*position*'] will match background-position-y)\r\n  - Use ! to not match a property. Example: ['*', '!letter-spacing']\r\n  - Combine the \"not\" prefix with the other prefixes. Example: ['*', '!font*']\r\n- `viewportUnit` (String) Expected units.\r\n- `fontViewportUnit` (String) Expected units for font.\r\n- `selectorBlackList` (Array) The selectors to ignore and leave as px.\r\n    - If value is string, it checks to see if selector contains the string.\r\n        - `['body']` will match `.body-class`\r\n    - If value is regexp, it checks to see if the selector matches the regexp.\r\n        - `[/^body$/]` will match `body` but not `.body`\r\n- `minPixelValue` (Number) Set the minimum pixel value to replace.\r\n- `mediaQuery` (Boolean) Allow px to be converted in media queries.\r\n- `replace` (Boolean) replaces rules containing vw instead of adding fallbacks.\r\n- `exclude` (Regexp or Array of Regexp) Ignore some files like 'node_modules'\r\n    - If value is regexp, will ignore the matches files.\r\n    - If value is array, the elements of the array are regexp.\r\n- `include` (Regexp or Array of Regexp) If `include` is set, only matching files will be converted,\r\n    for example, only files under `src/mobile/` (`include: /\\/src\\/mobile\\//`)\r\n    - If the value is regexp, the matching file will be included, otherwise it will be excluded.\r\n    - If value is array, the elements of the array are regexp.\r\n- `landscape` (Boolean) Adds `@media (orientation: landscape)` with values converted via `landscapeWidth`.\r\n- `landscapeUnit` (String) Expected unit for `landscape` option\r\n- `landscapeWidth` (Number) Viewport width for landscape orientation.\r\n\r\n> `exclude` and `include` can be set together, and the intersection of the two rules will be taken.\r\n\r\n#### Ignoring\r\n\r\nYou can use special comments for ignore conversion of single lines:\r\n- `/* px-to-viewport-ignore-next */` — on a separate line, prevents conversion on the next line.\r\n- `/* px-to-viewport-ignore */` — after the property on the right, prevents conversion on the same line.\r\n\r\nExample:\r\n```css\r\n/* example input: */\r\n.class {\r\n  /* px-to-viewport-ignore-next */\r\n  width: 10px;\r\n  padding: 10px;\r\n  height: 10px; /* px-to-viewport-ignore */\r\n  border: solid 2px #000; /* px-to-viewport-ignore */\r\n}\r\n\r\n/* example output: */\r\n.class {\r\n  width: 10px;\r\n  padding: 3.125vw;\r\n  height: 10px;\r\n  border: solid 2px #000;\r\n}\r\n```\r\n\r\nThere are several more reasons why your pixels may not convert, the following options may affect this:\r\n`propList`, `selectorBlackList`, `minPixelValue`, `mediaQuery`, `exclude`, `include`.\r\n\r\n#### Use with PostCss configuration file\r\n\r\nadd to your `postcss.config.js`\r\n```js\r\nmodule.exports = {\r\n  plugins: {\r\n    // ...\r\n    'postcss-px-to-viewport': {\r\n      // options\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n#### Use with gulp-postcss\r\n\r\nadd to your `gulpfile.js`:\r\n```js\r\nvar gulp = require('gulp');\r\nvar postcss = require('gulp-postcss');\r\nvar pxtoviewport = require('postcss-px-to-viewport');\r\n\r\ngulp.task('css', function () {\r\n\r\n    var processors = [\r\n        pxtoviewport({\r\n            viewportWidth: 320,\r\n            viewportUnit: 'vmin'\r\n        })\r\n    ];\r\n\r\n    return gulp.src(['build/css/**/*.css'])\r\n        .pipe(postcss(processors))\r\n        .pipe(gulp.dest('build/css'));\r\n});\r\n```\r\n\r\n## Contributing\r\n\r\nPlease read [Code of Conduct](CODE-OF-CONDUCT.md)\r\nand [Contributing Guidelines](CONTRIBUTING.md) for submitting pull requests to us.\r\n\r\n## Running the tests\r\n\r\nIn order to run tests, you need to install dev-packages:\r\n```\r\n$ npm install\r\n```\r\nThen run the tests via npm script:\r\n```\r\n$ npm run test\r\n```\r\n\r\n## Changelog\r\n\r\nThe changelog is [here](CHANGELOG.md).\r\n\r\n## Versioning\r\n\r\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). \r\n\r\n## Authors\r\n\r\n* [Dmitry Karpunin](https://github.com/KODerFunk) - *Initial work*\r\n* [Ivan Bunin](https://github.com/chernobelenkiy)\r\n\r\nSee also the list of [contributors](https://github.com/evrone/postcss-px-to-viewport/contributors) who participated in this project.\r\n\r\n## License\r\n\r\nThis project is licensed under the [MIT License](LICENSE).\r\n\r\n## Sponsors\r\n\r\nVisit [Evrone](https://evrone.com/) website to get more information about the [projects](https://evrone.com/cases) build.\r\n\r\n<a href=\"https://evrone.com/?utm_source=postcss-px-to-viewport\">\r\n  <img src=\"https://user-images.githubusercontent.com/417688/34437029-dbfe4ee6-ecab-11e7-9d80-2b274b4149b3.png\"\r\n       alt=\"Sponsored by Evrone\" width=\"231\" />\r\n</a>\r\n\r\n## Acknowledgments\r\n\r\n* Hat tip to https://github.com/cuth/postcss-pxtorem/ for inspiring us for this project.\r\n","readmeFilename":"README.md"}