collect plugins data

Author: github-actions[bot]

npm-data/links.json

@@ -213,5 +213,5 @@
 	},
 	"license": "MIT",
 	"readmeFilename": "README.md",
-	"_downloads": 11
+	"_downloads": 9
 }

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": 98
+	"_downloads": 97
 }

npm-data/maybe-plugins.json

@@ -3001,5 +3001,5 @@
 	],
 	"readme": "# PostCSS Design Tokens [<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-design-tokens --save-dev`\n\n[PostCSS Design Tokens] lets you use design tokens in your CSS source files.\n\n```json\n{\n\t\"color\": {\n\t\t\"background\": {\n\t\t\t\"primary\": { \"value\": \"#fff\" }\n\t\t}\n\t},\n\t\"size\": {\n\t\t\"spacing\": {\n\t\t\t\"small\": { \"value\": \"16px\" },\n\t\t\t\"medium\": { \"value\": \"18px\" },\n\t\t\t\"medium-alias\": { \"value\": \"{size.spacing.medium}\" }\n\t\t}\n\t},\n\t\"viewport\": {\n\t\t\"medium\": { \"value\": \"35rem\" }\n\t}\n}\n```\n\n```pcss\n@design-tokens url('./tokens.json') format('style-dictionary3');\n\n.foo {\n\tcolor: design-token('color.background.primary');\n\tpadding-top: design-token('size.spacing.small');\n\tpadding-left: design-token('size.spacing.small' to px);\n\tpadding-bottom: design-token('size.spacing.small' to rem);\n}\n\n@media (min-width: design-token('viewport.medium')) {\n\t.foo {\n\t\tpadding-bottom: design-token('size.spacing.medium-alias' to rem);\n\t}\n}\n\n/* becomes */\n\n.foo {\n\tcolor: #fff;\n\tpadding-top: 16px;\n\tpadding-left: 16px;\n\tpadding-bottom: 1rem;\n}\n\n@media (min-width: 35rem) {\n\t.foo {\n\t\tpadding-bottom: 1.125rem;\n\t}\n}\n```\n\n## Usage\n\nAdd [PostCSS Design Tokens] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-design-tokens --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssDesignTokens = require('@csstools/postcss-design-tokens');\n\npostcss([\n\tpostcssDesignTokens(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n\n\n## Formats\n\nAt this time there is no standardized format for design tokens.\nAlthough there is an ongoing effort to create this, we feel it is still too early to adopt this.\n\nFor the moment we only support [Style Dictionary](https://amzn.github.io/style-dictionary/#/).\nUse `style-dictionary3` in `@design-tokens` rules to pick this format.\n\n## Options\n\n### is\n\nThe `is` option determines which design tokens are used.<br>\nThis allows you to generate multiple themed stylesheets<br>by running PostCSS multiple times with different configurations.\n\nBy default only `@design-tokens` without any `when('foo')` conditions are used.\n\n_This plugin itself does not produce multiple outputs, it only provides an API to change the output._\n\n#### Example usage\n\n**For these two token files :**\n\n```json\n{\n\t\"color\": {\n\t\t\"background\": {\n\t\t\t\"primary\": { \"value\": \"#0ff\" }\n\t\t}\n\t}\n}\n```\n\n```json\n{\n\t\"color\": {\n\t\t\"background\": {\n\t\t\t\"primary\": { \"value\": \"#f0f\" }\n\t\t}\n\t}\n}\n```\n\n**And this CSS :**\n\n```pcss\n@design-tokens url('./tokens-brand-1.json') format('style-dictionary3');\n@design-tokens url('./tokens-brand-2.json') when('brand-2') format('style-dictionary3');\n\n.foo {\n\tcolor: design-token('color.background.primary');\n}\n```\n\n**You can configure :**\n\n##### No `is` option.\n\n```js\npostcssDesignTokens()\n```\n\n```pcss\n@design-tokens url('./tokens-brand-1.json') format('style-dictionary3');\n@design-tokens url('./tokens-brand-2.json') when('brand-2') format('style-dictionary3');\n\n.foo {\n\tcolor: design-token('color.background.primary');\n}\n\n/* becomes */\n\n.foo {\n\tcolor: #0ff;\n}\n```\n\n##### `is` option set to 'brand-2'.\n\n```js\npostcssDesignTokens({ is: ['brand-2'] })\n```\n\n```pcss\n@design-tokens url('./tokens-brand-1.json') format('style-dictionary3');\n@design-tokens url('./tokens-brand-2.json') when('brand-2') format('style-dictionary3');\n\n.foo {\n\tcolor: design-token('color.background.primary');\n}\n\n/* becomes */\n\n.foo {\n\tcolor: #f0f;\n}\n```\n\n### unitsAndValues\n\nThe `unitsAndValues` option allows you to control some aspects of how design values are converted to CSS.\n`rem` <-> `px` for example can only be calculated when we know the root font size.\n\n#### rootFontSize\n\ndefaults to `16`\n\n```js\npostcssDesignTokens({\n\tunitsAndValues: {\n\t\trootFontSize: 20,\n\t},\n})\n```\n\n```pcss\n@design-tokens url('./tokens.json') format('style-dictionary3');\n\n.foo {\n\tcolor: design-token('color.background.primary');\n\tpadding-top: design-token('size.spacing.small');\n\tpadding-left: design-token('size.spacing.small' to px);\n\tpadding-bottom: design-token('size.spacing.small' to rem);\n}\n\n@media (min-width: design-token('viewport.medium')) {\n\t.foo {\n\t\tpadding-bottom: design-token('size.spacing.medium-alias' to rem);\n\t}\n}\n\n/* becomes */\n\n.foo {\n\tcolor: #fff;\n\tpadding-top: 16px;\n\tpadding-left: 16px;\n\tpadding-bottom: 0.8rem;\n}\n\n@media (min-width: 35rem) {\n\t.foo {\n\t\tpadding-bottom: 0.9rem;\n\t}\n}\n```\n\n### Customize function and at rule names\n\n#### importAtRuleName\n\nThe `importAtRuleName` option allows you to set a custom alias for `@design-tokens`.\n\n```js\npostcssDesignTokens({ importAtRuleName: 'tokens' })\n```\n\n```pcss\n@tokens url('./tokens.json') format('style-dictionary3');\n\n.foo {\n\tcolor: design-token('color.background.primary');\n\tpadding-top: design-token('size.spacing.small');\n\tpadding-left: design-token('size.spacing.small' to px);\n\tpadding-bottom: design-token('size.spacing.small' to rem);\n}\n\n/* becomes */\n\n.foo {\n\tcolor: #fff;\n\tpadding-top: 16px;\n\tpadding-left: 16px;\n\tpadding-bottom: 1rem;\n}\n```\n\n#### valueFunctionName\n\nThe `valueFunctionName` option allows you to set a custom alias for `design-token`.\n\n```js\npostcssDesignTokens({ valueFunctionName: 'token' })\n```\n\n```pcss\n@design-tokens url('./tokens.json') format('style-dictionary3');\n\n.foo {\n\tcolor: token('color.background.primary');\n\tpadding-top: token('size.spacing.small');\n\tpadding-left: token('size.spacing.small' to px);\n\tpadding-bottom: token('size.spacing.small' to rem);\n}\n\n/* becomes */\n\n.foo {\n\tcolor: #fff;\n\tpadding-top: 16px;\n\tpadding-left: 16px;\n\tpadding-bottom: 1rem;\n}\n```\n\n## Syntax\n\n[PostCSS Design Tokens] is non-standard and is not part of any official CSS Specification.\n\n### Editor support\n\nThis is all very new and we hope that one day design tokens will become first class citizens in editors and other tools.\nUntil then we will do our best to provide extensions.\nThese will have rough edges but should illustrate were we want to go.\n\n| editor | plugin |\n| --- | --- |\n| VSCode | [CSSTools Design Tokens](https://marketplace.visualstudio.com/items?itemName=RomainMenke.csstools-design-tokens) |\n\n### `@design-tokens` rule\n\nThe `@design-tokens` rule is used to import design tokens from a JSON file into your CSS.\n\n```pcss\n@design-tokens url('./tokens.json') format('style-dictionary3');\n```\n\n```pcss\n@design-tokens url('./tokens.json') format('style-dictionary3');\n@design-tokens url('./tokens-dark-mode.json') format('style-dictionary3') when('dark');\n```\n\nYou can also import tokens from an `npm` package:\n\n```pcss\n@design-tokens url('node_modules:my-npm-package/tokens.json') format('style-dictionary3');\n@design-tokens url('node_modules:my-npm-package/tokens-dark-mode.json') format('style-dictionary3') when('dark');\n```\n\n```\n@design-tokens [ <url> | <string> ]\n               [ when(<theme-condition>*) ]?\n               format(<format-name>);\n\n<theme-condition> = <string>\n\n<format-name> = [ 'style-dictionary3' ]\n```\n\nAll `@design-tokens` rules in a document are evaluated in order of appearance.\nIf a token with the same path and name already exists it will be overridden.\n\nAll `@design-tokens` rules are evaluated before any `design-token()` functions.\n\n`@design-tokens` rules can be conditional through `when` conditions. Multiple values can be specified in `when`.<br>\nMultiple conditions always have an `AND` relationship.\n\n> ```css\n> /* only evaluated when tooling receives 'blue' and 'muted' as arguments */\n> @design-tokens url('./tokens.json') format('style-dictionary3') when('blue' 'muted');\n> ```\n\n`@design-tokens` rules can never be made conditional through `@supports`, `@media` or other conditional rules.\n\n> ```css\n> @media (min-width: 500px) {\n>   @design-tokens url('./tokens.json') format('style-dictionary3'); /* always evaluated */\n> }\n> ```\n\nAny form of nesting is meaningless, `@design-tokens` will always be evaluated as if they were declared at the top level.\n\n\n### `design-token()` function\n\nThe `design-token()` function takes a token path and returns the token value.\n\n```pcss\n.foo {\n\tcolor: design-token('color.background.primary');\n}\n```\n\n```\ndesign-token() = design-token( <token-path> [ to <unit> ]? )\n\n<token-path> = <string>\n<unit> = [ px | rem | ... ]\n```\n\nThe plugin can convert `px` to `rem` and `rem` to `px` via the [`unitsandvalues`](#unitsandvalues) plugin options.\nWhen a design token is unit-less any `unit` can be assigned with `to`.\n\n#### [Stylelint](https://stylelint.io/user-guide/rules/declaration-property-value-no-unknown/#propertiessyntax--property-syntax-)\n\nStylelint is able to check for unknown property values.\nSetting the correct configuration for this rule makes it possible to check even non-standard syntax.\n\n```js\n\t// Disallow unknown values for properties within declarations.\n\t'declaration-property-value-no-unknown': [\n\t\ttrue,\n\t\t{\n\t\t\tpropertiesSyntax: {\n\t\t\t\tcolor: '| <design-token()>',\n\t\t\t\t// ... more properties ...\n\t\t\t},\n\t\t\ttypesSyntax: {\n\t\t\t\t'<design-token()>': 'design-token( <string> [ to <ident> ]? )',\n\t\t\t},\n\t\t},\n\t],\n```\n\n## Further reading\n\n- [Why we think PostCSS Design Tokens is needed]\n- [About Design Tokens (Adobe Spectrum)]\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-design-tokens\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Design Tokens]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-design-tokens\n[Why we think PostCSS Design Tokens is needed]: https://github.com/csstools/postcss-plugins/wiki/Why-we-think-PostCSS-Design-Tokens-is-needed\n[About Design Tokens (Adobe Spectrum)]: https://spectrum.adobe.com/page/design-tokens/\n",
 	"readmeFilename": "README.md",
