Skip to content

Commit 7d36afe

Browse files
collect plugins data
1 parent 72e6cbe commit 7d36afe

203 files changed

Lines changed: 3611 additions & 3639 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

npm-data/links.json

Lines changed: 164 additions & 304 deletions
Large diffs are not rendered by default.

npm-data/maintained-plugins.json

Lines changed: 508 additions & 508 deletions
Large diffs are not rendered by default.

npm-data/maybe-plugins.json

Lines changed: 1746 additions & 1776 deletions
Large diffs are not rendered by default.

npm-data/plugins.json

Lines changed: 810 additions & 810 deletions
Large diffs are not rendered by default.

npm-data/plugins/@abcaustralia/postcss-to-camel-case.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -468,5 +468,5 @@
468468
],
469469
"readme": "# postcss-to-camel-case\n\nConvert all CSS Selectors into camelCase. Useful for converting an existing project to use camelCase selectors to follow the default CSS Modules conventions.\n\n## Usage\n\nThis plugin is most useful with the replace feature of [PostCSS CLI](https://github.com/postcss/postcss-cli).\n\n```\nnpx postcss ./path/to/css/**/*.css --replace --no-map --use @abcaustralia/postcss-to-camel-case\n```\n\nOr with a config file:\n\n```js\nmodule.exports = (ctx) => ({\n map: ctx.options.map,\n parser: ctx.options.parser,\n plugins: [require(\"@abcaustralia/postcss-to-camel-case\")],\n});\n```\n\n```\nnpx postcss ./path/to/css/**/*.css --replace --no-map --config ./postcss.config.js\n```\n",
470470
"readmeFilename": "README.md",
471-
"_downloads": 13
471+
"_downloads": 26
472472
}

npm-data/plugins/@afuning/postcss-px-to-viewport.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,5 +126,5 @@
126126
"license": "MIT",
127127
"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",
128128
"readmeFilename": "README.md",
129-
"_downloads": 7
129+
"_downloads": 8
130130
}

npm-data/plugins/@classicmike/postcss-shadrem.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -376,5 +376,5 @@
376376
],
377377
"readme": "# Shad-REM\n\nWelcome to **Shad-REM**, a PostCSS plugin designed to help you work with REM units within shadow DOMs. Shad-REM allows you to use a new CSS custom unit property called `--shadrem` which lets you base your REM calculations on the shadow root instead of the document root node.\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Examples](#examples)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Introduction\n\nIn web development, managing CSS units within shadow DOMs can be challenging. Traditional REM units are based on the root font size of the document, which may not always be what you want when working within shadow roots. Shad-REM solves this problem by introducing a new CSS unit, `shad rem`, that respects the font size of the shadow root.\n\n## Features\n\n- **Shadow Root Aware:** Converts REM units to `shad rem` units based on the shadow root's font size.\n- **Seamless Integration:** Works seamlessly with your existing PostCSS setup.\n- **Flexible:** Allows you to maintain consistent styling within shadow DOMs.\n\n## Installation\n\nTo install Shad-REM, you need to have PostCSS and the PostCSS CLI set up in your project. Then, you can install Shad-REM via npm:\n\n```bash\nnpm install @classicmike/postcss-shadrem --save-dev\n```\n\n## Usage\n\nOnce installed, you need to configure PostCSS to use the Shad-REM plugin. Create or update your PostCSS configuration file (e.g., `postcss.config.js` or `postcss.config.cjs`) to include Shad-REM.\n\n```javascript\n// postcss.config.js\nmodule.exports = {\n plugins: [\n require('@classicmike/postcss-shadrem'),\n // other plugins\n ]\n};\n```\n\n## Examples\n\nHere are some examples of how Shad-REM transforms your CSS:\n\n### A note before using ShadREM.\nBefore using ShadREM, if you have a root font size other than what is set in your browser default, ensure your shadow root element has that font size set up. I.e:\n\n```\n // What used to be in the document root element.\n :host {\n font-size: 16px;\n }\n```\n\n### Before Shad-REM\n\n```css\n/* Input CSS */\n.my-element {\n font-size: 1.5rem;\n margin: 2rem;\n}\n```\n\n### After Shad-REM\n\nAssuming a base font size of `16px` in the shadow root, the output CSS will be:\n\n```css\n/* Output CSS */\n.my-element {\n font-size: calc(1.5 * var(--shadrem)); /* Equivalent to 24px if base font size is 16px */\n margin: calc(2 * var(--shadrem)); /* Equivalent to 32px if base font size is 16px */\n}\n```\n\n## Contributing\n\nWe welcome contributions to Shad-REM! If you find any issues or have ideas for improvements, please submit a pull request or open an issue on our GitHub repository.\n\n## License\n\nShad-REM is licensed under the [MIT License](LICENSE). See the [LICENSE](LICENSE) file for more information.\n\n---\n\nFeel free to customize and extend Shad-REM to better fit your needs. Happy coding!\n",
378378
"readmeFilename": "README.md",
379-
"_downloads": 660
379+
"_downloads": 723
380380
}

npm-data/plugins/@csstools/postcss-alpha-function.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,5 +162,5 @@
162162
"readme": "# PostCSS Alpha Function [<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-alpha-function --save-dev`\n\n[PostCSS Alpha Function] lets you use the `alpha` function in\nCSS, following the [CSS Color] specification.\n\n```css\n.color {\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n\n/* becomes */\n\n.color {\n\tcolor: rgb(from #dddd r g b / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));\n}\n```\n\n## Usage\n\nAdd [PostCSS Alpha Function] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-alpha-function --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssAlphaFunction = require('@csstools/postcss-alpha-function');\n\npostcss([\n\tpostcssAlphaFunction(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n\n\n## Options\n\n### preserve\n\nThe `preserve` option determines whether the original notation\nis preserved. By default, it is not preserved.\n\n```js\npostcssAlphaFunction({ preserve: true })\n```\n\n```css\n.color {\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n\n/* becomes */\n\n.color {\n\tcolor: rgb(from #dddd r g b / calc(alpha / 2));\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));\n}\n\n@supports (color: alpha(from red / 1)) and (color: rgb(0 0 0 / 0)) {\n:root {\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n}\n```\n\n### enableProgressiveCustomProperties\n\nThe `enableProgressiveCustomProperties` option determines whether the original notation\nis wrapped with `@supports` when used in Custom Properties. By default, it is enabled.\n\n> [!NOTE]\n> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. \n> See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).\n\n```js\npostcssAlphaFunction({ enableProgressiveCustomProperties: false })\n```\n\n```css\n.color {\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n\n/* becomes */\n\n.color {\n\tcolor: rgb(from #dddd r g b / calc(alpha / 2));\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n```\n\n_Custom properties do not fallback to the previous declaration_\n\n## Copyright : color conversions\n\nThis software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#alpha-function\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-alpha-function\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Alpha Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-alpha-function\n[CSS Color]: https://drafts.csswg.org/css-color-5/#relative-alpha\n",
163163
"readmeFilename": "README.md",
164164
"_rev": "1-dfd5d923cafcf9db887ca8f23760f6f3",
165-
"_downloads": 37840
165+
"_downloads": 92617
166166
}

0 commit comments

Comments
 (0)