PostCSS Plugin Directory
-A directory with 233 PostCSS plugins.
This list aims to only show plugins that you can use today.
A directory with 234 PostCSS plugins.
This list aims to only show plugins that you can use today.
A directory with 233 PostCSS plugins.
This list aims to only show plugins that you can use today.
A directory with 234 PostCSS plugins.
This list aims to only show plugins that you can use today.
![\"PostCSS](\"https://postcss.github.io/postcss/logo.svg\"){kind=logo}
][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-conditional-values.svg\")
][npm-url] [![\"Build](\"https://github.com/csstools/postcss-plugins/workflows/test/badge.svg\"){kind=icon}
][cli-url] [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-global-data.svg\")
][npm-url] [][cli-url] [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-gradients-interpolation-method.svg\")
][npm-url] [][cli-url] [![\"Baseline](\"https://cssdb.org/images/badges-baseline/gradients-interpolation-method.svg\")
][css-url] [![\"CSS](\"https://cssdb.org/images/badges/gradients-interpolation-method.svg\")
][css-url] \n\n```bash\nnpm install @csstools/postcss-gradients-interpolation-method --save-dev\n```\n\n[PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Images Module 4].\n\n```pcss\n.example {\n\tbackground-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);\n}\n\n:root {\n\t--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);\n}\n\n/* becomes */\n\n.example {\n\tbackground-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);\n\tbackground-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);\n}\n\n:root {\n\t--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);\n}\n\n@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) {\n:root {\n\t--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);\n}\n}\n```\n\n## Shortcomings\n\n> [!CAUTION]\n> Color stops with only a color or only an interpolation hint are not supported.\n\nFor best results you should always provide at least the color and position for each color stop.\nDouble position color stops are supported.\n\n```pcss\n.foo {\n\t/* Only a color: can't transform */\n\tbackground-image: linear-gradient(in oklch, black 0%, green, blue 100%);\n\n\t/* Only an interpolation hint: can't transform */\n\tbackground-image: linear-gradient(in oklch, black 0%, 25%, blue 100%);\n}\n```\n\n> [!CAUTION]\n> Variable colors are not supported.\n> We can not mix colors when the color is a variable.\n\n```pcss\n.foo {\n\t--red: red;\n\t/* Color stop variable : can't transform */\n\tbackground-image: linear-gradient(in oklch, black 0%, var(--red), blue 100%);\n}\n```\n\n## Usage\n\nAdd [PostCSS Gradients Interpolation Method] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-gradients-interpolation-method --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssGradientsInterpolationMethod = require('@csstools/postcss-gradients-interpolation-method');\n\npostcss([\n\tpostcssGradientsInterpolationMethod(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Gradients Interpolation Method] runs in all Node environments, with special\ninstructions for:\n\n- [Node](INSTALL.md#node)\n- [PostCSS CLI](INSTALL.md#postcss-cli)\n- [PostCSS Load Config](INSTALL.md#postcss-load-config)\n- [Webpack](INSTALL.md#webpack)\n- [Next.js](INSTALL.md#nextjs)\n- [Gulp](INSTALL.md#gulp)\n- [Grunt](INSTALL.md#grunt)\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\npostcssGradientsInterpolationMethod({ preserve: false })\n```\n\n```pcss\n.example {\n\tbackground-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);\n}\n\n:root {\n\t--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);\n}\n\n/* becomes */\n\n.example {\n\tbackground-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);\n}\n\n:root {\n\t--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);\n}\n```\n\n### enableProgressiveCustomProperties\n\nThe `enableProgressiveCustomProperties` option determines whether the original notation\nis wrapped with `@supports` when used in Custom Properties. By default, it is enabled.\n\n> [!NOTE]\n> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. \n> See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).\n\n```js\npostcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false })\n```\n\n```pcss\n.example {\n\tbackground-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);\n}\n\n:root {\n\t--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);\n}\n\n/* becomes */\n\n.example {\n\tbackground-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);\n\tbackground-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);\n}\n\n:root {\n\t--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);\n\t--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);\n}\n```\n\n_Custom properties do not fallback to the previous declaration_\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#gradients-interpolation-method\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-gradients-interpolation-method\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Gradients Interpolation Method]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method\n[CSS Images Module 4]: https://drafts.csswg.org/css-images-4/#linear-gradients\n",
"readmeFilename": "README.md",
- "_downloads": 3525028
+ "_downloads": 3550952
}
\ No newline at end of file
diff --git a/npm-data/plugins/@csstools/postcss-logical-overscroll-behavior.json b/npm-data/plugins/@csstools/postcss-logical-overscroll-behavior.json
index a640d66a4..3cc4ec7da 100644
--- a/npm-data/plugins/@csstools/postcss-logical-overscroll-behavior.json
+++ b/npm-data/plugins/@csstools/postcss-logical-overscroll-behavior.json
@@ -281,5 +281,5 @@
"license": "MIT-0",
"readme": "# PostCSS Logical Overscroll Behavior [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-logical-overscroll-behavior.svg\")
][npm-url] [![\"CSS](\"https://cssdb.org/images/badges/logical-overscroll-behavior.svg\")
][css-url] [][cli-url] [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-logical-resize.svg\")
][npm-url] [![\"CSS](\"https://cssdb.org/images/badges/logical-resize.svg\")
][css-url] [][cli-url] [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-logical-viewport-units.svg\")
][npm-url] [][cli-url] [![\"Baseline](\"https://cssdb.org/images/badges-baseline/logical-viewport-units.svg\")
][css-url] [![\"CSS](\"https://cssdb.org/images/badges/logical-viewport-units.svg\")
][css-url] \n\n```bash\nnpm install @csstools/postcss-logical-viewport-units --save-dev\n```\n\n[PostCSS Logical Viewport Units] lets you easily use `vb` and `vi` length units following the [CSS-Values-4 Specification].\n\n```pcss\n.foo {\n\tmargin: 10vi 20vb;\n}\n\n/* becomes */\n\n.foo {\n\tmargin: 10vw 20vh;\n\tmargin: 10vi 20vb;\n}\n```\n\n## Usage\n\nAdd [PostCSS Logical Viewport Units] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-logical-viewport-units --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssLogicalViewportUnits = require('@csstools/postcss-logical-viewport-units');\n\npostcss([\n\tpostcssLogicalViewportUnits(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Logical Viewport Units] runs in all Node environments, with special\ninstructions for:\n\n- [Node](INSTALL.md#node)\n- [PostCSS CLI](INSTALL.md#postcss-cli)\n- [PostCSS Load Config](INSTALL.md#postcss-load-config)\n- [Webpack](INSTALL.md#webpack)\n- [Next.js](INSTALL.md#nextjs)\n- [Gulp](INSTALL.md#gulp)\n- [Grunt](INSTALL.md#grunt)\n\n## Options\n\n### inlineDirection\n\nThe `inlineDirection` option allows you to specify the direction of the inline axe. The default value is `left-to-right`, which would match any latin language.\n\n**You should tweak this value so that it is specific to your language and writing mode.**\n\n```js\npostcssLogicalViewportUnits({\n\tinlineDirection: 'top-to-bottom'\n})\n```\n\n```pcss\n.foo {\n\tmargin: 10vi 20vb;\n}\n\n/* becomes */\n\n.foo {\n\tmargin: 10vh 20vw;\n\tmargin: 10vi 20vb;\n}\n```\n\nEach direction must be one of the following:\n\n- `top-to-bottom`\n- `bottom-to-top`\n- `left-to-right`\n- `right-to-left`\n\nPlease do note that transformations won't do anything particular for `right-to-left` or `bottom-to-top`.\n\n### preserve\n\nThe `preserve` option determines whether the original notation\nis preserved. By default, it is preserved.\n\n```js\npostcssLogicalViewportUnits({ preserve: false })\n```\n\n```pcss\n.foo {\n\tmargin: 10vi 20vb;\n}\n\n/* becomes */\n\n.foo {\n\tmargin: 10vw 20vh;\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/#logical-viewport-units\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-logical-viewport-units\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Logical Viewport Units]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units\n[CSS-Values-4 Specification]: https://www.w3.org/TR/css-values-4/#viewport-relative-units\n",
"readmeFilename": "README.md",
- "_downloads": 3830778
+ "_downloads": 3824662
}
\ No newline at end of file
diff --git a/npm-data/plugins/@csstools/postcss-media-minmax.json b/npm-data/plugins/@csstools/postcss-media-minmax.json
index 1a327337b..cfdf1e671 100644
--- a/npm-data/plugins/@csstools/postcss-media-minmax.json
+++ b/npm-data/plugins/@csstools/postcss-media-minmax.json
@@ -1866,5 +1866,5 @@
"license": "MIT",
"readme": "# PostCSS Media MinMax [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-media-minmax.svg\")
][npm-url] [][cli-url] [![\"Baseline](\"https://cssdb.org/images/badges-baseline/media-query-ranges.svg\")
][css-url] [![\"CSS](\"https://cssdb.org/images/badges/media-query-ranges.svg\")
][css-url] \n\n```bash\nnpm install @csstools/postcss-media-minmax --save-dev\n```\n\n[PostCSS Media MinMax] lets you use the range notation in media queries following the [Media Queries 4 Specification].\n\n```pcss\n@media screen and (width >=500px) and (width <=1200px) {\n\t.bar {\n\t\tdisplay: block;\n\t}\n}\n\n/* becomes */\n\n@media screen and (min-width:500px) and (max-width:1200px) {\n\t.bar {\n\t\tdisplay: block;\n\t}\n}\n```\n\n## Usage\n\nAdd [PostCSS Media MinMax] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-media-minmax --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssMediaMinMax = require('@csstools/postcss-media-minmax');\n\npostcss([\n\tpostcssMediaMinMax(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Media MinMax] runs in all Node environments, with special\ninstructions for:\n\n- [Node](INSTALL.md#node)\n- [PostCSS CLI](INSTALL.md#postcss-cli)\n- [PostCSS Load Config](INSTALL.md#postcss-load-config)\n- [Webpack](INSTALL.md#webpack)\n- [Next.js](INSTALL.md#nextjs)\n- [Gulp](INSTALL.md#gulp)\n- [Grunt](INSTALL.md#grunt)\n\n_See prior work by [yisibl](https://github.com/yisibl) here [postcss-media-minmax](https://github.com/postcss/postcss-media-minmax)\nTo ensure long term maintenance and to provide the needed features this plugin was recreated based on yisibl's work._\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#media-query-ranges\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-media-minmax\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Media MinMax]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax\n[Media Queries 4 Specification]: https://www.w3.org/TR/mediaqueries-4/#mq-features\n",
"readmeFilename": "README.md",
- "_downloads": 3380419
+ "_downloads": 3494057
}
\ No newline at end of file
diff --git a/npm-data/plugins/@csstools/postcss-nested-calc.json b/npm-data/plugins/@csstools/postcss-nested-calc.json
index b34bad16f..952a5e030 100644
--- a/npm-data/plugins/@csstools/postcss-nested-calc.json
+++ b/npm-data/plugins/@csstools/postcss-nested-calc.json
@@ -865,5 +865,5 @@
"license": "MIT-0",
"readme": "# PostCSS Nested Calc [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-nested-calc.svg\")
][npm-url] [][cli-url] [![\"Baseline](\"https://cssdb.org/images/badges-baseline/nested-calc.svg\")
][css-url] [![\"CSS](\"https://cssdb.org/images/badges/nested-calc.svg\")
][css-url] \n\n```bash\nnpm install @csstools/postcss-nested-calc --save-dev\n```\n\n[PostCSS Nested Calc] lets you use nested `calc()` expressions following the [CSS Values and Units 4 specification].\n\n```pcss\n.example {\n\torder: calc(1 + calc(2 * 2));\n}\n\n/* becomes */\n\n.example {\n\torder: calc(1 + (2 * 2));\n\torder: calc(1 + calc(2 * 2));\n}\n```\n\n## Usage\n\nAdd [PostCSS Nested Calc] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-nested-calc --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssNestedCalc = require('@csstools/postcss-nested-calc');\n\npostcss([\n\tpostcssNestedCalc(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Nested Calc] runs in all Node environments, with special\ninstructions for:\n\n- [Node](INSTALL.md#node)\n- [PostCSS CLI](INSTALL.md#postcss-cli)\n- [PostCSS Load Config](INSTALL.md#postcss-load-config)\n- [Webpack](INSTALL.md#webpack)\n- [Next.js](INSTALL.md#nextjs)\n- [Gulp](INSTALL.md#gulp)\n- [Grunt](INSTALL.md#grunt)\n\n## Options\n\n### preserve\n\nThe `preserve` option determines whether the original notation\nis preserved. By default the original values are preserved.\n\n```js\npostcssNestedCalc({ preserve: false })\n```\n\n```pcss\n.example {\n\torder: calc(1 + calc(2 * 2));\n}\n\n/* becomes */\n\n.example {\n\torder: calc(1 + (2 * 2));\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/#nested-calc\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-nested-calc\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Nested Calc]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nested-calc\n[CSS Values and Units 4 specification]: https://www.w3.org/TR/css-values/#calc-func\n",
"readmeFilename": "README.md",
- "_downloads": 14413977
+ "_downloads": 13881918
}
\ No newline at end of file
diff --git a/npm-data/plugins/@csstools/postcss-rewrite-url.json b/npm-data/plugins/@csstools/postcss-rewrite-url.json
index da3736f7a..503ee3d1a 100644
--- a/npm-data/plugins/@csstools/postcss-rewrite-url.json
+++ b/npm-data/plugins/@csstools/postcss-rewrite-url.json
@@ -486,5 +486,5 @@
"license": "MIT-0",
"readme": "# PostCSS Rewrite URL [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-rewrite-url.svg\")
][npm-url] [][cli-url] [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-scope-pseudo-class.svg\")
][npm-url] [![\"CSS](\"https://cssdb.org/images/badges/scope-pseudo-class.svg\")
][css-url] [][cli-url] [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-slow-plugins.svg\")
][npm-url] [][cli-url] [][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-trigonometric-functions.svg\")
][npm-url] [][cli-url] [![\"Baseline](\"https://cssdb.org/images/badges-baseline/trigonometric-functions.svg\")
][css-url] [![\"CSS](\"https://cssdb.org/images/badges/trigonometric-functions.svg\")
][css-url] \n\n```bash\nnpm install @csstools/postcss-trigonometric-functions --save-dev\n```\n\n[PostCSS Trigonometric Functions] lets you use `sin`, `cos`, `tan`, `asin`, `acos`, `atan` and `atan2` to be able to compute trigonometric relationships following the [CSS Values 4] specification.\n\n```pcss\n.trigonometry {\n\tline-height: sin(pi / 4);\n\tline-height: cos(.125turn);\n\tline-height: tan(50grad);\n\ttransform: rotate(asin(-1));\n\ttransform: rotate(asin(sin(30deg + 1.0471967rad)));\n\ttransform: rotate(acos(-1));\n\ttransform: rotate(acos(cos(0 / 2 + 1 - 1)));\n\ttransform: rotate(atan(infinity));\n\ttransform: rotate(atan(e - 2.7182818284590452354));\n\ttransform: rotate(atan2(-infinity,-infinity));\n\ttransform: rotate(atan2(-infinity,infinity));\n\ttransform: rotate(atan2(-infinity,infinity));\n\ttransform: rotate(atan2(90, 15));\n}\n\n/* becomes */\n\n.trigonometry {\n\tline-height: 0.70711;\n\tline-height: 0.70711;\n\tline-height: 1;\n\ttransform: rotate(-90deg);\n\ttransform: rotate(89.99995deg);\n\ttransform: rotate(180deg);\n\ttransform: rotate(0deg);\n\ttransform: rotate(90deg);\n\ttransform: rotate(0deg);\n\ttransform: rotate(-135deg);\n\ttransform: rotate(-45deg);\n\ttransform: rotate(-45deg);\n\ttransform: rotate(80.53768deg);\n}\n```\n\n## Usage\n\nAdd [PostCSS Trigonometric Functions] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-trigonometric-functions --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssTrigonometricFunctions = require('@csstools/postcss-trigonometric-functions');\n\npostcss([\n\tpostcssTrigonometricFunctions(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Trigonometric Functions] runs in all Node environments, with special\ninstructions for:\n\n- [Node](INSTALL.md#node)\n- [PostCSS CLI](INSTALL.md#postcss-cli)\n- [PostCSS Load Config](INSTALL.md#postcss-load-config)\n- [Webpack](INSTALL.md#webpack)\n- [Next.js](INSTALL.md#nextjs)\n- [Gulp](INSTALL.md#gulp)\n- [Grunt](INSTALL.md#grunt)\n\n## ⚠️ About custom properties\n\nGiven the dynamic nature of custom properties it's impossible to know what the variable value is, which means the plugin can't compute a final value for the stylesheet.\n\nBecause of that, any usage that contains a `var` is skipped.\n\n## Units\n\n[PostCSS Trigonometric Functions] lets you use different special units that are within the spec and computed at run time to be able to calculate the result of the trigonometric function.\n\nThe following units are supported:\n\n* `pi`: Computes to `Math.PI` which is `3.141592653589793`\n* `e`: Computes to `Math.E` which is `2.718281828459045`\n* `infinity`, `-infinity`: Compute to `Infinity` and `-Infinity` respectively. Note that the usage is case insensitive so `InFiNiTy` is a valid value.\n\nSome calculations (such as `sin(-infinity)`) might return `NaN` as per the spec. Given that `NaN` can't be replaced with a value that's useful to CSS it is left as is, as the result will be effectively ignored by the browser.\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\npostcssTrigonometricFunctions({ preserve: true })\n```\n\n```pcss\n.trigonometry {\n\tline-height: sin(pi / 4);\n\tline-height: cos(.125turn);\n\tline-height: tan(50grad);\n\ttransform: rotate(asin(-1));\n\ttransform: rotate(asin(sin(30deg + 1.0471967rad)));\n\ttransform: rotate(acos(-1));\n\ttransform: rotate(acos(cos(0 / 2 + 1 - 1)));\n\ttransform: rotate(atan(infinity));\n\ttransform: rotate(atan(e - 2.7182818284590452354));\n\ttransform: rotate(atan2(-infinity,-infinity));\n\ttransform: rotate(atan2(-infinity,infinity));\n\ttransform: rotate(atan2(-infinity,infinity));\n\ttransform: rotate(atan2(90, 15));\n}\n\n/* becomes */\n\n.trigonometry {\n\tline-height: 0.70711;\n\tline-height: sin(pi / 4);\n\tline-height: 0.70711;\n\tline-height: cos(.125turn);\n\tline-height: 1;\n\tline-height: tan(50grad);\n\ttransform: rotate(-90deg);\n\ttransform: rotate(asin(-1));\n\ttransform: rotate(89.99995deg);\n\ttransform: rotate(asin(sin(30deg + 1.0471967rad)));\n\ttransform: rotate(180deg);\n\ttransform: rotate(acos(-1));\n\ttransform: rotate(0deg);\n\ttransform: rotate(acos(cos(0 / 2 + 1 - 1)));\n\ttransform: rotate(90deg);\n\ttransform: rotate(atan(infinity));\n\ttransform: rotate(0deg);\n\ttransform: rotate(atan(e - 2.7182818284590452354));\n\ttransform: rotate(-135deg);\n\ttransform: rotate(atan2(-infinity,-infinity));\n\ttransform: rotate(-45deg);\n\ttransform: rotate(atan2(-infinity,infinity));\n\ttransform: rotate(-45deg);\n\ttransform: rotate(atan2(-infinity,infinity));\n\ttransform: rotate(80.53768deg);\n\ttransform: rotate(atan2(90, 15));\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/#trigonometric-functions\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-trigonometric-functions\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Trigonometric Functions]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions\n[CSS Values 4]: https://www.w3.org/TR/css-values-4/#trig-funcs\n",
"readmeFilename": "README.md",
- "_downloads": 15186490
+ "_downloads": 14515363
}
\ No newline at end of file
diff --git a/npm-data/plugins/@csstools/postcss-unset-value.json b/npm-data/plugins/@csstools/postcss-unset-value.json
index 1f24a7d9e..e2662b1f3 100644
--- a/npm-data/plugins/@csstools/postcss-unset-value.json
+++ b/npm-data/plugins/@csstools/postcss-unset-value.json
@@ -817,5 +817,5 @@
"email": "romainmenke@gmail.com"
}
],
- "_downloads": 15625167
+ "_downloads": 15046428
}
\ No newline at end of file
diff --git a/npm-data/plugins/@ergevozko/postcss-advanced-variables.json b/npm-data/plugins/@ergevozko/postcss-advanced-variables.json
index 9b03a8800..db57f16d2 100644
--- a/npm-data/plugins/@ergevozko/postcss-advanced-variables.json
+++ b/npm-data/plugins/@ergevozko/postcss-advanced-variables.json
@@ -160,5 +160,5 @@
"license": "CC0-1.0",
"readme": "# PostCSS Advanced Variables [][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n[![Test Status][test-img]][test-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS Advanced Variables] lets you use Sass-like variables, conditionals,\nand iterators in CSS.\n\n```scss\n$dir: assets/icons;\n\n@each $icon in (foo, bar, baz) {\n .icon-$icon {\n background: url('$dir/$icon.png');\n }\n}\n\n@for $count from 1 to 5 by 2 {\n @if $count > 2 {\n .col-$count {\n width: #{$count}0%;\n }\n }\n}\n\n@import \"path/to/some-file\";\n\n/* after */\n\n.icon-foo {\n background: url('assets/icons/foo.png');\n}\n\n.icon-bar {\n background: url('assets/icons/bar.png');\n}\n\n.icon-baz {\n background: url('assets/icons/baz.png');\n}\n\n.col-3 {\n width: 30%;\n}\n\n.col-5 {\n width: 50%;\n}\n\n// the contents of \"path/to/_some-file.scss\"\n```\n\n## Usage\n\nAdd [PostCSS Advanced Variables] to your build tool:\n\n```bash\nnpm install postcss-advanced-variables --save-dev\n```\n\n#### Node\n\nUse [PostCSS Advanced Variables] to process your CSS:\n\n```js\nrequire('postcss-advanced-variables').process(YOUR_CSS);\n```\n\n#### PostCSS\n\nAdd [PostCSS] to your build tool:\n\n```bash\nnpm install postcss --save-dev\n```\n\nUse [PostCSS Advanced Variables] as a plugin:\n\n```js\npostcss([\n require('postcss-advanced-variables')(/* options */)\n]).process(YOUR_CSS);\n```\n\n#### Gulp\n\nAdd [Gulp PostCSS] to your build tool:\n\n```bash\nnpm install gulp-postcss --save-dev\n```\n\nUse [PostCSS Advanced Variables] 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('postcss-advanced-variables')(/* options */)\n ])\n ).pipe(\n gulp.dest('.')\n );\n});\n```\n\n#### Grunt\n\nAdd [Grunt PostCSS] to your build tool:\n\n```bash\nnpm install grunt-postcss --save-dev\n```\n\nUse [PostCSS Advanced Variables] in your Gruntfile:\n\n```js\ngrunt.loadNpmTasks('grunt-postcss');\n\ngrunt.initConfig({\n postcss: {\n options: {\n use: [\n require('postcss-advanced-variables')(/* options */)\n ]\n },\n dist: {\n src: '*.css'\n }\n }\n});\n```\n\n---\n\n## Features\n\n### $variables\n\nVariables let you store information to be reused anywhere in a stylesheet.\n\nVariables are set just like CSS properties, placing a `$` symbol before the\nname of the variable (`$var-name`). They may also be set placing a `$` symbol\nbefore two parentheses wrapping the name of the variable (`$(var-name)`), or by\nwrapping the `$` symbol and variable name in curly braces preceeded by a hash\n(`#{$var-name}`).\n\n```scss\n$font-size: 1.25em;\n$font-stack: \"Helvetica Neue\", sans-serif;\n$primary-color: #333;\n\nbody {\n font: $font-size $(font-stack);\n color: #{$primary-color};\n}\n```\n\n*Note: To use `#{$var-name}` without issues, you will need to include the\n[PostCSS SCSS Syntax].\n\nIn that example, `$font-size`, `$font-stack`, and `$primary-color` are replaced\nwith their values.\n\n```css\nbody {\n font: 1.25em \"Helvetica Neue\", sans-serif;\n color: #333;\n}\n```\n\n### @if and @else Rules\n\nConditionals like `@if` and `@else` let you use rules in a stylesheet if they\nevaluate true or false.\n\nConditionals are set by writing `@if` before the expression you want to\nevaluate. If the expression is true, then its contents are included in the\nstylesheet. If the expression is false, then its contents are not included, but\nthe contents of an `@else` that follows it are included.\n\n```scss\n$type: monster;\n\np {\n @if $type == ocean {\n color: blue;\n } @else {\n color: black;\n }\n}\n```\n\nIn that example, `$type === ocean` is false, so the `@if` contents are ignored\nand the `@else` contents are used.\n\n```css\np {\n color: black;\n}\n```\n\n### @for and @each Rules\n\nIterators like `@for` and `@each` let you repeat content in a stylesheet.\n\nA `@for` statement repeats by a numerical counter defined as a variable.\n\nIt can be written as `@for $counter from \n ![\"npm\"](\"https://github.com/moohng/postcss-px2vw/actions/workflows/npmpublish.yml/badge.svg\"){kind=icon}
\n ![\"npm\"](\"https://img.shields.io/npm/dw/@moohng/postcss-px2vw\")
![\"npm\"](\"https://img.shields.io/npm/v/@moohng/postcss-px2vw\")
![\"GitHub\"](\"https://img.shields.io/github/license/moohng/postcss-px2vw\")
![\"Code](\"https://s.w.org/style/images/codeispoetry.png?1\")
![\"Sponsored](\"https://user-images.githubusercontent.com/417688/34437029-dbfe4ee6-ecab-11e7-9d80-2b274b4149b3.png\"\n)
\n\n\n## Acknowledgments\n\n* Hat tip to https://github.com/cuth/postcss-pxtorem/ for inspiring us for this project.\n",
"readmeFilename": "README.md",
- "_downloads": 4
+ "_downloads": 3
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-advanced-variables-fixes.json b/npm-data/plugins/postcss-advanced-variables-fixes.json
index c890ac08c..6ce2a740f 100644
--- a/npm-data/plugins/postcss-advanced-variables-fixes.json
+++ b/npm-data/plugins/postcss-advanced-variables-fixes.json
@@ -326,5 +326,5 @@
"license": "CC0-1.0",
"readme": "# PostCSS Advanced Variables [][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n[![Test Status][test-img]][test-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS Advanced Variables] lets you use Sass-like variables, conditionals,\nand iterators in CSS.\n\n```scss\n$dir: assets/icons;\n\n@each $icon in (foo, bar, baz) {\n .icon-$icon {\n background: url('$dir/$icon.png');\n }\n}\n\n@for $count from 1 to 5 by 2 {\n @if $count > 2 {\n .col-$count {\n width: #{$count}0%;\n }\n }\n}\n\n@import \"path/to/some-file\";\n\n/* after */\n\n.icon-foo {\n background: url('assets/icons/foo.png');\n}\n\n.icon-bar {\n background: url('assets/icons/bar.png');\n}\n\n.icon-baz {\n background: url('assets/icons/baz.png');\n}\n\n.col-3 {\n width: 30%;\n}\n\n.col-5 {\n width: 50%;\n}\n\n// the contents of \"path/to/_some-file.scss\"\n```\n\n## Usage\n\nAdd [PostCSS Advanced Variables] to your build tool:\n\n```bash\nnpm install postcss-advanced-variables --save-dev\n```\n\n#### Node\n\nUse [PostCSS Advanced Variables] to process your CSS:\n\n```js\nrequire('postcss-advanced-variables').process(YOUR_CSS);\n```\n\n#### PostCSS\n\nAdd [PostCSS] to your build tool:\n\n```bash\nnpm install postcss --save-dev\n```\n\nUse [PostCSS Advanced Variables] as a plugin:\n\n```js\npostcss([\n require('postcss-advanced-variables')(/* options */)\n]).process(YOUR_CSS);\n```\n\n#### Gulp\n\nAdd [Gulp PostCSS] to your build tool:\n\n```bash\nnpm install gulp-postcss --save-dev\n```\n\nUse [PostCSS Advanced Variables] 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('postcss-advanced-variables')(/* options */)\n ])\n ).pipe(\n gulp.dest('.')\n );\n});\n```\n\n#### Grunt\n\nAdd [Grunt PostCSS] to your build tool:\n\n```bash\nnpm install grunt-postcss --save-dev\n```\n\nUse [PostCSS Advanced Variables] in your Gruntfile:\n\n```js\ngrunt.loadNpmTasks('grunt-postcss');\n\ngrunt.initConfig({\n postcss: {\n options: {\n use: [\n require('postcss-advanced-variables')(/* options */)\n ]\n },\n dist: {\n src: '*.css'\n }\n }\n});\n```\n\n---\n\n## Features\n\n### $variables\n\nVariables let you store information to be reused anywhere in a stylesheet.\n\nVariables are set just like CSS properties, placing a `$` symbol before the\nname of the variable (`$var-name`). They may also be set placing a `$` symbol\nbefore two parentheses wrapping the name of the variable (`$(var-name)`), or by\nwrapping the `$` symbol and variable name in curly braces preceeded by a hash\n(`#{$var-name}`).\n\n```scss\n$font-size: 1.25em;\n$font-stack: \"Helvetica Neue\", sans-serif;\n$primary-color: #333;\n\nbody {\n font: $font-size $(font-stack);\n color: #{$primary-color};\n}\n```\n\n*Note: To use `#{$var-name}` without issues, you will need to include the\n[PostCSS SCSS Syntax].\n\nIn that example, `$font-size`, `$font-stack`, and `$primary-color` are replaced\nwith their values.\n\n```css\nbody {\n font: 1.25em \"Helvetica Neue\", sans-serif;\n color: #333;\n}\n```\n\n### @if and @else Rules\n\nConditionals like `@if` and `@else` let you use rules in a stylesheet if they\nevaluate true or false.\n\nConditionals are set by writing `@if` before the expression you want to\nevaluate. If the expression is true, then its contents are included in the\nstylesheet. If the expression is false, then its contents are not included, but\nthe contents of an `@else` that follows it are included.\n\n```scss\n$type: monster;\n\np {\n @if $type == ocean {\n color: blue;\n } @else {\n color: black;\n }\n}\n```\n\nIn that example, `$type === ocean` is false, so the `@if` contents are ignored\nand the `@else` contents are used.\n\n```css\np {\n color: black;\n}\n```\n\n### @for and @each Rules\n\nIterators like `@for` and `@each` let you repeat content in a stylesheet.\n\nA `@for` statement repeats by a numerical counter defined as a variable.\n\nIt can be written as `@for $counter from ][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/postcss-color-functional-notation.svg\")
][npm-url] [][cli-url] [![\"Baseline](\"https://cssdb.org/images/badges-baseline/color-functional-notation.svg\")
][css-url] [![\"CSS](\"https://cssdb.org/images/badges/color-functional-notation.svg\")
][css-url] \n\n```bash\nnpm install postcss-color-functional-notation --save-dev\n```\n\n[PostCSS Color Functional Notation] lets you use space and slash separated\ncolor notation in CSS, following the [CSS Color] specification.\n\n```pcss\n:root {\n\t--firebrick: rgb(178 34 34);\n\t--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);\n\t--firebrick-hsl: hsla(0 68% 42%);\n\t--firebrick-hsl-a50: hsl(0 68% 42% / 50%);\n}\n\n/* becomes */\n\n:root {\n\t--firebrick: rgb(178, 34, 34);\n\t--firebrick-a50: rgba(179, 34, 34, 0.5);\n\t--firebrick-hsl: hsl(0, 68%, 42%);\n\t--firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);\n}\n```\n\n## Usage\n\nAdd [PostCSS Color Functional Notation] to your project:\n\n```bash\nnpm install postcss postcss-color-functional-notation --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssColorFunctionalNotation = require('postcss-color-functional-notation');\n\npostcss([\n\tpostcssColorFunctionalNotation(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Color Functional Notation] runs in all Node environments, with special\ninstructions for:\n\n- [Node](INSTALL.md#node)\n- [PostCSS CLI](INSTALL.md#postcss-cli)\n- [PostCSS Load Config](INSTALL.md#postcss-load-config)\n- [Webpack](INSTALL.md#webpack)\n- [Next.js](INSTALL.md#nextjs)\n- [Gulp](INSTALL.md#gulp)\n- [Grunt](INSTALL.md#grunt)\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\npostcssColorFunctionalNotation({ preserve: true })\n```\n\n```pcss\n:root {\n\t--firebrick: rgb(178 34 34);\n\t--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);\n\t--firebrick-hsl: hsla(0 68% 42%);\n\t--firebrick-hsl-a50: hsl(0 68% 42% / 50%);\n}\n\n/* becomes */\n\n:root {\n\t--firebrick: rgb(178, 34, 34);\n\t--firebrick-a50: rgba(179, 34, 34, 0.5);\n\t--firebrick-hsl: hsl(0, 68%, 42%);\n\t--firebrick-hsl: hsla(0 68% 42%);\n\t--firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);\n}\n\n@supports (color: rgb(0 0 0 / 0)) {\n:root {\n\t--firebrick: rgb(178 34 34);\n\t--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);\n}\n}\n\n@supports (color: hsl(0 0% 0% / 0)) {\n:root {\n\t--firebrick-hsl-a50: hsl(0 68% 42% / 50%);\n}\n}\n```\n\n### enableProgressiveCustomProperties\n\nThe `enableProgressiveCustomProperties` option determines whether the original notation\nis wrapped with `@supports` when used in Custom Properties. By default, it is enabled.\n\n> [!NOTE]\n> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. \n> See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).\n\n```js\npostcssColorFunctionalNotation({ enableProgressiveCustomProperties: false })\n```\n\n```pcss\n:root {\n\t--firebrick: rgb(178 34 34);\n\t--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);\n\t--firebrick-hsl: hsla(0 68% 42%);\n\t--firebrick-hsl-a50: hsl(0 68% 42% / 50%);\n}\n\n/* becomes */\n\n:root {\n\t--firebrick: rgb(178, 34, 34);\n\t--firebrick: rgb(178 34 34);\n\t--firebrick-a50: rgba(179, 34, 34, 0.5);\n\t--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);\n\t--firebrick-hsl: hsl(0, 68%, 42%);\n\t--firebrick-hsl: hsla(0 68% 42%);\n\t--firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);\n\t--firebrick-hsl-a50: hsl(0 68% 42% / 50%);\n}\n```\n\n_Custom properties do not fallback to the previous declaration_\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#color-functional-notation\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/postcss-color-functional-notation\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Color Functional Notation]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation\n[CSS Color]: https://www.w3.org/TR/css-color-4/#funcdef-rgb\n",
"readmeFilename": "README.md",
- "_downloads": 24902194
+ "_downloads": 23702009
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-colormin.json b/npm-data/plugins/postcss-colormin.json
index 67df367e3..a9d551ace 100644
--- a/npm-data/plugins/postcss-colormin.json
+++ b/npm-data/plugins/postcss-colormin.json
@@ -6475,5 +6475,5 @@
},
"license": "MIT",
"readmeFilename": "README.md",
- "_downloads": 41783058
+ "_downloads": 43030709
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-css-variables-theme.json b/npm-data/plugins/postcss-css-variables-theme.json
index 5be1914bf..156ba772d 100644
--- a/npm-data/plugins/postcss-css-variables-theme.json
+++ b/npm-data/plugins/postcss-css-variables-theme.json
@@ -327,5 +327,5 @@
"license": "MIT",
"readme": "# postcss-css-variables-theme\n\n[](http://badge.fury.io/js/postcss-css-variables-theme) [](https://travis-ci.org/github/gitHber/postcss-css-variables-theme) [](https://codecov.io/gh/gitHber/postcss-css-variables-theme)\n\nJust like postcss-css-variables but support multiple theme class\n[postcss-css-variables](https://github.com/MadLittleMods/postcss-css-variables/blob/v0.17.0/README.md)\n\n## Option\n\n```js\n{\n /**\n * true: keep variables\n * false(default): not keep & remove variable defination\n * computed: not keep variables but keep variable defination\n * (decl: Node) => boolean | 'computed'\n */\n preserve: false,\n variables: {\n '--main-color': { // theme\n default: 'blue', // default\n light: '#fff', // theme: light\n dark: '#000', // theme: dark\n },\n '--secondary-color': '#aef', // default\n },\n /**\n * prifix of multiple theme selector\n * @param {*} selector\n * @param {*} theme\n * @returns `body.${theme} ${selector}`\n */\n themeSelector: (theme, selector) => `body.${theme} ${selector}`,\n /**\n * true: generate variables defination\n * false(default): do nothing\n */\n preserveInjectedVariables: false,\n /**\n * selector of variables defination\n * @param {*} selector\n * @param {*} theme\n * @returns\n */\n themeDefineSelector: (theme) => {\n if (theme === 'default') return 'body';\n return `body.${theme}`;\n },\n};\n```\n\n## Generate variables\n\nyou can generate variables just by \\*.css, there is util function can help you\ntheme.css\n\n```css\n/**\n* write rule\n* body.[name] {\n* --[var-name]: [value-name]; \n* }\n*/\nbody {\n --primary-color: #fe3666;\n --primary-bgcolor: #fe366620;\n}\nbody.light {\n --primary-color: #ff4906;\n --primary-bgcolor: #ff490620;\n}\nbody.dark {\n --primary-color: #906000;\n --primary-bgcolor: #90600020;\n}\n```\n\n```js\nconst { readThemeConfig } = require('postcss-css-variables-theme/util');\nreadThemeConfig(require('path').resolve(__dirname, './theme.css'));\n// {\n// '--primary-color': {\n// default: '#fe3666',\n// light: '#ff4906',\n// dark: '#906000',\n// },\n// '--primary-bgcolor': {\n// default: '#fe366620',\n// light: '#ff490620',\n// dark: '#90600020',\n// },\n// }\n```\n\n# examples\n\n## default\n\n### option\n\n```js\n{\n variables: {\n '--primary-color': '#15c213'\n }\n}\n```\n\n### ps:\n\n```css\n.a {\n color: var(--primary-color);\n}\n```\n\n```css\n.a {\n color: #15c213;\n}\n```\n\n## mutiple themes\n\n### options\n\n```js\n{\n variables: {\n '--primary-color': {\n default: '#15c213',\n light: '#9ae899',\n dark: '#2a562a',\n }\n }\n}\n```\n\n### ps:\n\n```css\n.a {\n color: var(--primary-color);\n}\n```\n\n```css\n.a {\n color: #15c213;\n}\nbody.light .a {\n color: #9ae899;\n}\nbody.dark .a {\n color: #2a562a;\n}\n```\n\n## preserve: true\n\n### option\n\n```js\n{\n preserve: true,\n variables: {\n '--primary-color': '#15c213'\n }\n)\n```\n\n### ps:\n\n```css\n:root {\n --primary-color: blue;\n}\n.a {\n color: var(--primary-color);\n}\n```\n\n```css\n:root {\n --primary-color: blue;\n}\n.a {\n color: #15c213;\n color: var(--primary-color);\n}\n```\n\n## preserve: false\n\n### option\n\n```js\n{\n preserve: false,\n variables: {\n '--primary-color': '#15c213'\n }\n}\n```\n\n### ps:\n\n```css\n:root {\n --primary-color: blue;\n}\n.a {\n color: var(--primary-color);\n}\n```\n\n```css\n.a {\n color: #15c213;\n}\n```\n\n## preserve: computed\n\n### option\n\n```js\n{\n preserve: 'computed',\n variables: {\n '--primary-color': '#15c213'\n }\n}\n```\n\n### ps:\n\n```css\n:root {\n --primary-color: blue;\n}\n.a {\n color: var(--primary-color);\n}\n```\n\n```css\n:root {\n --primary-color: blue;\n}\n.a {\n color: #15c213;\n}\n```\n\n## preserve: function\n\n### option\n\n```js\n{\n preserve: (node) =>\n node.prop === '--primary-color' ||\n node.value.includes('--primary-color')\n ? true\n : false,\n variables: {\n '--primary-color': '#15c213',\n '--secondary-color': '#15c'\n }\n}\n```\n\n### ps:\n\n```css\n:root {\n --primary-color: blue;\n --secondary-color: red;\n}\n.a {\n color: var(--primary-color);\n background-color: var(--secondary-color);\n}\n```\n\n```css\n:root {\n --primary-color: blue;\n}\n.a {\n color: #15c213;\n color: var(--primary-color);\n background-color: #15c;\n}\n```\n\n## themeSelector\n\n### option\n\n```js\n{\n themeSelector: (theme, selector) => `.custom-${theme} ${selector}`,\n variables: {\n '--primary-color': {\n default: '#15c213',\n light: '#15c',\n }\n }\n}\n```\n\n### ps:\n\n```css\n.a {\n color: var(--primary-color);\n}\n```\n\n```css\n.a {\n color: #15c213;\n}\n.custom-light .a {\n color: #15c;\n}\n```\n\n## preserveInjectedVariables\n\n### option\n\n```js\n{\n preserveInjectedVariables: true,\n variables: {\n '--primary-color': '#15c213'\n }\n}\n```\n\n### ps:\n\n```css\n.a {\n color: var(--primary-color);\n}\n```\n\n```css\nbody {\n --primary-color: #15c213;\n}\n.a {\n color: #15c213;\n}\n```\n\n## themeDefineSelector (preserveInjectedVariables must be true)\n\n### option\n\n```js\n{\n preserveInjectedVariables: true,\n themeDefineSelector: (theme) => {\n if (theme === 'default') return 'body';\n return `body[${theme}]`;\n },\n variables: {\n '--primary-color': {\n default: '#15c213',\n light: '#15c',\n },\n },\n}\n```\n\n### ps:\n\n```css\n.a {\n color: var(--primary-color);\n}\n```\n\n```css\nbody[light] {\n --primary-color: #15c;\n}\nbody {\n --primary-color: #15c213;\n}\n.a {\n color: #15c213;\n}\nbody.light .a {\n color: #15c;\n}\n```\n",
"readmeFilename": "README.md",
- "_downloads": 10
+ "_downloads": 6
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-csscomb.json b/npm-data/plugins/postcss-csscomb.json
index 8a669840c..1566919fe 100644
--- a/npm-data/plugins/postcss-csscomb.json
+++ b/npm-data/plugins/postcss-csscomb.json
@@ -549,5 +549,5 @@
},
"license": "MIT",
"readmeFilename": "readme.md",
- "_downloads": 179
+ "_downloads": 198
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-customprop-validate.json b/npm-data/plugins/postcss-customprop-validate.json
index acfe7c03a..41a88cd21 100644
--- a/npm-data/plugins/postcss-customprop-validate.json
+++ b/npm-data/plugins/postcss-customprop-validate.json
@@ -149,5 +149,5 @@
"license": "MIT",
"readme": "# PostCSS Customprop Validate [](https://github.com/gojek/postcss-customprop-validate/actions/workflows/test.yml)\n\n[PostCSS] plugin to validate [fallback values] of CSS custom properties.\n\nValidating the fallback values of CSS custom properties manually can be error prone and challening, specially if there are many.\n\nThis plugin validates the CSS and returns custom properties with incorrect fallback values. It can also modify the source CSS file with the updated values.\n\n## Usage\n\n```js\nconst postcss = require(\"postcss\");\nconst plugin = require(\"postcss-customprop-validate\");\nconst { readFileSync } = require(\"fs\");\n\nconst cssPath = \"./sample.css\";\nconst css = readFileSync(cssPath, \"utf-8\");\n/*\n{\n font-size: 1rem;\n color: var(--color-red, #fa0000);\n}\n*/\n\nconst properties = {\n \"--color-red\": \"#ff0000\",\n};\n\nconst callback = (err, data) => {\n if (err) {\n console.error(err);\n return;\n }\n console.log(data);\n};\n\npostcss([\n plugin({\n properties,\n write: false,\n callback,\n }),\n])\n .process(css, { from: cssPath })\n .then((result) => {\n console.log(result.wrongProps);\n /*\n [\n {\n path: \"./sample.js\",\n line: 3,\n key: \"--color-red\",\n current: \"#fa0000\",\n expected: \"#ff0000\"\n }\n ]\n */\n });\n```\n\nSee [PostCSS] docs for examples for your environment.\n\n## Options\n\nThe plugin accepts an object containing 3 properties:\n\n### **`properties`**\n\nRequired: `true`\n\nAn object containg key and expected fallback values of custom properties. The plugin uses it as the source of truth to validate the CSS.\n\nExample:\n\n```json\n{\n \"--border-radius\": \"4px\",\n \"--color-red\": \"#ff0000\",\n \"--danger-border\":\n \"var(--border-radius, 4px) solid var(--color-red, #ff0000)\",\n};\n```\n\n### **`write`**\n\nDefault: `false`\n\nModifies the source CSS file with the correct fallback values.\n\n#### Formatting\n\nThe plugin does not preserves the code formatting. If you use a code formatter like [prettier], you may need to re-run it after the plugin modifies the source file.\n\n### **`callback`**\n\nDefault: `() => {}`\n\nCallback to handle the output of the plugin. The plugin invokes the callback after it processes the CSS of each file. The callback accepts 2 arguments. The first argument is an error object. The second argument is an array of objects. Each object represents an incorrect fallback value having the following shape:\n\n- `path` - absolute path of the CSS file\n- `line` - line number containing the custom property\n- `key` - key of the custom property\n- `current` - current fallback value\n- `expected` - expected fallback value\n\nThe second argument is also available in the plugin's result as `result.wrongProps`\n\n## Example\n\nA sample CSS:\n\n```css\n.foo {\n border: var(\n --danger-border,\n var(--border-radius, 5px) solid var(--color-red, #fa0000)\n );\n}\n\n.bar {\n --danger-text: var(--color-red, red);\n color: var(--danger-text);\n}\n```\n\nThe resultant CSS that the plugin produces:\n\n```diff\n.foo {\n border: var(\n --danger-border,\n- var(--border-radius, 5px) solid var(--color-red, #fa0000)\n+ var(--border-radius, 4px) solid var(--color-red, #ff0000)\n );\n}\n\n.bar {\n- --danger-text: var(--color-red, red);\n+ --danger-text: var(--color-red, #ff0000);\n color: var(--danger-text);\n}\n```\n\nCustom properties with incorrect fallback values:\n\n```js\n[\n {\n path: undefined,\n line: 2,\n key: \"--danger-border\",\n current: \"var(--border-radius, 5px) solid var(--color-red, #fa0000)\",\n expected: \"var(--border-radius, 4px) solid var(--color-red, #ff0000)\",\n },\n {\n path: undefined,\n line: 9,\n key: \"--color-red\",\n current: \"red\",\n expected: \"#ff0000\",\n },\n];\n```\n\n[postcss]: https://github.com/postcss/postcss\n[fallback values]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values\n[prettier]: https://github.com/prettier/prettier\n[options]: #options\n[response]: #response\n[official docs]: https://github.com/postcss/postcss#usage\n",
"readmeFilename": "README.md",
- "_downloads": 6
+ "_downloads": 3
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-dark-theme-class.json b/npm-data/plugins/postcss-dark-theme-class.json
index 4169652be..b20669b5b 100644
--- a/npm-data/plugins/postcss-dark-theme-class.json
+++ b/npm-data/plugins/postcss-dark-theme-class.json
@@ -1624,5 +1624,5 @@
"license": "MIT",
"readme": "# PostCSS Dark Theme Class\n\n![](\"https://postcss.org/logo-leftp.svg\" "\\"Philosopher’s"){kind=logo}
\n\nCSS solution for light/dark/auto theme switcher for websites.\n\n* It doesn’t have [FART] **flash of light theme** during JS initialization.\n* **Pure CSS** solution. You need JS only to set HTML class, when user.\n* **Automatic theme** provide better UX for users with theme switching\n by subset/sunrise (all operating systems now have theme switching schedule).\n\n[PostCSS] plugin to make switcher to force dark or light theme by copying styles\nfrom media query or [`light-dark()`] to special class.\n\n[PostCSS]: https://github.com/postcss/postcss\n[FART]: https://css-tricks.com/flash-of-inaccurate-color-theme-fart/\n[`light-dark()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark\n\n```css\n/* Input CSS */\n\n@media (prefers-color-scheme: dark) {\n html {\n --text-color: white\n }\n body {\n background: black\n }\n}\n\nsection {\n background: light-dark(white, black);\n}\n```\n\n```css\n/* Output CSS */\n\n@media (prefers-color-scheme: dark) {\n html:where(:not(.is-light)) {\n --text-color: white\n }\n :where(html:not(.is-light)) body {\n background: black\n }\n}\nhtml:where(.is-dark) {\n --text-color: white\n}\n:where(html.is-dark) body {\n background: black\n}\n\n@media (prefers-color-scheme: dark) {\n :where(html:not(.is-light)) section {\n background: black;\n }\n}\n:where(html.is-dark) section {\n background: black;\n}\n@media (prefers-color-scheme: light) {\n :where(html:not(.is-dark)) section {\n background: white;\n }\n}\n:where(html.is-light) section {\n background: white;\n}\n```\n\nBy default (without classes on `html`), website will use browser dark/light\ntheme. If user want to use dark theme, you set `html.is-dark` class.\nIf user want to force light theme, you use `html.is-light`.\n\n\n ![\"Sponsored](\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\"\n)
\n\n\n\n## Docs\nRead full docs **[here](https://github.com/postcss/postcss-dark-theme-class#readme)**.\n",
"readmeFilename": "README.md",
- "_downloads": 21680
+ "_downloads": 20686
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-direct-reset.json b/npm-data/plugins/postcss-direct-reset.json
index 26640e193..83e5d5690 100644
--- a/npm-data/plugins/postcss-direct-reset.json
+++ b/npm-data/plugins/postcss-direct-reset.json
@@ -229,5 +229,5 @@
},
"license": "ISC",
"readmeFilename": "README.md",
- "_downloads": 25
+ "_downloads": 37
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-discard-overridden.json b/npm-data/plugins/postcss-discard-overridden.json
index 5ae63e365..297b492d1 100644
--- a/npm-data/plugins/postcss-discard-overridden.json
+++ b/npm-data/plugins/postcss-discard-overridden.json
@@ -3473,5 +3473,5 @@
},
"license": "MIT",
"readmeFilename": "README.md",
- "_downloads": 41361954
+ "_downloads": 42597446
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-env-function.json b/npm-data/plugins/postcss-env-function.json
index 945dd8609..c8613f123 100644
--- a/npm-data/plugins/postcss-env-function.json
+++ b/npm-data/plugins/postcss-env-function.json
@@ -1705,5 +1705,5 @@
"license": "MIT-0",
"readme": "# PostCSS Environment Variables [][postcss]\n\n[![\"NPM](\"https://img.shields.io/npm/v/postcss-env-function.svg\")
][npm-url]\n[![\"CSS](\"https://cssdb.org/images/badges/environment-variables.svg\")
][css-url]\n[![\"Build](\"https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg\"){kind=icon}
][cli-url]\n[![](\"https://raw.githubusercontent.com/matthias-t/postcss-positioning/master/img/logo.png\"){kind=logo}
\n![\"centered](\"https://raw.githubusercontent.com/matthias-t/postcss-positioning/master/img/illustration1.png\")
\n\n```css\n.child {\n horizontal: 1s 200px 1s;\n vertical: 1s 200px 1s;\n}\n```\n\n#### Take up two thirds of the space on the right\n\n![\"element](\"https://raw.githubusercontent.com/matthias-t/postcss-positioning/master/img/illustration2.png\")
\n\n```css\n.element {\n horizontal: 1s 2s 0;\n vertical: 0 1s 0;\n}\n```\n\n## How it works\n\n```css\n.element {\n horizontal: right width left;\n vertical: top height bottom;\n}\n```\nThe values specify *space before*, *size*, and *space after* on both axes. Remaining space is distributed between stretch lengths (ending with `s`). Read the [documentation](https://github.com/matthias-t/postcss-positioning/wiki/Documentation) to learn about elements with non-absolute positioning.\n\nA CSS reset is performed by default, so user agents won't interfere with the positioning. See [options](https://github.com/matthias-t/postcss-positioning/wiki/Setup#2--options-1) if you want to disable it.\n\nBecause postcss-positioning is a PostCSS plugin, it only processes `horizontal` and `vertical`, and leaves the rest of your CSS in place. If you come around a situation where you prefer to use common CSS positioning, nothing stops you from doing so.\n\n\n## Setup\nIf you are not familiar with PostCSS, head to the [wiki](https://github.com/matthias-t/postcss-positioning/wiki/Setup) for detailed instructions.\n```bash\nnpm install --save-dev postcss-positioning postcss-calc\n```\n```js\nmodule.exports = {\n plugins: [\n require('postcss-positioning')({ /* options */ }),\n require('postcss-calc')()\n ]\n}\n```\n\n***\n\nPart of this project is inspired by Kevin Lynagh's [talk][talk] at Deconstruct 2017.\n\n[talk]: https://www.deconstructconf.com/2017/kevin-lynagh-choosing-features\n",
"readmeFilename": "README.md",
- "_downloads": 27
+ "_downloads": 50
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-preload-hovers.json b/npm-data/plugins/postcss-preload-hovers.json
index 1845f9cad..fc460ce59 100644
--- a/npm-data/plugins/postcss-preload-hovers.json
+++ b/npm-data/plugins/postcss-preload-hovers.json
@@ -588,5 +588,5 @@
"license": "MIT",
"readme": "# PostCSS Preload Hovers [![Build Status][ci-img]][ci]\n\n[PostCSS] plugin\n\nIn our application we have found that it is necessary to preload images in CSS elements with the `:hover` pseudo-class, as the loading delay is very obvious the\nfirst time a user rolls over one of these elements.\n\n[PostCSS]: https://github.com/postcss/postcss\n[ci-img]: https://travis-ci.org/ccapndave/postcss-preload-hovers.svg\n[ci]: https://travis-ci.org/ccapndave/postcss-preload-hovers\n\n### Installation\n\n```\nnpm install --save-dev postcss postcss-preload-hovers\n```\n\n### Input example\n```css\n.my-button:hover {\n background-image: url(rollover.svg);\n}\n```\n\n### Output example\nWith `outputType: \"html\"` (or omitted as this is the default):\n```html\n\n```\n\nWith `outputType: \"js\"`:\n```js\n[\"rollover.svg\"].forEach(function(url) { var link = document.createElement(\"link\"); link.rel = \"prefetch\"; link.href = url; link.as = \"image\"; document.head.appendChild(link); });\n```\n\n## Usage\n\n### Transform directly\nThis requires writing a custom stringifier (just copy the code below).\n```js\npostcss([ require('postcss-preload-hovers')() ]).process(input, { stringifier: (root, builder) => root.walkComments(comment => builder(comment.text + \"\\n\")) });\n```\n\n### Write to a file\nTo write to a file provide a `filename` property.\n```js\npostcss([ require('postcss-preload-hovers')({ outputType: \"js\", filename: \"output.js\" }) ]).process(input)\n```\n\n### Mutate a shared object\nThis is ugly, but useful.\n```js\nconst resultObj = {};\npostcss([ require('postcss-preload-hovers')({ resultObj }) ]).process(input).then(_ => { /* The result will be available as a string at resultObj.data */ });\n```\n\nSee [PostCSS] docs for examples for your environment.\n",
"readmeFilename": "README.md",
- "_downloads": 59
+ "_downloads": 60
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-preset-env.json b/npm-data/plugins/postcss-preset-env.json
index f4dbbb66d..023c3af5b 100644
--- a/npm-data/plugins/postcss-preset-env.json
+++ b/npm-data/plugins/postcss-preset-env.json
@@ -16851,5 +16851,5 @@
"email": "jonathantneal@hotmail.com"
}
],
- "_downloads": 24257929
+ "_downloads": 24210484
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-proportional.json b/npm-data/plugins/postcss-proportional.json
index c23ddefe1..ea57634e6 100644
--- a/npm-data/plugins/postcss-proportional.json
+++ b/npm-data/plugins/postcss-proportional.json
@@ -304,5 +304,5 @@
"license": "MIT",
"readme": "ERROR: No README data found!",
"readmeFilename": "",
- "_downloads": 170
+ "_downloads": 156
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-pseudo-class-any-link.json b/npm-data/plugins/postcss-pseudo-class-any-link.json
index f53288f8d..82efa42ce 100644
--- a/npm-data/plugins/postcss-pseudo-class-any-link.json
+++ b/npm-data/plugins/postcss-pseudo-class-any-link.json
@@ -2702,5 +2702,5 @@
"email": "romainmenke@gmail.com"
}
],
- "_downloads": 25287591
+ "_downloads": 24081252
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-px-to-viewport-8-fix.json b/npm-data/plugins/postcss-px-to-viewport-8-fix.json
new file mode 100644
index 000000000..97c097cdc
--- /dev/null
+++ b/npm-data/plugins/postcss-px-to-viewport-8-fix.json
@@ -0,0 +1,148 @@
+{
+ "_id": "postcss-px-to-viewport-8-fix",
+ "name": "postcss-px-to-viewport-8-fix",
+ "dist-tags": {
+ "latest": "1.2.6"
+ },
+ "versions": {
+ "1.2.6": {
+ "name": "postcss-px-to-viewport-8-fix",
+ "version": "1.2.6",
+ "main": "lib/index.js",
+ "module": "lib/index.js",
+ "typings": "lib/index.d.ts",
+ "description": "css-vw add include",
+ "authors": {
+ "name": "husanr",
+ "email": "husanr@yeah.net"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/lkxian888/postcss-px-to-viewport-8-plugin.git"
+ },
+ "scripts": {
+ "build": "father build",
+ "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+ "test": "jest spec/*.spec.js"
+ },
+ "lint-staged": {
+ "*.{js,jsx,less,md,json}": [
+ "prettier --write",
+ "git add"
+ ]
+ },
+ "devDependencies": {
+ "@types/jest": "^25.1.3",
+ "@types/node": "^13.7.7",
+ "@types/object-assign": "^4.0.30",
+ "father": "^4.1.3",
+ "father-build": "^1.17.2",
+ "jest": "^25.4.0",
+ "lint-staged": "^10.0.8",
+ "postcss": "^8.3.8",
+ "prettier": "^1.19.1",
+ "ts-jest": "^29.0.5",
+ "yorkie": "^2.0.0"
+ },
+ "gitHooks": {
+ "pre-commit": "lint-staged"
+ },
+ "dependencies": {
+ "object-assign": "^4.1.1"
+ },
+ "directories": {
+ "example": "example"
+ },
+ "keywords": [
+ "postcss-px-to-viewport-8-plugin",
+ "viewport",
+ "postcss",
+ "postcss-plugin",
+ "css",
+ "px",
+ "vw",
+ "vh",
+ "vmin",
+ "vmax"
+ ],
+ "author": {
+ "name": "husanr"
+ },
+ "license": "MIT",
+ "_id": "postcss-px-to-viewport-8-fix@1.2.6",
+ "bugs": {
+ "url": "https://github.com/lkxian888/postcss-px-to-viewport-8-plugin/issues"
+ },
+ "homepage": "https://github.com/lkxian888/postcss-px-to-viewport-8-plugin#readme",
+ "_nodeVersion": "20.11.0",
+ "_npmVersion": "10.2.4",
+ "dist": {
+ "integrity": "sha512-fXhgxJv1tINSFNRd5NPccoTz0fhY7lae49VcTzy4rn6hm7bjTdXX/snkNQO+RvqIJuHvgJf+WdQjmSk+nNur/Q==",
+ "shasum": "7420a58e24d6936f936a7b2466dc3e8ee760a1cd",
+ "tarball": "https://registry.npmjs.org/postcss-px-to-viewport-8-fix/-/postcss-px-to-viewport-8-fix-1.2.6.tgz",
+ "fileCount": 12,
+ "unpackedSize": 27433,
+ "signatures": [
+ {
+ "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
+ "sig": "MEUCIAjXhKMIE5UwbrGfCQTw2CyPJyBIu1yy+tNorNGSrWVkAiEA70Fy8mbQSzjgq/HvbZGLxihv/wpLap+wouGGj/pPYFM="
+ }
+ ]
+ },
+ "_npmUser": {
+ "name": "husanr",
+ "email": "14756733875@163.com"
+ },
+ "maintainers": [
+ {
+ "name": "husanr",
+ "email": "14756733875@163.com"
+ }
+ ],
+ "_npmOperationalInternal": {
+ "host": "s3://npm-registry-packages",
+ "tmp": "tmp/postcss-px-to-viewport-8-fix_1.2.6_1716261983022_0.7530975968631108"
+ },
+ "_hasShrinkwrap": false
+ }
+ },
+ "time": {
+ "created": "2024-05-21T03:26:23.021Z",
+ "1.2.6": "2024-05-21T03:26:23.168Z",
+ "modified": "2024-05-21T03:26:23.459Z"
+ },
+ "maintainers": [
+ {
+ "name": "husanr",
+ "email": "14756733875@163.com"
+ }
+ ],
+ "description": "css-vw add include",
+ "homepage": "https://github.com/lkxian888/postcss-px-to-viewport-8-plugin#readme",
+ "keywords": [
+ "postcss-px-to-viewport-8-plugin",
+ "viewport",
+ "postcss",
+ "postcss-plugin",
+ "css",
+ "px",
+ "vw",
+ "vh",
+ "vmin",
+ "vmax"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/lkxian888/postcss-px-to-viewport-8-plugin.git"
+ },
+ "author": {
+ "name": "husanr"
+ },
+ "bugs": {
+ "url": "https://github.com/lkxian888/postcss-px-to-viewport-8-plugin/issues"
+ },
+ "license": "MIT",
+ "readme": "# postcss-px-to-viewport-8\n注：仅在postcss-px-to-viewport-8-plugin基础上新增include属性，后续不一定持续维护，请关注原作者仓库是否后续会更新！\n\n将 px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 [PostCSS](https://github.com/postcss/postcss) 插件.\n\n## 问题\n\n使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 控制台报以下代码\n\n```js\npostcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration\n\n```\n\n## 解决\n\n`postcss-px-to-viewport` 替换 `postcss-px-to-viewport-8-plugin`\n\n注意对应库版本\n\n```js\n \"postcss\": \"^8.3.8\", // 8.0.0版本都不会转单位\n \"postcss-loader\": \"^6.1.1\",\n```\n\n## 简介\n\n如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你 CSS 中的 px 单位转化为 vw，1vw 等于 1/100 视口宽度。\n\n## 输入\n\n```css\n.class {\n margin: -10px 0.5vh;\n padding: 5vmin 9.5px 1px;\n border: 3px solid black;\n border-bottom-width: 1px;\n font-size: 14px;\n line-height: 20px;\n}\n\n.class2 {\n padding-top: 10px; /* px-to-viewport-ignore */\n /* px-to-viewport-ignore-next */\n padding-bottom: 10px;\n /* Any other comment */\n border: 1px solid black;\n margin-bottom: 1px;\n font-size: 20px;\n line-height: 30px;\n}\n\n@media (min-width: 750px) {\n .class3 {\n font-size: 16px;\n line-height: 22px;\n }\n}\n```\n\n## 输出\n\n```css\n.class {\n margin: -3.125vw 0.5vh;\n padding: 5vmin 2.96875vw 1px;\n border: 0.9375vw solid black;\n border-bottom-width: 1px;\n font-size: 4.375vw;\n line-height: 6.25vw;\n}\n\n.class2 {\n padding-top: 10px;\n padding-bottom: 10px;\n /* Any other comment */\n border: 1px solid black;\n margin-bottom: 1px;\n font-size: 6.25vw;\n line-height: 9.375vw;\n}\n\n@media (min-width: 750px) {\n .class3 {\n font-size: 16px;\n line-height: 22px;\n }\n}\n```\n\n## 安装\n\n```js\n\nnpm install postcss-px-to-viewport-8-plugin -D\nor\nyarn add postcss-px-to-viewport-8-plugin -D\n```\n\n## 配置参数使用与 [postcss-px-to-viewport](https://www.npmjs.com/package/postcss-px-to-viewport) 一致\n\n**默认选项：**\n\n```\n{\n unitToConvert: 'px',\n viewportWidth: 320,\n unitPrecision: 5,\n propList: ['*'],\n viewportUnit: 'vw',\n fontViewportUnit: 'vw',\n selectorBlackList: [],\n minPixelValue: 1,\n mediaQuery: false,\n replace: true,\n exclude: [],\n landscape: false,\n landscapeUnit: 'vw',\n landscapeWidth: 568\n}\n```\n\n## API 说明\n\n| 参数 | 说明 | 类型 | 默认值 |\n| :-- | --- | --- | --- |\n| `unitToConvert` | 需要转换的单位，默认为 px | `string` | px |\n| `viewportWidth` | 设计稿的视口宽度,如传入函数，函数的参数为当前处理的文件路径,函数返回 `undefind` 跳过转换 | `number \\| Function` | 320 |\n| `unitPrecision` | 单位转换后保留的精度 | `number` | 5 |\n| `propList` | 能转化为 vw 的属性列表 | `string[]` | ['*'] |\n| `viewportUnit` | 希望使用的视口单位 | `string` | vw |\n| `fontViewportUnit` | 字体使用的视口单位 | `string` | vw |\n| `selectorBlackList` | 需要忽略的 CSS 选择器，不会转为视口单位，使用原有的 px 等单位 | `string[]` | [] |\n| `minPixelValue` | 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换 | `number` | 1 |\n| `mediaQuery` | 媒体查询里的单位是否需要转换单位 | `boolean` | false |\n| `replace` | 是否直接更换属性值，而不添加备用属性 | `boolean` | true |\n| `landscape` | 是否添加根据 `landscapeWidth` 生成的媒体查询条件 `@media (orientation: landscape)` | `boolean` | false |\n| `landscapeUnit` | 横屏时使用的单位 | `string` | vw |\n| `landscapeWidth` | 横屏时使用的视口宽度,,如传入函数，函数的参数为当前处理的文件路径,函数返回 `undefind` 跳过转换 | `number` | 568 |\n| `exclude` | 忽略某些文件夹下的文件或特定文件，例如 node_modules 下的文件，如果值是一个正则表达式，那么匹配这个正则的文件会被忽略，如果传入的值是一个数组，那么数组里的值必须为正则 | `Regexp` | undefined |\n| `include` | 需要转换的文件，例如只转换 'src/mobile' 下的文件 (`include: /\\/src\\/mobile\\//`)，如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件， 如果传入的值是一个数组，那么数组里的值必须为正则 | `Regexp` | undefined |\n\n## 补充说明\n\n- `propList` (Array) 能转化为 vw 的属性列表\n - 传入特定的 CSS 属性；\n - 可以传入通配符\"_\"去匹配所有属性，例如：['_']；\n - 在属性的前或后添加\"*\",可以匹配特定的属性. (例如['*position\\*'] 会匹配 background-position-y)\n - 在特定属性前加 \"!\"，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换 letter-spacing\n - \"!\" 和 \"_\"可以组合使用， 例如: ['_', '!font\\*']，将不转换 font-size 以及 font-weight 等属性\n- `selectorBlackList` (Array) 需要忽略的 CSS 选择器，不会转为视口单位，使用原有的 px 等单位。\n\n - 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配\n - 例如 `selectorBlackList` 为 `['body']` 的话， 那么 `.body-class` 就会被忽略\n - 如果传入的值为正则表达式的话，那么就会依据 CSS 选择器是否匹配该正则\n - 例如 `selectorBlackList` 为 `[/^body$/]` , 那么 `body` 会被忽略，而 `.body` 不会\n\n- 你可以使用特殊的注释来忽略单行的转换:\n\n - `/* px-to-viewport-ignore-next */` — 在单独的行上，防止在下一行上进行转换。\n - `/* px-to-viewport-ignore */` — 在右边的属性之后，防止在同一行上进行转换。\n\nExample:\n\n```css\n/* example input: */\n.class {\n /* px-to-viewport-ignore-next */\n width: 10px;\n padding: 10px;\n height: 10px; /* px-to-viewport-ignore */\n border: solid 2px #000; /* px-to-viewport-ignore */\n}\n\n/* example output: */\n.class {\n width: 10px;\n padding: 3.125vw;\n height: 10px;\n border: solid 2px #000;\n}\n```\n\nThere are several more reasons why your pixels may not convert, the following options may affect this: `propList`, `selectorBlackList`, `minPixelValue`, `mediaQuery`, `exclude`, `include`.\n\n## 与 PostCss 配置文件一起使用\n\n**在`postcss.config.js`文件添加如下配置**\n\n```js\nmodule.exports = {\n plugins: {\n ...\n 'postcss-px-to-viewport-8-plugin': {\n viewportWidth: 1920,\n exclude: [/node_modules/],\n unitToConvert: 'px',\n ...\n }\n }\n}\n```\n\n## vite 使用\n\n**在`vite.config.ts`文件添加如下配置**\n\n```ts\nimport { defineConfig } from 'vite';\nimport postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';\n\nexport default defineConfig({\n css: {\n postcss: {\n plugins: [\n postcsspxtoviewport8plugin({\n unitToConvert: 'px',\n viewportWidth: file => {\n let num = 1920;\n if (file.indexOf('m_') !== -1) {\n num = 375;\n }\n return num;\n },\n unitPrecision: 5, // 单位转换后保留的精度\n propList: ['*'], // 能转化为vw的属性列表\n viewportUnit: 'vw', // 希望使用的视口单位\n fontViewportUnit: 'vw', // 字体使用的视口单位\n selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。\n minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换\n mediaQuery: true, // 媒体查询里的单位是否需要转换单位\n replace: true, // 是否直接更换属性值，而不添加备用属性\n exclude: [/node_modules\\/ant-design-vue/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件\n include: [], // 如果设置了include，那将只有匹配到的文件才会被转换\n landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)\n landscapeUnit: 'vw', // 横屏时使用的单位\n landscapeWidth: 1024, // 横屏时使用的视口宽度\n }),\n ],\n },\n },\n});\n```\n\n## 作者\n\n- [lkxian888](https://github.com/lkxian888)\n",
+ "readmeFilename": "README.md",
+ "_downloads": 0
+}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-px-to-viewport-8-pro-plugin.json b/npm-data/plugins/postcss-px-to-viewport-8-pro-plugin.json
index 67ab44373..4f7a38b31 100644
--- a/npm-data/plugins/postcss-px-to-viewport-8-pro-plugin.json
+++ b/npm-data/plugins/postcss-px-to-viewport-8-pro-plugin.json
@@ -1034,5 +1034,5 @@
"license": "MIT",
"readme": "# postcss-px-to-viewport-8-plugin\n\n## 问题\n\n使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 控制台报以下代码\n\n```bash\npostcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration\n```\n\n## 解决\n\npostcss-px-to-viewport 替换 postcss-px-to-viewport-8-plugin\n\n## 解决\n\nnew postcss.atRule not a constructor\n\n## 对应库版本\n\n```js\n \"postcss\": \"^8.3.8\", // 8.0.0版本都不会转单位\n \"postcss-loader\": \"^6.1.1\",\n```\n\n## 安装\n\n```js\n\nnpm install postcss-px-to-viewport-8-plugin -D\nor\nyarn add postcss-px-to-viewport-8-plugin -D\n```\n\n## 使用与 [postcss-px-to-viewport](https://www.npmjs.com/package/postcss-px-to-viewport) 一致\n\n**默认选项：**\n\n```\n{\n unitToConvert: 'px',\n viewportWidth: 320,\n unitPrecision: 5,\n propList: ['*'],\n viewportUnit: 'vw',\n fontViewportUnit: 'vw',\n selectorBlackList: [],\n minPixelValue: 1,\n mediaQuery: false,\n replace: true,\n exclude: [],\n landscape: false,\n landscapeUnit: 'vw',\n landscapeWidth: 568\n}\n```\n\n- unitToConvert (String) unit to convert, by default, it is px.\n- viewportWidth (Number) The width of the viewport.\n- unitPrecision (Number) The decimal numbers to allow the vw units to grow to.\n- propList (Array) The properties that can change from px to vw.\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- viewportUnit (String) Expected units.\n- fontViewportUnit (String) Expected units for 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- minPixelValue (Number) Set the minimum pixel value to replace.\n- mediaQuery (Boolean) Allow px to be converted in media queries.\n- replace (Boolean) replaces rules containing vw instead of adding fallbacks.\n- exclude (Array or Regexp) Ignore some files like 'node_modules'\n - If value is regexp, will ignore the matches files.\n - If value is array, the elements of the array are regexp.\n- landscape (Boolean) Adds @media (orientation: landscape) with values converted via landscapeWidth.\n- landscapeUnit (String) Expected unit for landscape option\n- landscapeWidth (Number) Viewport width for landscape orientation.\n\n## 与 PostCss 配置文件一起使用\n\n**添加到您的 `postcss.config.js`**\n\n```js\nmodule.exports = {\n plugins: {\n ...\n 'postcss-px-to-viewport-8-plugin': {\n // options\n }\n }\n}\n```\n\nauthor: lkx\n",
"readmeFilename": "README.md",
- "_downloads": 26
+ "_downloads": 29
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-px-to-viewport-units.json b/npm-data/plugins/postcss-px-to-viewport-units.json
index 9f977bb29..0fbe241bc 100644
--- a/npm-data/plugins/postcss-px-to-viewport-units.json
+++ b/npm-data/plugins/postcss-px-to-viewport-units.json
@@ -118,5 +118,5 @@
"license": "MIT",
"readme": "# postcss-px-to-viewport-units [](http://badge.fury.io/js/postcss-px-to-viewport-units)\r\n\r\nForked by evrone/postcss-px-to-viewport \r\n\r\nA plugin for [PostCSS](https://github.com/ai/postcss) that generates viewport units (vw, vh, vmin, vmax) from pixel units.\r\n\r\n## Usage\r\n\r\nIf your project involves a fixed width, this script will help to convert pixels into viewport units.\r\n\r\n### Input/Output\r\n\r\n```css\r\n// input\r\n\r\n.class {\r\n margin: -10px .5vh;\r\n padding: 5vmin 9.5px 1px;\r\n border: 3px solid black;\r\n border-bottom-width: 1px;\r\n font-size: 14px;\r\n line-height: 20px;\r\n}\r\n\r\n.class2 {\r\n border: 1px solid black;\r\n margin-bottom: 1px;\r\n font-size: 20px;\r\n line-height: 30px;\r\n}\r\n\r\n@media (min-width: 750px) {\r\n .class3 {\r\n font-size: 16px;\r\n line-height: 22px;\r\n }\r\n}\r\n\r\n// output\r\n\r\n.class {\r\n margin: -3.125vw .5vh;\r\n padding: 5vmin 2.96875vw 1px;\r\n border: 0.9375vw solid black;\r\n border-bottom-width: 1px;\r\n font-size: 4.375vw;\r\n line-height: 6.25vw;\r\n}\r\n\r\n.class2 {\r\n border: 1px solid black;\r\n margin-bottom: 1px;\r\n font-size: 6.25vw;\r\n line-height: 9.375vw;\r\n}\r\n\r\n@media (min-width: 234.375vw) {\r\n .class3 {\r\n font-size: 5vw;\r\n line-height: 6.875vw;\r\n }\r\n}\r\n```\r\n\r\n### Example\r\n\r\n```js\r\n'use strict';\r\n\r\nvar fs = require('fs');\r\nvar postcss = require('postcss');\r\nvar pxToViewport = require('..');\r\nvar css = fs.readFileSync('main.css', 'utf8');\r\nvar options = {\r\n replace: false\r\n};\r\nvar processedCss = postcss(pxToViewport(options)).process(css).css;\r\n\r\nfs.writeFile('main-viewport.css', processedCss, function (err) {\r\n if (err) {\r\n throw err;\r\n }\r\n console.log('File with viewport units written.');\r\n});\r\n```\r\n\r\n### Options\r\n\r\nDefault:\r\n```js\r\n{\r\n unitToConvert: 'px',\r\n viewportWidth: 320,\r\n viewportHeight: 568, // not now used; TODO: need for different units and math for different properties\r\n unitPrecision: 5,\r\n viewportUnit: 'vw',\r\n fontViewportUnit: 'vw', // vmin is more suitable.\r\n selectorBlackList: [],\r\n minPixelValue: 1,\r\n mediaQuery: false,\r\n exclude: [] // ignore some files\r\n}\r\n```\r\n- `unitToConvert` (String) unit to convert, by default, it is px.\r\n- `viewportWidth` (Number) The width of the viewport.\r\n- `viewportHeight` (Number) The height of the viewport.\r\n- `unitPrecision` (Number) The decimal numbers to allow the REM units to grow to.\r\n- `viewportUnit` (String) Expected units.\r\n- `fontViewportUnit` (String) Expected units for font.\r\n- `selectorBlackList` (Array) The selectors to ignore and leave as px.\r\n - If value is string, it checks to see if selector contains the string.\r\n - `['body']` will match `.body-class`\r\n - If value is regexp, it checks to see if the selector matches the regexp.\r\n - `[/^body$/]` will match `body` but not `.body`\r\n- `minPixelValue` (Number) Set the minimum pixel value to replace.\r\n- `mediaQuery` (Boolean) Allow px to be converted in media queries.\r\n- `exclude` (Array or Regexp) Ignore some files like 'node_modules'\r\n - If value is regexp, will ignore the matches files.\r\n - If value is array, the elements of the array are regexp.\r\n\r\n### Use with gulp-postcss\r\n\r\n```js\r\nvar gulp = require('gulp');\r\nvar postcss = require('gulp-postcss');\r\nvar pxtoviewport = require('postcss-px-to-viewport-units');\r\n\r\ngulp.task('css', function () {\r\n\r\n var processors = [\r\n pxtoviewport({\r\n viewportWidth: 320,\r\n viewportUnit: 'vmin'\r\n })\r\n ];\r\n\r\n return gulp.src(['build/css/**/*.css'])\r\n .pipe(postcss(processors))\r\n .pipe(gulp.dest('build/css'));\r\n});\r\n```\r\n### Use with webpack\r\n\r\n#### Install\r\n\r\n```bash\r\nnpm install postcss-px-to-viewport-units -D\r\n```\r\n\r\n#### webacpk config\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.css$/,\r\n use: [\"style-loader\", \"css-loader\", \"postcss-loader\"]\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n#### postcss config\r\nAnd create .postcssrc.js\r\n```js\r\nmodule.exports = {\r\n \"plugins\": {\r\n \"postcss-px-to-viewport-units\": {\r\n viewportWidth: 750,\r\n viewportHeight: 1334,\r\n unitPrecision: 5,\r\n viewportUnit: 'vw',\r\n selectorBlackList: [],\r\n fontViewportUnit: 'vw',\r\n minPixelValue: 1,\r\n mediaQuery: false,\r\n exclude: [/node_modules/]\r\n }\r\n }\r\n}\r\n```\r\n",
"readmeFilename": "README.md",
- "_downloads": 10
+ "_downloads": 15
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-px-to-vw.json b/npm-data/plugins/postcss-px-to-vw.json
index d8b74a043..2bcbfe827 100644
--- a/npm-data/plugins/postcss-px-to-vw.json
+++ b/npm-data/plugins/postcss-px-to-vw.json
@@ -165,5 +165,5 @@
"license": "ISC",
"readme": "# postcss-px-to-vw\nA plugin for PostCSS that converts pixel units to vw unit.\n\n```\n.title {\n /* you can override pixel replacement by adding a \"px\" *\n * comment after the declaration if you want to keep. */\n\n font-size: 32px; /*px*/\n padding: 16px 0 18px;\n}\n```\n\n```\n.title {\n /* you can override pixel replacement by adding a \"px\" *\n * comment after the declaration if you want to keep. */\n\n font-size: 32px; /*px*/\n padding: 4.444444444444445vw 0 5vw;\n}\n```\n\n## Usage\n\nPlug it into your PostCSS configuration.\n\n```\nvar option = {\n uwUnit: 720, // Base designer size; 360px by default \n};\n\npostcss([require('postcss-px-to-vw')(option)])\n```",
"readmeFilename": "README.md",
- "_downloads": 8
+ "_downloads": 10
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-px2upx.json b/npm-data/plugins/postcss-px2upx.json
index 9f058995d..15e58627b 100644
--- a/npm-data/plugins/postcss-px2upx.json
+++ b/npm-data/plugins/postcss-px2upx.json
@@ -175,5 +175,5 @@
"license": "MIT",
"readme": "# postcss-px2upx\n\nThis is a [postcss](https://www.npmjs.com/package/postcss) plugin of [px2upx](https://www.npmjs.com/package/px2upx).\n\n[![NPM version][npm-image]][npm-url]\n[![Build status][travis-image]][travis-url]\n[![Downloads][downloads-image]][downloads-url]\n\n[npm-image]: https://img.shields.io/npm/v/postcss-px2upx.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/postcss-px2upx\n[travis-image]: https://img.shields.io/travis/songsiqi/px2upx-postcss.svg?style=flat-square\n[travis-url]: https://travis-ci.org/songsiqi/px2upx-postcss\n[downloads-image]: http://img.shields.io/npm/dm/postcss-px2upx.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/postcss-px2upx\n\n## Usage\n\n### Node\n\n```\nvar postcss = require('postcss');\nvar px2upx = require('postcss-px2upx');\nvar originCssText = '...';\nvar newCssText = postcss().use(px2upx({upxUnit: 64})).process(originCssText).css;\n```\n\n**Please see [px2upx](https://www.npmjs.com/package/px2upx) for more information about the features and usage of px2upx.**\n\n### Gulp\n\n```\nnpm install gulp-postcss\n```\n\n```\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar px2upx = require('postcss-px2upx');\n\ngulp.task('default', function() {\n var processors = [px2upx({upxUnit: 75})];\n return gulp.src('./src/*.css')\n .pipe(postcss(processors))\n .pipe(gulp.dest('./dest'));\n});\n```\n\n### Webpack\n\n```\nnpm install postcss-loader\n```\n\n```\nvar px2upx = require('postcss-px2upx');\n\nmodule.exports = {\n module: {\n loaders: [\n {\n test: /\\.css$/,\n loader: \"style-loader!css-loader!postcss-loader\"\n }\n ]\n },\n postcss: function() {\n return [px2upx({upxUnit: 75})];\n }\n}\n```\n\n### Grunt\n\n```\nnpm install grunt-postcss\n```\n\n```\nmodule.exports = function(grunt) {\n grunt.initConfig({\n postcss: {\n options: {\n processors: [\n px2upx({upxUnit: 75})\n ]\n },\n dist: {\n src: 'src/*.css',\n dest: 'build'\n }\n }\n });\n grunt.loadNpmTasks('grunt-postcss');\n grunt.registerTask('default', ['postcss']);\n}\n```\n\n## Change Log\n\n### 0.3.0\n\n* Deps: px2upx@~0.5.0\n * Support Animation keyframes (no `/*px*/` comment).\n\n### 0.2.0\n\n* Deps: postcss@^5.0.0\n\n### 0.1.6\n\n* Deps: px2upx@~0.4.0\n * The generated [data-dpr] rules follow the origin rule, no longer placed at the end of the whole style sheet.\n * Optimize 0px, do not generate 3 [data-dpr] rules.\n\n### 0.1.5\n\n* Do not extend current root node.\n\n### 0.1.4\n\n* Fix bug while working with webpack loader.\n\n### 0.1.0\n\n* First release.\n\n## License\n\nMIT\n",
"readmeFilename": "README.md",
- "_downloads": 22
+ "_downloads": 17
}
\ No newline at end of file
diff --git a/npm-data/plugins/postcss-pxtorem-multi.json b/npm-data/plugins/postcss-pxtorem-multi.json
index 527aa1a5d..d926d6f18 100644
--- a/npm-data/plugins/postcss-pxtorem-multi.json
+++ b/npm-data/plugins/postcss-pxtorem-multi.json
@@ -352,5 +352,5 @@
"license": "MIT",
"readme": "# postcss-pxtorem-multi [](http://badge.fury.io/js/postcss-pxtorem-multi)\n\nThis is a fork based on [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem). The difference is `postcss-pxtorem-multi` supports multiple rules.\n\n## Install\n\n```shell\n$ npm install postcss-pxtorem-multi --save-dev\n```\n\n### options\n\nType: `Object | Null` \nDefault:\n```js\n{\n include: null,\n exclude: null,\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 rules: []\n}\n```\n- `include` (String|RegExp|Array...
\n```\n\n## Options\n\nYou may pass options to configure how the plugin generates utilities.\n\n#### respectImportant\n\nType: `Boolean`\\\nDefault: `false`\n\nBy default, the plugin does not respect the `important` option from your Tailwind config, as this may cause issues in Outlook when CSS is inlined.\n\nYou may force it to generate `!important` utilities by setting this to `true`:\n\n```js\nmodule.exports = {\n plugins: [\n require('tailwindcss-mso')({\n respectImportant: true,\n }),\n ],\n}\n```\n\nResult:\n\n```html\n\n```\n\n```css\n.mso-hide-all {\n mso-hide: all !important;\n}\n```\n\n## Arbitrary values\n\nThe plugin supports arbitrary values:\n\n```html\n...
\n```\n\n```css\n.mso-text-raise-\\[20px\\] {\n mso-text-raise: 20px;\n}\n```\n\n## Negative values\n\nNegative values are also supported, just as you'd expect:\n\n```html\n...
\n```\n\n```css\n.-mso-text-raise-4 {\n mso-text-raise: -16px;\n}\n```\n\n## Generated utilities\n\nThe plugin generates both utilities that have default values, as well as utilities based on your Tailwind CSS configuration.\n\n### Spacing utilities\n\nThese utilities also work with values from your `theme.spacing` scale:\n\n- `mso-line-height-alt`\n- `mso-text-indent-alt`\n- `mso-padding-alt` (+ variations)\n- `mso-margin-alt` (+ variations)\n- `mso-para-margin` (+ variations)\n- `mso-text-raise`\n- `mso-font-width`\n- `mso-element-top`, `mso-element-left`\n- `mso-ansi-font-size`, `mso-bidi-font-size`\n- `mso-ansi-font-size`, `mso-bidi-font-size`\n- `mso-element-frame-width`, `mso-element-frame-height`\n- `mso-element-frame-vspace`, `mso-element-frame-hspace`\n- `mso-table-tspace`, `mso-table-rspace`, `mso-table-bspace`, `mso-table-lspace`\n\nWhere it makes sense, these also support negative versions, like `-mso-text-raise-20`.\n\n### Color utilities\n\nThese utilities are all based on your `theme.colors` config:\n\n- `mso-color-alt`\n- `mso-highlight`\n- `text-underline-color`\n- `mso-shading`\n- `mso-shadow-color`\n\n### Border utilities\n\nUtilities for controlling the border styles of elements.\n\nFor border colors:\n\n- `mso-border-alt`\n- `mso-border-between`\n- `mso-border-bottom-alt`\n- `mso-border-left-alt`\n- `mso-border-right-alt`\n- `mso-border-top-alt`\n\nFor border widths:\n\n- `mso-border-between-width`\n- `mso-border-width-alt`\n- `mso-border-bottom-width-alt`\n- `mso-border-left-width-alt`\n- `mso-border-right-width-alt`\n- `mso-border-top-width-alt`\n\nOthers:\n\n- `mso-border-bottom-source`\n- `mso-border-left-source`\n- `mso-border-right-source`\n- `mso-border-top-source`\n- `mso-border-shadow`\n- `mso-border-effect`\n\n\n### Font utilities\n\nThese font size utilities work with values from your `theme.spacing` config:\n\n- `mso-ansi-font-size`\n- `mso-bidi-font-size`\n\nAdditionally, each utility also supports these values: `large`, `larger`, `medium`, `small`, `smaller`, `x-large`, `x-small`, `xx-large`, `xx-small`.\n\n### Other utilities\n\nThe plugin also generates the following utilities with default values:\n\n#### mso-{ansi|bidi}-font-style\n\nValues: `italic`, `normal`, `oblique`\n\n#### mso-{ansi|bidi}-font-weight\n\nValues: `lighter`, `normal`, `bold`, `bolder`\n\n#### mso-{ascii|bidi|arabic}-font-family\n\nValues: `auto`, `cursive`, `fantasy`, `monospace`, `sans-serif`, `serif`\n\n#### mso-bidi-flag\n\nValues: `on`, `off`\n\n#### mso-highlight\n\nValues: `auto`, `windowtext` (+ colors from your config)\n\n#### mso-generic-font-family\n\nValues: `auto`, `decorative`, `modern`, `roman`, `script`, `swiss`\n\n#### mso-element-frame-{width|height}\n\nValues: `auto` (+ values from your `spacing` scale)\n\n#### mso-element\n\nValues: `comment`, `comment-list`, `dropcap-dropped`, `dropcap-in-margin`, `endnote`, `endnote-continuation-notice`, `endnote-continuation-separator`, `endnote-list`, `endnote-separator`, `field-begin`, `field-end`, `field-separator`, `footer`, `footnote`, `footnote-continuation-notice`, `footnote-continuation-separator`, `footnote-list`, `footnote-separator`, `frame`, `header`, `none`, `paragraph-mark-properties`, `table-head`\n\n#### mso-element-left\n\nValues: `center`, `inside`, `left`, `outside`, `right` (+ values from your `spacing` scale)\n\n#### mso-element-top\n\nValues: `bottom`, `inside`, `middle`, `outside`, `top` (+ values from your `spacing` scale)\n\n#### mso-hide\n\nValues: `all`, `none`, `screen`\n\n#### mso-line-height-rule\n\nValues: `at-least`, `exactly`\n\n#### mso-line-height-alt\n\nValues: `normal` (+ values from your `spacing` scale)\n\n\n[npm]: https://www.npmjs.com/package/tailwindcss-mso\n[npm-stats]: https://npm-stat.com/charts.html?package=tailwindcss-mso&from=2020-08-23\n[npm-version-shield]: https://img.shields.io/npm/v/tailwindcss-mso.svg\n[npm-stats-shield]: https://img.shields.io/npm/dt/tailwindcss-mso.svg?color=6875f5\n[github-ci]: https://github.com/maizzle/tailwindcss-mso/actions\n[github-ci-shield]: https://github.com/maizzle/tailwindcss-mso/actions/workflows/nodejs.yml/badge.svg\n[license]: ./LICENSE\n[license-shield]: https://img.shields.io/npm/l/tailwindcss-mso.svg?color=0e9f6e\n", "readmeFilename": "README.md", - "_downloads": 27351 + "_downloads": 24173 } \ No newline at end of file