"readme": "# PostCSS Gradients Interpolation Method [<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-gradients-interpolation-method --save-dev`\n\n[PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Images Module 4].\n\n```css\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```css\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```css\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\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```css\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```css\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",
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments