collect plugins data

Author: github-actions[bot]

npm-data/links.json

@@ -155,5 +155,5 @@
 	"license": "CC0-1.0",
 	"readme": "# PostCSS Sass [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\">][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![Linux Build Status][cli-img]][cli-url]\n[![Windows Build Status][win-img]][win-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS Sass] lets you use [Sass] as a [PostCSS] plugin.\n\n```scss\n$font-stack:    Helvetica, sans-serif;\n$primary-color: #333;\n\n:root {\n  color: $primary-color;\n  font: 100% $font-stack;\n}\n\n/* becomes */\n\n:root {\n  color: #333;\n  font: 100% Helvetica, sans-serif;\n}\n```\n\n[PostCSS Sass] uses [dart-sass], letting you safely run transforms before and\nafter Sass, watching for changes to Sass imports, and preserving source maps.\n\n## Usage\n\nAdd [PostCSS Sass] to your build tool:\n\n```sh\nnpm install postcss @csstools/postcss-sass --save-dev\n```\n\n#### Node\n\nUse [PostCSS Sass] to process your CSS:\n\n```js\nrequire('@csstools/postcss-sass').process(YOUR_CSS);\n```\n\n#### PostCSS\n\nUse [PostCSS Sass] as a plugin:\n\n```js\npostcss([\n  require('@csstools/postcss-sass')(/* node-sass options */)\n]).process(YOUR_CSS);\n```\n\nThe standard CSS parser included with PostCSS may not be able to parse SCSS\nspecific features like inline comments. To accurately parse SCSS, use\nthe [SCSS Parser].\n\n```bash\nnpm install postcss-scss --save-dev\n```\n\n```js\nconst postcss = require('postcss');\nconst postcssSass = require('@csstools/postcss-sass');\n\npostcss([\n  postcssSass(/* pluginOptions */)\n]).process(YOUR_CSS, {\n  syntax: 'postcss-scss'\n});\n```\n\n#### Gulp\n\nAdd [Gulp PostCSS] to your build tool:\n\n```sh\nnpm install gulp-postcss --save-dev\n```\n\nUse [PostCSS Sass] in your Gulpfile:\n\n```js\nvar postcss = require('gulp-postcss');\n\ngulp.task('css', function () {\n  return gulp.src('./src/*.css').pipe(\n    postcss([\n      require('@csstools/postcss-sass')(/* node-sass options */)\n    ])\n  ).pipe(\n    gulp.dest('.')\n  );\n});\n```\n\n#### Grunt\n\nAdd [Grunt PostCSS] to your build tool:\n\n```sh\nnpm install grunt-postcss --save-dev\n```\n\nUse [PostCSS Sass] in your Gruntfile:\n\n```js\ngrunt.loadNpmTasks('grunt-postcss');\n\ngrunt.initConfig({\n  postcss: {\n    options: {\n      use: [\n        require('@csstools/postcss-sass')(/* node-sass options */)\n      ]\n    },\n    dist: {\n      src: '*.css'\n    }\n  }\n});\n```\n\n## Options\n\n[PostCSS Sass] options are directly forwarded to [dart-sass options].\n\n[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-sass.svg\n[cli-url]: https://travis-ci.org/jonathantneal/postcss-sass\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/@csstools/postcss-sass.svg\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-sass\n[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-sass.svg\n[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-sass\n\n[Gulp PostCSS]: https://github.com/postcss/gulp-postcss\n[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss\n[dart-sass]: https://github.com/sass/dart-sass\n[dart-sass options]: https://github.com/sass/dart-sass#javascript-api\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Sass]: https://github.com/jonathantneal/postcss-sass\n[Sass]: https://github.com/sass/dart-sass\n[SCSS Parser]: https://github.com/postcss/postcss-scss\n",
 	"readmeFilename": "README.md",
-	"_downloads": 118
+	"_downloads": 88
 }

npm-data/maintained-plugins.json