-	"_downloads": 9750
+	"_downloads": 10045
 }

npm-data/plugins.json

@@ -954,5 +954,5 @@
 	],
 	"readme": "# PostCSS Extract [<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-extract --save-dev`\n\n[PostCSS Extract] lets you easily export parts of your CSS source files to JavaScript objects.\n\nyour query :\n\n```css\nrule[selector*=\":root\" i] > decl[variable]\n```\n\nyour config :\n\n```js\npostcssExtract({\n\tqueries: {\n\t\t'your-export': 'rule[selector*=\":root\" i] > decl[variable]'\n\t},\n\tresults: function(results) {\n\t\tconsole.log(results)\n\t}\n})\n```\n\nyour css :\n\n```css\n:root {\n\t--your-property: cyan;\n}\n\n.other {\n\t--other-property: yellow;\n}\n```\n\nthe exported data :\n\n```js\n[\n\t{ type: 'decl', prop: '--your-property', value: 'cyan', variable: true },\n]\n```\n\n## Usage\n\nAdd [PostCSS Extract] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-extract --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssExtract = require('@csstools/postcss-extract');\n\npostcss([\n\tpostcssExtract(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n\n\n## Options\n\n### queries\n\nThe `queries` option let's you define which parts of your CSS are exported.\nEach query is written in CSS.\n\nSupported combinators:\n- `>` direct child\n- ` ` any descendant (space)\n- `+` adjacent sibling\n- `~` general sibling\n\nSupported selectors:\n- `*` any node\n- `atrule`\n- `rule`\n- `decl`\n- `comment`\n- `[type=decl]`\n- `[value=cyan]`\n- `[value=cyan i]` case insensitive\n- `[value^=cy]` starts with\n- `[value*=ya]` contains\n- `[value$=an]` ends with\n- `:not(<complex selector>)`\n\nBrowse the [PostCSS API](https://postcss.org/api/) to gain more insights into the AST naming and structure.\n\n```js\npostcssExtract({\n\tqueries: {\n\t\t'your-export': 'rule[selector*=\":root\" i] > decl[variable]'\n\t},\n})\n```\n\n### results\n\nThe `results` option let's you define a callback to receive results.\nYou can then apply further transforms on the data so that it fits your use case.\n\n```js\npostcssExtract({\n\tresults: (yourResults) => {\n\t\tconsole.log(yourResults);\n\t},\n})\n```\n\n### extractLate\n\nThe `extractLate` option let's you define if the queries are run early or late in the PostCSS process.\n\n`extractLate: false` uses `Once` in PostCSS.<br>\nThis means that it will try to run early.\n\n`extractLate: true` uses `OnceExit` in PostCSS.<br>\nThis means that it will try to run late.\n\nThe order of plugins is still respected if multiple plugins use `Once`|`OnceExit`.\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-extract\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Extract]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-extract\n",
 	"readmeFilename": "README.md",
-	"_downloads": 1541
+	"_downloads": 1581
 }

npm-data/plugins/@cameron-martin/postcss-modules.json

@@ -1049,5 +1049,5 @@
 	],
 	"readme": "# PostCSS Font Format [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\">][postcss]\n\n[<img alt=\"npm version\" src=\"https://img.shields.io/npm/v/@csstools/postcss-font-format-keywords.svg\" height=\"20\">][npm-url]\n[<img alt=\"Build Status\" src=\"https://github.com/csstools/postcss-plugins/workflows/test/badge.svg\" height=\"20\">][cli-url]\n[<img alt=\"Discord\" src=\"https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white\">][discord]\n<br><br>\n[<img alt=\"Baseline Status\" src=\"https://cssdb.org/images/badges-baseline/font-format-keywords.svg\" height=\"20\">][css-url]\n[<img alt=\"CSS Standard Status\" src=\"https://cssdb.org/images/badges/font-format-keywords.svg\" height=\"20\">][css-url]\n\n[PostCSS Font Format Keywords] lets you specify font formats as keywords, following the [CSS Fonts] specification.\n\n```pcss\n@font-face {\n  src: url(file.woff2) format(woff2);\n}\n\n/* becomes */\n\n@font-face {\n  src: url(file.woff2) format(\"woff2\");\n}\n```\n\n_See prior work by [valtlai](https://github.com/valtlai) here [postcss-font-format-keywords](https://github.com/valtlai/postcss-font-format-keywords)\nTo ensure long term maintenance and to provide the needed features this plugin was recreated based on valtlai's work._\n\n## Usage\n\nAdd [PostCSS Font Format Keywords] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-font-format-keywords --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssFontFormatKeywords = require('@csstools/postcss-font-format-keywords');\n\npostcss([\n  postcssFontFormatKeywords(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Font Format Keywords] runs in all Node environments, with special\ninstructions for:\n\n| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |\n| --- | --- | --- | --- | --- |\n\n## Options\n\n### preserve\n\nThe `preserve` option determines whether the original source\nis preserved. By default, it is not preserved.\n\n```js\npostcssFontFormatKeywords({ preserve: true })\n```\n\n```pcss\n@font-face {\n  src: url(file.woff2) format(woff2);\n}\n\n/* becomes */\n\n@font-face {\n  src: url(file.woff2) format(\"woff2\");\n  src: url(file.woff2) format(woff2);\n}\n```\n\n[postcss]: https://github.com/postcss/postcss\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#font-format-keywords\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-font-format-keywords\n\n[CSS Fonts]: https://www.w3.org/TR/css-fonts-4/#font-format-values\n[Gulp PostCSS]: https://github.com/postcss/gulp-postcss\n[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Loader]: https://github.com/postcss/postcss-loader\n[PostCSS Font Format Keywords]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-font-format-keywords\n",
 	"readmeFilename": "README.md",
-	"_downloads": 17648701
+	"_downloads": 18228000
 }