Skip to content

Commit b4a50a8

Browse files
collect plugins data
1 parent 1f71430 commit b4a50a8

204 files changed

Lines changed: 3123 additions & 2941 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: 208 additions & 208 deletions
Large diffs are not rendered by default.

npm-data/maintained-plugins.json

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

npm-data/maybe-plugins.json

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

npm-data/plugins.json

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

npm-data/plugins/@carbonorm/postcss-modules.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,6 @@
256256
"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",
257257
"readmeFilename": "README.md",
258258
"_downloads": [
259-
94,
260259
96,
261260
96,
262261
96,
@@ -275,6 +274,7 @@
275274
55,
276275
56,
277276
58,
278-
58
277+
58,
278+
56
279279
]
280280
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,7 @@
392392
1629,
393393
1459,
394394
1340,
395-
1217
395+
1217,
396+
929
396397
]
397398
}

npm-data/plugins/@cookie_gg/postcss-hover-media-query.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,5 +92,8 @@
9292
"license": "MIT",
9393
"readme": "# postcss-hover-media-query\n\nPostcss plugin that optimize the hover style in css.\n\n## Install\n\n```bash\n(npm|yarn|pnpm|bun) i -D postcss @cookie_gg/postcss-hover-media-query\n```\n\n## Usage\n\n```js:postcss.config.js\nmodule.exports = {\n ...\n plugins: [\n // other plugins...\n ['@cookie_gg/postcss-hover-media-query', {\n forceHoverable: false,\n }\n ]\n ]\n ...\n}\n```\n\n```css:style.css\n/* before */\nmain h1:hover, main h2 {\n color: blue;\n}\n\n/* after */\n@media (hover: hover) {\n main h1:hover {\n color: blue;\n }\n}\nmain h2 {\n color: blue;\n}\n```\n\n## Options\n\n**forceHoverable: `Boolean`**\n\n> default: 'false'\n\nIf you set this option to true, you can use `:force-hover` pseudo class which supports unknown elements.\n\n```css:style.css\n/* before */\nmain h1:force-hover {\n color: blue;\n}\n\n/* after */\n@media (hover: hover) {\n main h1:where(:any-link, :enabled, summary):hover {\n color: blue;\n }\n}\n```\n",
9494
"readmeFilename": "README.md",
95-
"_downloads": 18
95+
"_downloads": [
96+
18,
97+
5
98+
]
9699
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,7 @@
290290
2537130,
291291
2487463,
292292
2413628,
293-
2234873
293+
2234873,
294+
2219931
294295
]
295296
}

npm-data/plugins/@csstools/postcss-color-mix-function.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4643,7 +4643,6 @@
46434643
"readme": "# PostCSS Color Mix 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-color-mix-function --save-dev`\n\n[PostCSS Color Mix Function] lets you use the `color-mix()` function following the [CSS Color 5 Specification].\n\n```css\n.purple_plum {\n\tcolor: color-mix(in lch, purple 50%, plum 50%);\n}\n\n/* becomes */\n\n.purple_plum {\n\tcolor: rgb(175, 92, 174);\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 Function] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-color-mix-function --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssColorMixFunction = require('@csstools/postcss-color-mix-function');\n\npostcss([\n\tpostcssColorMixFunction(/* 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\npostcssColorMixFunction({ preserve: true })\n```\n\n```css\n.purple_plum {\n\tcolor: color-mix(in lch, purple 50%, plum 50%);\n}\n\n/* becomes */\n\n.purple_plum {\n\tcolor: rgb(175, 92, 174);\n\tcolor: color-mix(in lch, purple 50%, plum 50%);\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\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-color-mix-function\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Color Mix Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function\n[CSS Color 5 Specification]: https://www.w3.org/TR/css-color-5/#color-mix\n",
46444644
"readmeFilename": "README.md",
46454645
"_downloads": [
4646-
8356804,
46474646
8458025,
46484647
8520703,
46494648
8535707,
@@ -4662,6 +4661,7 @@
46624661
8629692,
46634662
7918267,
46644663
7592963,
4665-
7698476
4664+
7698476,
4665+
7471338
46664666
]
46674667
}

npm-data/plugins/@csstools/postcss-contrast-color-function.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2335,7 +2335,6 @@
23352335
"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",
23362336
"readmeFilename": "README.md",
23372337
"_downloads": [
2338-
1931119,
23392338
1999456,
23402339
1999456,
23412340
2039332,
@@ -2354,6 +2353,7 @@
23542353
2322810,
23552354
2245285,
23562355
2136898,
2357-
2028739
2356+
2028739,
2357+
2015895
23582358
]
23592359
}

0 commit comments

Comments
 (0)