collect plugins data

Author: github-actions[bot]

npm-data/links.json

@@ -272,5 +272,5 @@
 	],
 	"readme": "# postcss-pxtorem [![NPM version](https://badge.fury.io/js/postcss-pxtorem.svg)](http://badge.fury.io/js/postcss-pxtorem)\n\nA plugin for [PostCSS](https://github.com/ai/postcss) that generates rem units from pixel units.\n\n## Install\n\n```shell\n$ npm install postcss-pxtorem --save-dev\n```\n\n## Usage\n\nPixels are the easiest unit to use (*opinion*). The only issue with them is that they don't let browsers change the default font size of 16. This script converts every px value to a rem from the properties you choose to allow the browser to set the font size.\n\n\n### Input/Output\n\n*With the default settings, only font related properties are targeted.*\n\n```css\n// input\nh1 {\n    margin: 0 0 20px;\n    font-size: 32px;\n    line-height: 1.2;\n    letter-spacing: 1px;\n}\n\n// output\nh1 {\n    margin: 0 0 20px;\n    font-size: 2rem;\n    line-height: 1.2;\n    letter-spacing: 0.0625rem;\n}\n```\n\n### Example\n\n```js\nvar fs = require('fs');\nvar postcss = require('postcss');\nvar pxtorem = require('postcss-pxtorem');\nvar css = fs.readFileSync('main.css', 'utf8');\nvar options = {\n    replace: false\n};\nvar processedCss = postcss(pxtorem(options)).process(css).css;\n\nfs.writeFile('main-rem.css', processedCss, function (err) {\n  if (err) {\n    throw err;\n  }\n  console.log('Rem file written.');\n});\n```\n\n### options\n\nType: `Object | Null`  \nDefault:\n```js\n{\n    rootValue: 16,\n    unitPrecision: 5,\n    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],\n    selectorBlackList: [],\n    replace: true,\n    mediaQuery: false,\n    minPixelValue: 0,\n    exclude: /node_modules/i\n}\n```\n\n- `rootValue` (Number | Function) Represents the root element font size or returns the root element font size based on the [`input`](https://api.postcss.org/Input.html) parameter\n- `unitPrecision` (Number) The decimal numbers to allow the REM units to grow to.\n- `propList` (Array) The properties that can change from px to rem.\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- `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- `replace` (Boolean) Replaces rules containing rems instead of adding fallbacks.\n- `mediaQuery` (Boolean) Allow px to be converted in media queries.\n- `minPixelValue` (Number) Set the minimum pixel value to replace.\n- `exclude` (String, Regexp, Function) The file path to ignore and leave as px.\n    - If value is string, it checks to see if file path contains the string.\n        - `'exclude'` will match `\\project\\postcss-pxtorem\\exclude\\path`\n    - If value is regexp, it checks to see if file path matches the regexp.\n        - `/exclude/i` will match `\\project\\postcss-pxtorem\\exclude\\path`\n    - If value is function, you can use exclude function to return a true and the file will be ignored.\n        - the callback will pass the file path as  a parameter, it should returns a Boolean result.\n        - `function (file) { return file.indexOf('exclude') !== -1; }`\n\n### Use with gulp-postcss and autoprefixer\n\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar autoprefixer = require('autoprefixer');\nvar pxtorem = require('postcss-pxtorem');\n\ngulp.task('css', function () {\n\n    var processors = [\n        autoprefixer({\n            browsers: 'last 1 version'\n        }),\n        pxtorem({\n            replace: false\n        })\n    ];\n\n    return gulp.src(['build/css/**/*.css'])\n        .pipe(postcss(processors))\n        .pipe(gulp.dest('build/css'));\n});\n```\n\n### A message about ignoring properties\nCurrently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration.\n\n```css\n// `px` is converted to `rem`\n.convert {\n    font-size: 16px; // converted to 1rem\n}\n\n// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers\n.ignore {\n    border: 1Px solid; // ignored\n    border-width: 2PX; // ignored\n}\n```\n",
 	"readmeFilename": "README.md",
-	"_downloads": 5
+	"_downloads": 4
 }

npm-data/maintained-plugins.json

@@ -376,5 +376,5 @@
 	],
 	"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",
 	"readmeFilename": "README.md",
-	"_downloads": 656
+	"_downloads": 729
 }

npm-data/maybe-plugins.json

@@ -2895,5 +2895,5 @@
 	],
 	"readme": "# PostCSS Cascade Layers [<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-cascade-layers --save-dev`\n\n[PostCSS Cascade Layers] lets you use `@layer` following the [Cascade Layers Specification]. For more information on layers, checkout [A Complete Guide to CSS Cascade Layers] by Miriam Suzanne.\n\n```css\n\ntarget {\n\tcolor: purple;\n}\n\n@layer {\n\ttarget {\n\t\tcolor: green;\n\t}\n}\n\n\n/* becomes */\n\n\ntarget:not(#\\#) {\n\tcolor: purple;\n}\n\ntarget {\n\t\tcolor: green;\n\t}\n\n```\n\n## How it works\n\n[PostCSS Cascade Layers] creates \"layers\" of specificity.\n\nIt applies extra specificity on all your styles based on :\n- the most specific selector found\n- the order in which layers are defined\n\n```css\n@layer A, B;\n\n@layer B {\n\t.a-less-specific-selector {\n\t\t/* styles */\n\t}\n}\n\n@layer A {\n\t#something #very-specific {\n\t\t/* styles */\n\t}\n}\n\n@layer C {\n\t.a-less-specific-selector {\n\t\t/* styles */\n\t}\n}\n```\n\nmost specific selector :\n- `#something #very-specific`\n- `[2, 0, 0]`\n- `2 + 1` -> `3` to ensure there is no overlap\n\nthe order in which layers are defined :\n- `A`\n- `B`\n- `C`\n\n| layer | previous adjustment | specificity adjustment | selector |\n| ------ | ------ | ----------- | --- |\n| `A` | `0` | `0 + 0 = 0` | N/A |\n| `B` | `0` | `0 + 3 = 3` | `:not(#\\#):not(#\\#):not(#\\#)` |\n| `C` | `3` | `3 + 3 = 6` | `:not(#\\#):not(#\\#):not(#\\#):not(#\\#):not(#\\#):not(#\\#)` |\n\nThis approach lets more important (later) layers always override less important (earlier) layers.<br>\nAnd layers have enough room internally so that each selector works and overrides as expected.\n\nMore layers with more specificity will cause longer `:not(...)` selectors to be generated.\n\n> [!IMPORTANT]\n> [PostCSS Cascade Layers] assumes to process your complete CSS bundle.<br>If your build tool processes files individually or processes files in parallel the output will be incorrect.<br>Using [`@csstools/postcss-bundler`](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-bundler) and `@import` statements is one way to make sure your CSS is bundled before it is processed by this plugin.\n\n\n## Usage\n\nAdd [PostCSS Cascade Layers] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-cascade-layers --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssCascadeLayers = require('@csstools/postcss-cascade-layers');\n\npostcss([\n\tpostcssCascadeLayers(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n\n\n## Options\n\n### onRevertLayerKeyword\n\nThe `onRevertLayerKeyword` option enables warnings if `revert-layer` is used.\nTransforming `revert-layer` for older browsers is not possible in this plugin.\n\nDefaults to `warn`\n\n```js\npostcssCascadeLayers({ onRevertLayerKeyword: 'warn' }) // 'warn' | false\n```\n\n```css\n/* [postcss-cascade-layers]: handling \"revert-layer\" is unsupported by this plugin and will cause style differences between browser versions. */\n@layer {\n\t.foo {\n\t\tcolor: revert-layer;\n\t}\n}\n```\n\n### onConditionalRulesChangingLayerOrder\n\nThe `onConditionalRulesChangingLayerOrder` option enables warnings if layers are declared in multiple different orders in conditional rules.\nTransforming these layers correctly for older browsers is not possible in this plugin.\n\nDefaults to `warn`\n\n```js\npostcssCascadeLayers({ onConditionalRulesChangingLayerOrder: 'warn' }) // 'warn' | false\n```\n\n```css\n/* [postcss-cascade-layers]: handling different layer orders in conditional rules is unsupported by this plugin and will cause style differences between browser versions. */\n@media (min-width: 10px) {\n\t@layer B {\n\t\t.foo {\n\t\t\tcolor: red;\n\t\t}\n\t}\n}\n\n@layer A {\n\t.foo {\n\t\tcolor: pink;\n\t}\n}\n\n@layer B {\n\t.foo {\n\t\tcolor: red;\n\t}\n}\n```\n\n### onImportLayerRule\n\nThe `@import` at-rule can also be used with cascade layers, specifically to create a new layer like so: \n```css\n@import 'theme.css' layer(utilities);\n```\nIf your CSS uses `@import` with layers, you will also need the [postcss-import] plugin. This plugin alone will not handle the `@import` at-rule.  \n\nThis plugin will warn you when it detects that [postcss-import] did not transform`@import` at-rules.\n\n```js\npostcssCascadeLayers({ onImportLayerRule: 'warn' }) // 'warn' | false\n```\n\n### Contributors\nThe contributors to this plugin were [Olu Niyi-Awosusi] and [Sana Javed] from [Oddbird] and Romain Menke.\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#cascade-layers\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-cascade-layers\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Cascade Layers]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers\n[Cascade Layers Specification]: https://www.w3.org/TR/css-cascade-5/#layering\n[A Complete Guide to CSS Cascade Layers]: https://css-tricks.com/css-cascade-layers/\n[Olu Niyi-Awosusi]: https://github.com/oluoluoxenfree\n[Sana Javed]: https://github.com/sanajaved7\n[Oddbird]: https://github.com/oddbird\n[postcss-import]: https://github.com/postcss/postcss-import\n",
 	"readmeFilename": "README.md",
