You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: npm-data/plugins/@52qianduan/postcss-px-to-viewport.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -124,5 +124,5 @@
124
124
"license": "MIT",
125
125
"readme": "# postcss-px-to-viewport\n[](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",
Copy file name to clipboardExpand all lines: npm-data/plugins/@csstools/postcss-bundler.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -3608,5 +3608,5 @@
3608
3608
],
3609
3609
"readme": "# PostCSS Bundler [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\">][PostCSS]\n\n`npm install @csstools/postcss-bundler --save-dev`\n\n[PostCSS Bundler] bundles your CSS.\n\nThis plugin pack contains :\n- a bundler based on standard CSS `@import` statements.\n- [a rebaser that rewrites URLs in your CSS.](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-rebase-url)\n\n`examples/example.css` :\n```css\n@import url(\"imports/basic.css\");\n@import url(\"node_modules:open-props/red\");\n```\n\n`examples/imports/basic.css`:\n```css\n.foo {\n\tbackground: url('../../images/green.png');\n}\n```\n\nwhen bundled :\n```css\n/* imports/basic.css */\n.foo {\n\tbackground: url(\"../images/green.png\");\n}\n/* node_modules:open-props/red */\n:where(html){--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a}\n```\n\n## Usage\n\nAdd [PostCSS Bundler] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-bundler --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssBundler = require('@csstools/postcss-bundler');\n\npostcss([\n\tpostcssBundler(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n\n\n## `postcss-import`\n\n[`postcss-import`](https://github.com/postcss/postcss-import) is also a CSS bundler and parts of [PostCSS Bundler] are based on it. \nWhile creating this plugin we also submitted patches to [`postcss-import`](https://github.com/postcss/postcss-import) where possible. \n\n[PostCSS Bundler] is tuned differently and lacks configuration options that are present in [`postcss-import`](https://github.com/postcss/postcss-import).\n\n[PostCSS Bundler] is intended to just work and to be a drop-in replacement for native CSS `@import` statements.\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-bundler\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Bundler]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-bundler\n",
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments