collect plugins data

Author: github-actions[bot]

npm-data/links.json

@@ -477,5 +477,5 @@
 	],
 	"readme": "# PostCSS plugin for typesafe CSS Custom Properties \n\nThis package adds a `token(...)` function to your CSS, which checks and parses the token passed in the argument and turns it into a CSS Custom Property (`var(--variable-name)`).\n\n## Install\n\nInstall PostCSS and this plugin as dev dependencies.\n\n```sh\nyarn add postcss @atb-as/token --dev\n```\n\n### Configure the plugin\n\nAdd a `postcss.config.json` file in the root of your project with the following content, or extend the current one.\n\n```json\n/** postcss.config.json */\n\n{\n  \"plugins\": [\n    \"@atb-as/token\"\n  ]\n}\n```\n\n#### NextJS\n\n> ⚠️ [NextJS preconfigures PostCSS](https://nextjs.org/docs/pages/building-your-application/configuring/post-css).\n> Therefore, we need to include the entire NextJS config for PostCSS\n> and add the `@atb-as/token` plugin in addition.\n\nFor NextJS `15.0.3`, the default PostCSS configuration with the `@atb-as/token` plugin shows below. This is also\nconfirmed to work on NextJS `14.2.13`.\n\nFor this configuration to work, we also need to add other PostCSS plugins explicitly to our `package.json`.\n\n```sh\nyarn add postcss-flexbugs-fixes postcss-preset-env --dev\n```\n\n```json\n/** postcss.config.json */\n{\n  \"plugins\": [\n    \"postcss-flexbugs-fixes\",\n    [\n      \"postcss-preset-env\",\n      {\n        \"autoprefixer\": {\n          \"flexbox\": \"no-2009\"\n        },\n        \"stage\": 3,\n        \"features\": {\n          \"custom-properties\": false\n        }\n      }\n    ],\n    \"@atb-as/token\"\n  ]\n}\n```\n\n## Usage\n\nThis plugin enables a `token` function in CSS, which checks the validity of the token and returns the\nmatching CSS Custom Property.\n\n`token(variable)`: `string`\nReplaces the token call with the corresponding CSS Custom Property.\n\nThrows an error if the variable does not exist or if the syntax is incorrect.\n\n- `variable`: `string`\nThe camelCase name of a variable surrounded by single quote `'` or double quotes `\"` segmented by a dot `.`.\n\n### Example\n\n```css\n/** button.module.css */\n\n.button--primary {\n  color: token('color.interactive.0.foreground.primary');\n  background-color: token('color.interactive.0.background');\n}\n```\n\nThis is compiled to CSS Custom Properties.\n\n```css\n/** Compiled button.module.css */\n\n.button--primary {\n  color: var(--color-interactive-0-foreground-primary);\n  background-color: var(--color-interactive-0-background);\n}\n```\n\n",
 	"readmeFilename": "README.md",
-	"_downloads": 174
+	"_downloads": 279
 }

npm-data/maintained-plugins.json

@@ -255,5 +255,5 @@
 	"license": "MIT",
 	"readme": "# postcss-modules\n\nA [PostCSS] plugin to use [CSS Modules] everywhere. Not only at the client side.\n\n[postcss]: https://github.com/postcss/postcss\n[css modules]: https://github.com/css-modules/css-modules\n\n## What is this?\n\nFor example, you have the following CSS:\n\n```css\n/* styles.css */\n:global .page {\n\tpadding: 20px;\n}\n\n.title {\n\tcomposes: title from \"./mixins.css\";\n\tcolor: green;\n}\n\n.article {\n\tfont-size: 16px;\n}\n\n/* mixins.css */\n.title {\n\tcolor: black;\n\tfont-size: 40px;\n}\n\n.title:hover {\n\tcolor: red;\n}\n```\n\nAfter the transformation it will become like this:\n\n```css\n._title_116zl_1 {\n\tcolor: black;\n\tfont-size: 40px;\n}\n\n._title_116zl_1:hover {\n\tcolor: red;\n}\n\n.page {\n\tpadding: 20px;\n}\n\n._title_xkpkl_5 {\n\tcolor: green;\n}\n\n._article_xkpkl_10 {\n\tfont-size: 16px;\n}\n```\n\nAnd the plugin will give you a JSON object for transformed classes:\n\n```json\n{\n\t\"title\": \"_title_xkpkl_5 _title_116zl_1\",\n\t\"article\": \"_article_xkpkl_10\"\n}\n```\n\n## Usage\n\n### Saving exported classes\n\nBy default, a JSON file with exported classes will be placed next to corresponding CSS.\nBut you have a freedom to make everything you want with exported classes, just\nuse the `getJSON` callback. For example, save data about classes into a corresponding JSON file:\n\n```js\npostcss([\n\trequire(\"postcss-modules\")({\n\t\tgetJSON: function (cssFileName, json, outputFileName) {\n\t\t\tvar path = require(\"path\");\n\t\t\tvar cssName = path.basename(cssFileName, \".css\");\n\t\t\tvar jsonFileName = path.resolve(\"./build/\" + cssName + \".json\");\n\t\t\tfs.writeFileSync(jsonFileName, JSON.stringify(json));\n\t\t},\n\t}),\n]);\n```\n\n`getJSON` may also return a `Promise`.\n\n### Generating scoped names\n\nBy default, the plugin assumes that all the classes are local. You can change\nthis behaviour using the `scopeBehaviour` option:\n\n```js\npostcss([\n\trequire(\"postcss-modules\")({\n\t\tscopeBehaviour: \"global\", // can be 'global' or 'local',\n\t}),\n]);\n```\n\nTo define paths for global modules, use the `globalModulePaths` option.\nIt is an array with regular expressions defining the paths:\n\n```js\npostcss([\n  require('postcss-modules')({\n    globalModulePaths: [/path\\/to\\/legacy-styles/, /another\\/paths/],\n  });\n]);\n```\n\nTo generate custom classes, use the `generateScopedName` callback:\n\n```js\npostcss([\n\trequire(\"postcss-modules\")({\n\t\tgenerateScopedName: function (name, filename, css) {\n\t\t\tvar path = require(\"path\");\n\t\t\tvar i = css.indexOf(\".\" + name);\n\t\t\tvar line = css.substr(0, i).split(/[\\r\\n]/).length;\n\t\t\tvar file = path.basename(filename, \".css\");\n\n\t\t\treturn \"_\" + file + \"_\" + line + \"_\" + name;\n\t\t},\n\t}),\n]);\n```\n\nOr just pass an interpolated string to the `generateScopedName` option\n(More details [here](https://github.com/webpack/loader-utils#interpolatename)):\n\n```js\npostcss([\n\trequire(\"postcss-modules\")({\n\t\tgenerateScopedName: \"[name]__[local]___[hash:base64:5]\",\n\t}),\n]);\n```\n\nIt's possible to add custom hash to generate more unique classes using the `hashPrefix` option (like in [css-loader](https://webpack.js.org/loaders/css-loader/#hashprefix)):\n\n```js\npostcss([\n\trequire(\"postcss-modules\")({\n\t\tgenerateScopedName: \"[name]__[local]___[hash:base64:5]\",\n\t\thashPrefix: \"prefix\",\n\t}),\n]);\n```\n\n### Exporting globals\n\nIf you need to export global names via the JSON object along with the local ones, add the `exportGlobals` option:\n\n```js\npostcss([\n\trequire(\"postcss-modules\")({\n\t\texportGlobals: true,\n\t}),\n]);\n```\n\n### Loading source files\n\nIf you need, you can pass a custom loader (see [FileSystemLoader] for example):\n\n```js\npostcss([\n\trequire(\"postcss-modules\")({\n\t\tLoader: CustomLoader,\n\t}),\n]);\n```\n\nYou can also pass any needed root path:\n\n```js\npostcss([\n  require('postcss-modules')({\n    root: 'C:\\\\',\n  });\n]);\n```\n\n### localsConvention\n\nType: `String | (originalClassName: string, generatedClassName: string, inputFile: string) => className: (string|string[])`\nDefault: `null`\n\nStyle of exported classnames, the keys in your json.\n\n|         Name          |    Type    | Description                                                                                      |\n|:---------------------:| :--------: |:-------------------------------------------------------------------------------------------------|\n|   **`'camelCase'`**   | `{String}` | Class names will be camelized, the original class name will not to be removed from the locals    |\n| **`'camelCaseOnly'`** | `{String}` | Class names will be camelized, the original class name will be removed from the locals           |\n|    **`'dashes'`**     | `{String}` | Only dashes in class names will be camelized                                                     |\n|  **`'dashesOnly'`**   | `{String}` | Dashes in class names will be camelized, the original class name will be removed from the locals |\n|      **`'all'`**      | `{String}` | Apply camelCase, dashes, and the orignional naming convention                                    |\n|     **`'none'`**      | `{String}` | Only use the orignional naming convention with out locals                                        |\n\nIn lieu of a string, a custom function can generate the exported class names.\n\n### Resolve path alias\n\nYou can rewrite paths for `composes/from` by using the `resolve` option.\nIt's useful when you need to resolve custom path alias.\n\nParameters:\n\n-   `file` — a module we want to resolve\n-   `importer` — the file that imports the module we want to resolve\n\nReturn value: `string | null | Promise<string | null>`\n\n```js\npostcss([\n\trequire(\"postcss-modules\")({\n    \tresolve: function (file, importer) {\n\t\t\treturn path.resolve(\n\t\t\t\tpath.dirname(importer),\n\t\t\t\tfile.replace(/^@/, process.cwd()\n\t\t\t);\n    \t},\n  \t}),\n]);\n```\n\n## Integration with templates\n\nThe plugin only transforms CSS classes to CSS modules.\nBut you probably want to integrate these CSS modules with your templates.\nHere are some examples.\n\nAssume you've saved project's CSS modules in `cssModules.json`:\n\n```json\n{\n\t\"title\": \"_title_xkpkl_5 _title_116zl_1\",\n\t\"article\": \"_article_xkpkl_10\"\n}\n```\n\n### Pug (ex-Jade)\n\nLet's say you have a Pug template `about.jade`:\n\n```jade\nh1(class=css.title) postcss-modules\narticle(class=css.article) A PostCSS plugin to use CSS Modules everywhere\n```\n\nRender it:\n\n```js\nvar jade = require(\"jade\");\nvar cssModules = require(\"./cssModules.json\");\nvar html = jade.compileFile(\"about.jade\")({ css: cssModules });\nconsole.log(html);\n```\n\nAnd you'll get the following HTML:\n\n```html\n<h1 class=\"_title_xkpkl_5 _title_116zl_1\">postcss-modules</h1>\n<article class=\"_article_xkpkl_10\">\n\tA PostCSS plugin to use CSS Modules everywhere\n</article>\n```\n\n### HTML\n\nFor HTML transformation we'll use [PostHTML](https://github.com/posthtml/posthtml) and [PostHTML CSS Modules](https://github.com/maltsev/posthtml-css-modules):\n\n```bash\nnpm install --save posthtml posthtml-css-modules\n```\n\nHere is our template `about.html`:\n\n```html\n<h1 css-module=\"title\">postcss-modules</h1>\n<article css-module=\"article\">\n\tA PostCSS plugin to use CSS Modules everywhere\n</article>\n```\n\nTransform it:\n\n```js\nvar fs = require(\"fs\");\nvar posthtml = require(\"posthtml\");\nvar posthtmlCssModules = require(\"posthtml-css-modules\");\nvar template = fs.readFileSync(\"./about.html\", \"utf8\");\n\nposthtml([posthtmlCssModules(\"./cssModules.json\")])\n\t.process(template)\n\t.then(function (result) {\n\t\tconsole.log(result.html);\n\t});\n```\n\n(for using other build systems please check [the documentation of PostHTML](https://github.com/posthtml/posthtml/blob/master/readme.md))\n\nAnd you'll get the following HTML:\n\n```html\n<h1 class=\"_title_xkpkl_5 _title_116zl_1\">postcss-modules</h1>\n<article class=\"_article_xkpkl_10\">\n\tA PostCSS plugin to use CSS Modules everywhere\n</article>\n```\n\n## May I see the plugin in action?\n\nSure! Take a look at the [example](https://github.com/outpunk/postcss-modules-example).\n\nSee [PostCSS] docs for examples for your environment and don't forget to run\n\n```\nnpm install --save-dev postcss postcss-modules\n```\n\n[filesystemloader]: https://github.com/css-modules/css-modules-loader-core/blob/master/src/file-system-loader.js\n\n## Sponsors\n\n-   Dmitry Olyenyov\n",
 	"readmeFilename": "README.md",
-	"_downloads": 15
+	"_downloads": 16
 }

npm-data/maybe-plugins.json

@@ -755,5 +755,5 @@
 	],
 	"readme": "# PostCSS Content Alt Text [<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-content-alt-text --save-dev`\n\n[PostCSS Content Alt Text] generates fallback values for `content` with alt text following the [CSS Generated Content Module].\n\n```pcss\n.foo {\n\tcontent: url(tree.jpg) / \"A beautiful tree in a dark forest\";\n}\n\n.bar {\n\tcontent: \">\" / \"\";\n}\n\n/* becomes */\n\n.foo {\n\tcontent: url(tree.jpg)  \"A beautiful tree in a dark forest\";\n\tcontent: url(tree.jpg) / \"A beautiful tree in a dark forest\";\n}\n\n.bar {\n\tcontent: \">\" ;\n\tcontent: \">\" / \"\";\n}\n```\n\n## Usage\n\nAdd [PostCSS Content Alt Text] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-content-alt-text --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssContentAltText = require('@csstools/postcss-content-alt-text');\n\npostcss([\n\tpostcssContentAltText(/* 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\npostcssContentAltText({ preserve: false })\n```\n\n```pcss\n.foo {\n\tcontent: url(tree.jpg) / \"A beautiful tree in a dark forest\";\n}\n\n.bar {\n\tcontent: \">\" / \"\";\n}\n\n/* becomes */\n\n.foo {\n\tcontent: url(tree.jpg)  \"A beautiful tree in a dark forest\";\n}\n\n.bar {\n\tcontent: \">\" ;\n}\n```\n\n### stripAltText\n\nThe `stripAltText` option determines whether the alt text is removed from the value.  \nBy default, it is not removed.  \nInstead it is added to the `content` value itself to ensure content is accessible.\n\nOnly set this to `true` if you are sure the alt text is not needed.\n\n```js\npostcssContentAltText({ stripAltText: true })\n```\n\n```pcss\n.foo {\n\tcontent: url(tree.jpg) / \"A beautiful tree in a dark forest\";\n}\n\n.bar {\n\tcontent: \">\" / \"\";\n}\n\n/* becomes */\n\n.foo {\n\tcontent: url(tree.jpg) ;\n\tcontent: url(tree.jpg) / \"A beautiful tree in a dark forest\";\n}\n\n.bar {\n\tcontent: \">\" ;\n\tcontent: \">\" / \"\";\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/#content-alt-text\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-content-alt-text\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Content Alt Text]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-content-alt-text\n[CSS Generated Content Module]: https://drafts.csswg.org/css-content/#content-property\n",
 	"readmeFilename": "README.md",
-	"_downloads": 4115479
+	"_downloads": 4277295
 }

npm-data/plugins.json

@@ -1878,5 +1878,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.dynamic {\n\tcolor: contrast-color(oklch(82% 0.2 330));\n}\n\n.max {\n\tcolor: contrast-color(oklch(30% 0.2 79) max);\n}\n\n/* becomes */\n\n.dynamic {\n\tcolor: color(display-p3 0.15433 0 0.15992);\n\tcolor: contrast-color(oklch(82% 0.2 330));\n}@supports not (color: contrast-color(red max)) {@media (prefers-contrast: more) {.dynamic {\n\tcolor: rgb(0, 0, 0);\n}\n\t}\n}@supports not (color: contrast-color(red max)) {@media (prefers-contrast: less) {.dynamic {\n\tcolor: color(display-p3 0.2925 0 0.30177);\n}\n\t}\n}\n\n.max {\n\tcolor: rgb(255, 255, 255);\n\tcolor: contrast-color(oklch(30% 0.2 79) max);\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.dynamic {\n\tcolor: contrast-color(oklch(82% 0.2 330));\n}\n\n.max {\n\tcolor: contrast-color(oklch(30% 0.2 79) max);\n}\n\n/* becomes */\n\n.dynamic {\n\tcolor: color(display-p3 0.15433 0 0.15992);\n}@media (prefers-contrast: more) {.dynamic {\n\tcolor: rgb(0, 0, 0);\n}\n}@media (prefers-contrast: less) {.dynamic {\n\tcolor: color(display-p3 0.2925 0 0.30177);\n}\n}\n\n.max {\n\tcolor: rgb(255, 255, 255);\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": 249
+	"_downloads": 251
 }

npm-data/plugins/@atb-as/token.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": 1589
+	"_downloads": 1661
 }