@@ -2810,5 +2810,5 @@
 	],
 	"readme": "# React Zero‑UI (Beta)\n\n**Instant UI state updates. ZERO React re‑renders. <1 KB runtime.**\n\nPre‑render your UI once, flip a `data-*` attribute to update — that's it.\n\n<a href=\"https://bundlephobia.com/package/@austinserb/[email protected]\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"https://badgen.net/bundlephobia/min/@austinserb/[email protected]\" alt=\"npm version\" /> </a><a href=\"https://www.npmjs.com/package/@austinserb/react-zero-ui\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"https://img.shields.io/npm/v/@austinserb/react-zero-ui\" alt=\"npm version\" /></a> <a href=\"https://opensource.org/licenses/MIT\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" alt=\"License: MIT\" /></a> ![CI](https://github.com/austin1serb/react-zero-ui/actions/workflows/ci.yml/badge.svg?branch=main)\n\n---\n\n\n## 📚 Quick Links\n\n- [⚡️ Quick Start](#️-quick-start)\n- [🏄‍♂️ Usage](#-usage)\n- [🧬 How it works](#-how-it-works)\n- [✅ Features](#-features)\n- [🏗 Best Practices](#-best-practices)\n\n---\n\n## 🚀 Live Demo\n\n| Example                                 | Link                                                                                                                                                        | What it shows                                                 | Link to Code                                                                                                                                        |\n| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Interactive menu with render tracker    | <a href=\"https://react-zero-ui.vercel.app/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Main Demo↗</strong></a>                                      | Compare Zero‑UI vs. React side‑by‑side while toggling a menu. | <a href=\"https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo\" target=\"_blank\" rel=\"noopener noreferrer\">Github</a>                 |\n| React benchmark (10 000 nested nodes)   | <a href=\"https://react-zero-ui.vercel.app/react\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>React 10k↗</strong></a>                                 | How long the traditional React render path takes.             | <a href=\"https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo/src/app/react\" target=\"_blank\" rel=\"noopener noreferrer\">Github</a>   |\n| Zero‑UI benchmark (10 000 nested nodes) | <a href=\"https://react-zero-ui.vercel.app/zero-ui\" target=\"_blank\" rel=\"noopener noreferrer\"><strong style=\"text-align: nowrap;\">Zero‑UI 10k↗</strong></a> | Identical DOM, but powered by Zero‑UI's `data-*` switch.      | <a href=\"https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo/src/app/zero-ui\" target=\"_blank\" rel=\"noopener noreferrer\">Github</a> |\n\n---\n\n## 🧐 Why Zero‑UI?\n\nEvery `setState` in React triggers the full VDOM → Diff → Reconciliation → Paint pipeline. For _pure UI state_ (themes, menus, toggles) that work is wasted.\n\n**Zero‑UI introduces \"_PRE‑rendering_\":**\n\n1. Tailwind variants for every state are **generated at build‑time**.\n2. The app **pre‑renders once**.\n3. Runtime state changes only **flip a `data-*` attribute on `<body>`**.\n\nResult → **5-10× faster visual updates** with **ZERO additional bundle cost**.\n\n### 📊 Micro‑benchmarks (Apple M1)\n\n| Nodes updated | React state | Zero‑UI | Speed‑up |\n| ------------- | ----------- | ------- | -------- |\n| 10,000        | \\~50 ms     | \\~5 ms  | **10×**  |\n| 25,000        | \\~180 ms    | \\~15 ms | **12×**  |\n| 50,000        | \\~300 ms    | \\~20 ms | **15×**  |\n\nRe‑run these numbers yourself via the links above.\n\n---\n\n## ⚡️ Quick Start\n\n> **Prerequisite:** Tailwind CSS v4 must already be initialized in your project.\n\n```bash\n# Inside an existing *Next.js (App Router)* or *Vite* repo\nnpx create-zero-ui\n```\n\nThat's it — the CLI patch‑installs the required Babel & PostCSS plugins and updates `configs` for you.\n\n### Manual Install\n\n```bash\nnpm install @austinserb/react-zero-ui\n```\n\nThen follow **Setup →** for your bundler.\n\n---\n\n## 🔧 Setup\n\n### Vite\n\n```js\n// vite.config.*\nimport { zeroUIPlugin } from '@austinserb/react-zero-ui/vite';\n\nexport default {\n\t// ❗️Remove the default `tailwindcss()` plugin — Zero‑UI extends it internally\n\tplugins: [zeroUIPlugin()],\n};\n```\n\n### Next.js (App Router)\n\n1. **Spread `bodyAttributes` on `<body>`** in your root layout.\n\n   ```tsx\n   // app/layout.tsx\n   import { bodyAttributes } from '@austinserb/react-zero-ui/attributes';\n   // or:  import { bodyAttributes } from '../.zero-ui/attributes';\n\n   export default function RootLayout({ children }) {\n   \treturn (\n   \t\t<html lang=\"en\">\n   \t\t\t<body {...bodyAttributes}>{children}</body>\n   \t\t</html>\n   \t);\n   }\n   ```\n\n2. **Add the PostCSS plugin (must come _before_ Tailwind).**\n\n   ```js\n   // postcss.config.js\n   module.exports = { plugins: { '@austinserb/react-zero-ui/postcss': {}, tailwindcss: {} } };\n   ```\n\n---\n\n## 🏄‍♂️ Usage\n\n![react zero ui usage explained](docs/assets/useui-explained.webp)\n\n---\n\n## 🛠 API\n\n### `useUI(key, defaultValue)`\n\n```ts\nconst [staleValue, setValue] = useUI<'open' | 'closed'>('sidebar', 'closed');\n```\n\n- `key` → becomes `data-{key}` on `<body>`.\n- `defaultValue` → optional, prevents FOUC.\n- **Note:** the returned `staleValue` does **not** update (`useUI` is write‑only).\n\n### Tailwind variants\n\n```jsx\n<div className=\"sidebar-open:translate-x-0 sidebar-closed:-translate-x-full\" />\n```\n\nAny `data-{key}=\"{value}\"` pair becomes a variant: `{key}-{value}:`.\n\n---\n\n## 🧬 How it works\n\n1. **`useUI`** → writes to `data-*` attributes on `<body>`.\n2. **Babel plugin** → scans code, finds every `key/value`, injects them into **PostCSS**.\n3. **PostCSS plugin** → generates static Tailwind classes **at build‑time**.\n4. **Runtime** → changing state only touches the attribute — no VDOM, no reconciliation, no re‑paint.\n\n---\n\n## ✅ Features\n\n- **Zero React re‑renders** for UI‑only state.\n- **Global setters** — call from any component or util.\n- **Tiny**: < 1 KB gzipped runtime.\n- **TypeScript‑first**.\n- **SSR‑friendly** (Next.js & Vite SSR).\n- **Framework‑agnostic CSS** — generated classes work in plain HTML / Vue / Svelte as well.\n\n---\n\n## 🏗 Best Practices\n\n1. **UI state only** → themes, layout toggles, feature flags.\n2. **Business logic stays in React** → fetching, data mutation, etc.\n3. **Kebab‑case keys** → e.g. `sidebar-open`.\n4. **Provide defaults** to avoid Flash‑Of‑Unstyled‑Content.\n\n---\n\n## 🤝 Contributing\n\nPRs & issues welcome! Please read the [Contributing Guide](CONTRIBUTING.md).\n\n---\n\n## 📜 License\n\n[MIT](LICENSE) © Austin Serb\n\n---\n\nBuilt with ❤️ for the React community. If Zero‑UI makes your app feel ZERO fast, please ⭐️ the repo!\n",
 	"readmeFilename": "README.md",
-	"_downloads": 1178
+	"_downloads": 1347
 }

npm-data/maybe-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": 525
+	"_downloads": 559
 }

npm-data/plugins.json

@@ -2769,5 +2769,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```pcss\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```pcss\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```pcss\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": 19527080
+	"_downloads": 19014663
 }