-	"_downloads": 20222957
+	"_downloads": 20089833
 }

npm-data/plugins.json

@@ -287,5 +287,5 @@
 	],
 	"readme": "# PostCSS Color Mix Variadic Function Arguments [<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-color-mix-variadic-function-arguments --save-dev`\n\n[PostCSS Color Mix Variadic Function Arguments] lets you use the `color-mix()` function with any number of arguments following the [CSS Color 5 Specification].\n\n```css\n.red {\n\tcolor: color-mix(in srgb, red);\n}\n\n.grey {\n\tcolor: color-mix(in srgb, red, lime, blue);\n}\n\n/* becomes */\n\n.red {\n\tcolor: rgb(255, 0, 0);\n}\n\n.grey {\n\tcolor: rgb(85, 85, 85);\n}\n```\n\n> [!NOTE]\n> We can not dynamically resolve `var()` arguments in `color-mix()`, only static values will work.\n\n## Usage\n\nAdd [PostCSS Color Mix Variadic Function Arguments] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-color-mix-variadic-function-arguments --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssColorMixVariadicFunctionArguments = require('@csstools/postcss-color-mix-variadic-function-arguments');\n\npostcss([\n\tpostcssColorMixVariadicFunctionArguments(/* 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\npostcssColorMixVariadicFunctionArguments({ preserve: true })\n```\n\n```css\n.red {\n\tcolor: color-mix(in srgb, red);\n}\n\n.grey {\n\tcolor: color-mix(in srgb, red, lime, blue);\n}\n\n/* becomes */\n\n.red {\n\tcolor: rgb(255, 0, 0);\n\tcolor: color-mix(in srgb, red);\n}\n\n.grey {\n\tcolor: rgb(85, 85, 85);\n\tcolor: color-mix(in srgb, red, lime, blue);\n}\n```\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#color-mix-variadic-function-arguments\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-color-mix-variadic-function-arguments\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Color Mix Variadic Function Arguments]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-variadic-function-arguments\n[CSS Color 5 Specification]: https://www.w3.org/TR/css-color-5/#color-mix\n",
 	"readmeFilename": "README.md",
-	"_downloads": 2325242
+	"_downloads": 2358693
 }

npm-data/plugins/@alicd/cone-postcss-pxtorem.json

@@ -2220,5 +2220,5 @@
 	],
 	"readme": "# PostCSS Contrast Color 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-contrast-color-function --save-dev`\n\n[PostCSS Contrast Color Function] lets you dynamically specify a text color with adequate contrast following the [CSS Color 5 Specification].\n\n```css\n.color {\n\tcolor: contrast-color(oklch(82% 0.2 330));\n}\n\n/* becomes */\n\n.color {\n\tcolor: rgb(0, 0, 0);\n\tcolor: contrast-color(oklch(82% 0.2 330));\n}\n```\n\n## Usage\n\nAdd [PostCSS Contrast Color Function] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-contrast-color-function --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssContrastColorFunction = require('@csstools/postcss-contrast-color-function');\n\npostcss([\n\tpostcssContrastColorFunction(/* 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 preserved.\n\n```js\npostcssContrastColorFunction({ preserve: false })\n```\n\n```css\n.color {\n\tcolor: contrast-color(oklch(82% 0.2 330));\n}\n\n/* becomes */\n\n.color {\n\tcolor: rgb(0, 0, 0);\n}\n```\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#contrast-color-function\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-contrast-color-function\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Contrast Color Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-contrast-color-function\n[CSS Color 5 Specification]: https://drafts.csswg.org/css-color-5/#contrast-color\n",
 	"readmeFilename": "README.md",
-	"_downloads": 347
+	"_downloads": 336
 }

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

@@ -492,5 +492,5 @@
 	],
 	"readme": "# PostCSS Debug Logger [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\">][PostCSS]\n\n```bash\nnpm install @csstools/postcss-debug-logger --save-dev\n```\n\n[PostCSS Debug Logger] logs the AST nodes PostCSS is processing.\n\nThis is mainly useful to track down infinite loops in PostCSS plugins.\n\n## Usage\n\nAdd [PostCSS Debug Logger] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-debug-logger --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssDebugLogger = require('@csstools/postcss-debug-logger');\n\npostcss([\n\tpostcssDebugLogger(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n\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-debug-logger\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Debug Logger]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-debug-logger\n",
 	"readmeFilename": "README.md",
-	"_downloads": 2463
+	"_downloads": 2417
 }