{"versions":{"1.0.5":{"name":"@yuo/postcss-px2vw","version":"1.0.5","author":{"name":"Perfumere","email":"1061393710@qq.com"},"description":"support postcss@v8.x, px2vw","main":"index.js","types":"type.d.ts","dependencies":{"postcss":"^8.0.0"},"keywords":["px2vw","plugin"],"license":"MIT","gitHead":"2cad5dadc7a04d08bf049702b84ed28c626ebddf","_id":"@yuo/postcss-px2vw@1.0.5","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-fj2OIh6uN85AoA2rwSZroon7fCVVfOK7WvpD83ArGQrk5e0qiftYc8QxsvSAcqmb4/6VrN1Dm3G/yo3FASeZeQ==","shasum":"e7bada649f5f20eed4cbdafd0315f686c77aac80","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@yuo/postcss-px2vw/-/postcss-px2vw-1.0.5.tgz","fileCount":7,"unpackedSize":16463,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCinp5GXIW7jkS3zKt5DV8ATrGuHTnOCFlHKvlwp7vddQIgZvHSk/CC5dxdZ7179uqjsLiStX+5nR9Ky/xJINA4qxw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJighAXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRgw/+Na9DL4LZ0RJiSXLy8MwlRLxAlsp9214JwDXPLOxiNDjAZYav\r\nb95TsmIKD8P6fVVQUGhBX4YCbmafAerG9bmWBN6S3xPqKUu0bPrXB9xpcl8n\r\nmAOsM4Z6L+0ccCsTN5Zore7KuFW0OA3QYMiLH4Sxqc608qWEfkHQf2Knrncq\r\nlMrenfaljpQYkVQrMaQvwGAKHW/rfmhsG0cXZwuVcX84myapYmDvsI4qNjCd\r\nvPjlLGXEy+nypYhCa1b1xJkXsb/PTh7MIWGaml2h42Nr8U/r9cjRkL/bvdg5\r\nehlZPekMZvnBGOjT1VwvPsZ+0cpL3Lo7hPev/JR+2tcVdKnxjDnuUDs8fUGv\r\nBXLGqoPhVA+EJtbcbpxSSeG0BvvnAD8fR8NcW/VXEkyp4ypja4imNy1aJau3\r\ntPycvAz+qpior6f/BDroFMdmGwThNZT/NX9aHi2gEkcLy0SeliFpVhp2JuDT\r\nNVpAeKMGDTycbPwKEWvCdqbmHNWqgbfGhf4Z6K2ZbFCfeNTAoR9T2XaswTRK\r\n7xMQb+KkQBTNQGtYad7kdGtyGXwQ8zuH7CiiCtzibg43d+u7lEObIJ9tHdYk\r\n2L/ej5QI8u9R6h9U8ftpW7Urn1we5HU0OKLtkzj5AFJEijyuTGMGrSM7IVDe\r\nnUJqKyfQf/NNNdXM5VwWiv/yShJ8m1MlMy8=\r\n=1ttV\r\n-----END PGP SIGNATURE-----\r\n","size":5523},"_npmUser":{"name":"anonymous","email":"1061393710@qq.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"1061393710@qq.com"},{"name":"anonymous","email":"q788799660@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-px2vw_1.0.5_1652690967619_0.968375600168984"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-05-16T09:06:47.913Z","contributors":[]}},"dist-tags":{"latest":"1.0.5"},"name":"@yuo/postcss-px2vw","time":{"created":"2022-05-16T09:06:54.213Z","modified":"2022-05-16T09:14:03.480Z","1.0.5":"2022-05-16T08:49:27.783Z"},"readme":"# px2vw\n\n升级了 `postcss-px-to-viewport`, 对您有用的话可 [add Star](https://github.com/philuo/postcss-px2vw), thks~\n\n## 简介\n\n- `支持postcss@8.x`\n\n- `可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。`\n\n### 输入\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### 输出\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## 上手\n\n### 安装\n\n使用npm安装\n\n```\n$ npm install @yuo/postcss-px2vw -D\n```\n\n或者使用yarn进行安装\n\n```\n$ yarn add @yuo/postcss-px2vw -D\n```\n\n### 配合Vite使用\n\n- Vite内置了postcss, [参考文档](https://cn.vitejs.dev/config/#css-postcss)\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\n\n// plugins\nimport px2vw from '@yuo/postcss-px2vw';\n\nexport default defineConfig(() => {\n  css: {\n    postcss: {\n      px2vw({\n        // 配置参数\n      })\n    }\n  }\n});\n\n```\n\n### 配置参数\n\n默认参数:\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) 需要转换的单位，默认为\"px\"\n- `viewportWidth` (Number) 设计稿的视口宽度\n- `unitPrecision` (Number) 单位转换后保留的精度\n- `propList` (Array) 能转化为vw的属性列表\n  - 传入特定的CSS属性；\n  - 可以传入通配符\"*\"去匹配所有属性，例如：['*']；\n  - 在属性的前或后添加\"*\",可以匹配特定的属性. (例如['*position*'] 会匹配 background-position-y)\n  - 在特定属性前加 \"!\"，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换letter-spacing\n  - \"!\" 和 \"*\"可以组合使用， 例如: ['*', '!font*']，将不转换font-size以及font-weight等属性\n- `viewportUnit` (String) 希望使用的视口单位\n- `fontViewportUnit` (String) 字体使用的视口单位\n- `selectorBlackList` (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。\n    - 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配\n        - 例如 `selectorBlackList` 为 `['body']` 的话， 那么 `.body-class` 就会被忽略\n    - 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则\n        - 例如 `selectorBlackList` 为 `[/^body$/]` , 那么 `body` 会被忽略，而 `.body` 不会\n- `minPixelValue` (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换\n- `mediaQuery` (Boolean) 媒体查询里的单位是否需要转换单位\n- `replace` (Boolean) 是否直接更换属性值，而不添加备用属性\n- `exclude` (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件\n    - 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略\n    - 如果传入的值是一个数组，那么数组里的值必须为正则\n- `landscape` (Boolean) 是否添加根据 `landscapeWidth` 生成的媒体查询条件 `@media (orientation: landscape)`\n- `landscapeUnit` (String) 横屏时使用的单位\n- `landscapeWidth` (Number) 横屏时使用的视口宽度\n\n## 许可\n\n本项目使用 [MIT License](LICENSE).\n\n## 项目来源\n\n* https://github.com/evrone/postcss-px-to-viewport 启发有了这个项目","users":{}}