{"_id":"@elfin-fe/postcss-px-to-viewport","_rev":"2-ae7c34ed3785d894e98f6c8a9403fcf7","name":"@elfin-fe/postcss-px-to-viewport","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.2":{"name":"@elfin-fe/postcss-px-to-viewport","description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","version":"1.1.2","author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/elfinFE/postcss-px-to-viewport.git"},"bugs":{"url":"https://github.com/elfinFE/postcss-px-to-viewport/issues"},"homepage":"https://github.com/elfinFE/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"},"dependencies":{"object-assign":">=4.0.1"},"devDependencies":{"jest":"^25.4.0","postcss":">=5.0.2"},"peerDependencies":{"postcss":">=5.0.2"},"gitHead":"a11d69ecf71c4da64e09b94b94070e9fa0a6dc3c","_id":"@elfin-fe/postcss-px-to-viewport@1.1.2","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+szPtx7RP5fEHDNjt5QGMT6sSX4hMSFOBlKUYDQf8S8GmdeuJXOeGuRGIysu4kEFaBE/xROzmFmMAjy5WhNQ6A==","shasum":"6aa57ae73088fe4bc86435d700dd6f7ea052d0d9","tarball":"https://registry.npmjs.org/@elfin-fe/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.2.tgz","fileCount":13,"unpackedSize":34769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWHSRCRA9TVsSAnZWagAAOUkP/282+wtLYZheN3IzV+d6\nqSbcL+O+q3QsiFpl39reH+JheYIcJ88xlRgTqWI68zhcJHgmGl8VbLcXVJv+\nOhUC2DtxfYt10Lqflo/8rfG7RS7ByxXVEippOPKMtRzc4Odm2CnYRDx2FLrY\nho9lB54vfbetjLaFRdM1Drwgq11qXZPTaK7B4jYT5FKmfEXOet/OC9bGFFsj\neJXsAwhqqVguax2tDngRLfWsZVwZ7MXUWOeHbQOEESvN/XHIV0OXbYJli4bJ\njzNuGxqIGfiBoYBtPuTiiy+CreeML8MtWLvw2JVF8bwwRByX7S8jLK3SkZP9\nQX7GcRDrxbCyklWm8omO3stFnYnRqgNM6vOeaL+B1Wu61KwLxYICt60BeWDm\nK4U0pvJie8QM+ObdJzeuZ3jspB3oyPYMKeyUYe/bAFuog4YgqT//B+pzSt4N\nh1SiT0vbJALOKssOuupkokkk2Zov9hfMlvMgB90J6toW9B6gEoa3B9VE7mfM\nfm+Y60yQysNOG1TZj5Hais+zjiiphqrjF8hPGnmr5KB0oZDRRSkE+4wq9FOZ\nLr8aefbYM85jLndaYMTOVtGwuRfG69GP2xxtXGdLXmzycNGfIN1rRaJPaOol\ni7eWJhNvY+GmZHah2tn6WXxpJ2tol7iMGnuFoKYcwV1ygJtADdqxkXbdr/Vx\nGEoK\r\n=EIb7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwNLEAKRzlIHD+OXpwdW58U1iluELA2JeYf27dRXHzuAiEAw6HERlgfI6furROqwNg86uBR4phjer6popb0eZ6UvTk="}]},"_npmUser":{"name":"natekong","email":"1239242238@qq.com"},"directories":{},"maintainers":[{"name":"natekong","email":"1239242238@qq.com"},{"name":"real_willie","email":"805735923@qq.com"},{"name":"rengar","email":"915724526@qq.com"},{"name":"wyy102489","email":"wyy102489@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-px-to-viewport_1.1.2_1616409745157_0.8295692883436603"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-22T10:42:24.971Z","1.1.2":"2021-03-22T10:42:25.367Z","modified":"2023-06-30T05:04:40.613Z"},"maintainers":[{"email":"1239242238@qq.com","name":"natekong"},{"email":"wyy102489@outlook.com","name":"wyy102489"}],"description":"A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).","homepage":"https://github.com/elfinFE/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/elfinFE/postcss-px-to-viewport.git"},"author":{"name":"Dmitry Karpunin","email":"koderfunk@gmail.com"},"bugs":{"url":"https://github.com/elfinFE/postcss-px-to-viewport/issues"},"license":"MIT","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## 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  padding-top: 10px; /* px-to-viewport-ignore */\n  /* px-to-viewport-ignore-next */\n  padding-bottom: 10px;\n  /* Any other comment */\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  padding-top: 10px;\n  padding-bottom: 10px;\n  /* Any other comment */\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: undefined,\n  include: undefined,\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` (Regexp or Array of 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- `include` (Regexp or Array of Regexp) If `include` is set, only matching files will be converted,\n    for example, only files under `src/mobile/` (`include: /\\/src\\/mobile\\//`)\n    - If the value is regexp, the matching file will be included, otherwise it will be excluded.\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> `exclude` and `include` can be set together, and the intersection of the two rules will be taken.\n\n#### Ignoring\n\nYou can use special comments for ignore conversion of single lines:\n- `/* px-to-viewport-ignore-next */` — on a separate line, prevents conversion on the next line.\n- `/* px-to-viewport-ignore */` — after the property on the right, prevents conversion on the same line.\n\nExample:\n```css\n/* example input: */\n.class {\n  /* px-to-viewport-ignore-next */\n  width: 10px;\n  padding: 10px;\n  height: 10px; /* px-to-viewport-ignore */\n  border: solid 2px #000; /* px-to-viewport-ignore */\n}\n\n/* example output: */\n.class {\n  width: 10px;\n  padding: 3.125vw;\n  height: 10px;\n  border: solid 2px #000;\n}\n```\n\nThere are several more reasons why your pixels may not convert, the following options may affect this:\n`propList`, `selectorBlackList`, `minPixelValue`, `mediaQuery`, `exclude`, `include`.\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#### 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## Contributing\n\nPlease read [Code of Conduct](CODE-OF-CONDUCT.md)\nand [Contributing Guidelines](CONTRIBUTING.md) for submitting pull requests to us.\n\n## Running the tests\n\nIn order to run tests, you need to install dev-packages:\n```\n$ npm install\n```\nThen run the tests via npm script:\n```\n$ npm run test\n```\n\n## Changelog\n\nThe changelog is [here](CHANGELOG.md).\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## 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## Sponsors\n\nVisit [Evrone](https://evrone.com/) website to get more information about the [projects](https://evrone.com/cases) build.\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## Acknowledgments\n\n* Hat tip to https://github.com/cuth/postcss-pxtorem/ for inspiring us for this project.\n","readmeFilename":"README.md"}