"readme": "# PostCSS Alpha 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-alpha-function --save-dev`\n\n[PostCSS Alpha Function] lets you use the `alpha` function in\nCSS, following the [CSS Color] specification.\n\n```css\n.color {\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n\n/* becomes */\n\n.color {\n\tcolor: rgb(from #dddd r g b / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));\n}\n```\n\n## Usage\n\nAdd [PostCSS Alpha Function] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-alpha-function --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssAlphaFunction = require('@csstools/postcss-alpha-function');\n\npostcss([\n\tpostcssAlphaFunction(/* 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\npostcssAlphaFunction({ preserve: true })\n```\n\n```css\n.color {\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n\n/* becomes */\n\n.color {\n\tcolor: rgb(from #dddd r g b / calc(alpha / 2));\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));\n}\n\n@supports (color: alpha(from red / 1)) and (color: rgb(0 0 0 / 0)) {\n:root {\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\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\npostcssAlphaFunction({ enableProgressiveCustomProperties: false })\n```\n\n```css\n.color {\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n\n/* becomes */\n\n.color {\n\tcolor: rgb(from #dddd r g b / calc(alpha / 2));\n\tcolor: alpha(from #dddd / calc(alpha / 2));\n}\n\n:root {\n\t--a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));\n\t--a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));\n}\n```\n\n_Custom properties do not fallback to the previous declaration_\n\n## Copyright : color conversions\n\nThis software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#alpha-function\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-alpha-function\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Alpha Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-alpha-function\n[CSS Color]: https://drafts.csswg.org/css-color-5/#relative-alpha\n",
0 commit comments