add postcss-gradients-interpolation-method to postcss-preset-env (#910)

* add `postcss-gradients-interpolation-method` to `postcss-preset-env`

* one more fix

* cssdb update

Author: romainmenke

package-lock.json

@@ -1,6 +1,6 @@
 # Changes to CSS Color Parser
 
-### 1.1.0 (minor)
+### Unreleased (minor)
 
 - Add a flag to `serializeP3` and `serializeRGB` to skip gamut mapping.
 

packages/css-color-parser/CHANGELOG.md

@@ -167,6 +167,14 @@ postcssTape(plugin)({
 			browsers: '> 0%'
 		},
 	},
+	'basic:preserve:false': {
+		message: 'supports { preserve: false, stage: 0, browsers: "> 0%" } usage',
+		options: {
+			preserve: false,
+			stage: 0,
+			browsers: '> 0%'
+		},
+	},
 	'basic:hebrew': {
 		message: 'supports { logical: { inlineDirection: "right-to-left" }, stage: 0, browsers: "> 0%" } usage',
 		options: {

plugin-packs/postcss-preset-env/.tape.mjs

@@ -1,5 +1,10 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased (minor)
+
+- Added `@csstools/postcss-gradients-interpolation-method` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme) for usage details.
+- Updated `cssdb` to `7.5.2` (patch)
+
 ### 8.1.0 (March 25, 2023)
 
 - Added `@csstools/postcss-color-mix-function` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function#readme) for usage details.

plugin-packs/postcss-preset-env/CHANGELOG.md

@@ -13,6 +13,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | `clamp` | `clamp` Function | [example](https://preset-env.cssdb.org/features/#clamp) | [docs](https://github.com/polemius/postcss-clamp#readme) |
 | `color-function` | `color()` Function | [example](https://preset-env.cssdb.org/features/#color-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function#readme) |
 | `color-functional-notation` | Color Functional Notation | [example](https://preset-env.cssdb.org/features/#color-functional-notation) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation#readme) |
+| `color-mix` | `color-mix()` Function | [example](https://preset-env.cssdb.org/features/#color-mix) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function#readme) |
 | `custom-media-queries` | Custom Media Queries | [example](https://preset-env.cssdb.org/features/#custom-media-queries) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media#readme) |
 | `custom-properties` | Custom Properties | [example](https://preset-env.cssdb.org/features/#custom-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#readme) |
 | `custom-selectors` | Custom Selectors | [example](https://preset-env.cssdb.org/features/#custom-selectors) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors#readme) |
@@ -25,6 +26,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) |
 | `font-variant-property` | `font-variant` Property | [example](https://preset-env.cssdb.org/features/#font-variant-property) | [docs](https://github.com/postcss/postcss-font-variant#readme) |
 | `gap-properties` | Gap Properties | [example](https://preset-env.cssdb.org/features/#gap-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme) |
+| `gradients-interpolation-method` | Gradients Interpolation Method | [example](https://preset-env.cssdb.org/features/#gradients-interpolation-method) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme) |
 | `has-pseudo-class` | `:has()` Relational Pseudo-Class | [example](https://preset-env.cssdb.org/features/#has-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo#readme) |
 | `hexadecimal-alpha-notation` | Hexadecimal Alpha Notation | [example](https://preset-env.cssdb.org/features/#hexadecimal-alpha-notation) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha#readme) |
 | `hwb-function` | `hwb()` Function | [example](https://preset-env.cssdb.org/features/#hwb-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function#readme) |

plugin-packs/postcss-preset-env/FEATURES.md

@@ -20,6 +20,7 @@ import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within';
 import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords';
 import type { pluginOptions as postcssFontVariant } from '../types/postcss-font-variant/plugin-options';
 import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties';
+import type { pluginOptions as postcssGradientsInterpolationMethod } from '@csstools/postcss-gradients-interpolation-method';
 import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo';
 import type { pluginOptions as postcssColorHexAlpha } from 'postcss-color-hex-alpha';
 import type { pluginOptions as postcssHWBFunction } from '@csstools/postcss-hwb-function';
@@ -93,6 +94,8 @@ export type pluginsOptions = {
     'font-variant-property'?: postcssFontVariant | boolean;
     /** plugin options for "postcss-gap-properties" */
     'gap-properties'?: postcssGapProperties | boolean;
+    /** plugin options for "@csstools/postcss-gradients-interpolation-method" */
+    'gradients-interpolation-method'?: postcssGradientsInterpolationMethod | boolean;
     /** plugin options for "css-has-pseudo" */
     'has-pseudo-class'?: postcssHasPseudo | boolean;
     /** plugin options for "postcss-color-hex-alpha" */

plugin-packs/postcss-preset-env/dist/index.cjs

@@ -47,6 +47,7 @@
 		"@csstools/postcss-color-function": "^2.1.0",
 		"@csstools/postcss-color-mix-function": "^1.0.0",
 		"@csstools/postcss-font-format-keywords": "^2.0.2",
+		"@csstools/postcss-gradients-interpolation-method": "^3.0.0",
 		"@csstools/postcss-hwb-function": "^2.2.0",
 		"@csstools/postcss-ic-unit": "^2.0.2",
 		"@csstools/postcss-is-pseudo-class": "^3.1.1",
@@ -68,7 +69,7 @@
 		"css-blank-pseudo": "^5.0.2",
 		"css-has-pseudo": "^5.0.2",
 		"css-prefers-color-scheme": "^8.0.2",
-		"cssdb": "^7.5.1",
+		"cssdb": "^7.5.2",
 		"postcss-attribute-case-insensitive": "^6.0.2",
 		"postcss-clamp": "^4.1.0",
 		"postcss-color-functional-notation": "^5.0.2",

plugin-packs/postcss-preset-env/dist/index.mjs

@@ -99,6 +99,11 @@
 		"id": "gap-properties",
 		"importName": "postcssGapProperties"
 	},
+	{
+		"packageName": "@csstools/postcss-gradients-interpolation-method",
+		"id": "gradients-interpolation-method",
+		"importName": "postcssGradientsInterpolationMethod"
+	},
 	{
 		"packageName": "@csstools/postcss-hwb-function",
 		"id": "hwb-function",

plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts

@@ -17,6 +17,7 @@ export default [
 	'logical-properties-and-values', // run logical-properties-and-values before dir-pseudo-class
 	'dir-pseudo-class',
 	'all-property', // run all-property before other property polyfills
+	'gradients-interpolation-method', // run before all color functions
 	'color-mix', // run before any other color functions
 	'color-functional-notation',
 	'double-position-gradients',

plugin-packs/postcss-preset-env/package.json

@@ -20,6 +20,7 @@ import postcssFocusWithin from 'postcss-focus-within';
 import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords';
 import postcssFontVariant from 'postcss-font-variant';
 import postcssGapProperties from 'postcss-gap-properties';
+import postcssGradientsInterpolationMethod from '@csstools/postcss-gradients-interpolation-method';
 import postcssHasPseudo from 'css-has-pseudo';
 import postcssColorHexAlpha from 'postcss-color-hex-alpha';
 import postcssHWBFunction from '@csstools/postcss-hwb-function';
@@ -74,6 +75,7 @@ export const pluginsById = new Map(
 		['font-format-keywords', postcssFontFormatKeywords],
 		['font-variant-property', postcssFontVariant],
 		['gap-properties', postcssGapProperties],
+		['gradients-interpolation-method', postcssGradientsInterpolationMethod],
 		['has-pseudo-class', postcssHasPseudo],
 		['hexadecimal-alpha-notation', postcssColorHexAlpha],
 		['hwb-function', postcssHWBFunction],

plugin-packs/postcss-preset-env/scripts/plugins-data.json

@@ -99,6 +99,11 @@ export default [
 		'id': 'gap-properties',
 		'importName': 'postcssGapProperties',
 	},
+	{
+		'packageName': '@csstools/postcss-gradients-interpolation-method',
+		'id': 'gradients-interpolation-method',
+		'importName': 'postcssGradientsInterpolationMethod',
+	},
 	{
 		'packageName': '@csstools/postcss-hwb-function',
 		'id': 'hwb-function',

plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs

@@ -20,6 +20,7 @@ import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within';
 import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords';
 import type { pluginOptions as postcssFontVariant } from '../types/postcss-font-variant/plugin-options';
 import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties';
+import type { pluginOptions as postcssGradientsInterpolationMethod } from '@csstools/postcss-gradients-interpolation-method';
 import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo';
 import type { pluginOptions as postcssColorHexAlpha } from 'postcss-color-hex-alpha';
 import type { pluginOptions as postcssHWBFunction } from '@csstools/postcss-hwb-function';
@@ -94,6 +95,8 @@ export type pluginsOptions = {
 	'font-variant-property'?: postcssFontVariant | boolean
 	/** plugin options for "postcss-gap-properties" */
 	'gap-properties'?: postcssGapProperties | boolean
+	/** plugin options for "@csstools/postcss-gradients-interpolation-method" */
+	'gradients-interpolation-method'?: postcssGradientsInterpolationMethod | boolean
 	/** plugin options for "css-has-pseudo" */
 	'has-pseudo-class'?: postcssHasPseudo | boolean
 	/** plugin options for "postcss-color-hex-alpha" */

plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs

@@ -576,3 +576,19 @@
 	color-5: color(display-p3 0.56492 0 0.48893 / 0.65);
 	color-6: rgba(179, 0, 255, 0.65);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+}
+}

plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs

@@ -576,3 +576,19 @@
 	color-5: color(display-p3 0.56492 0 0.48893 / 0.65);
 	color-6: rgba(179, 0, 255, 0.65);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+}
+}

plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts

@@ -486,3 +486,19 @@
 	color-5: color(display-p3 0.56492 0 0.48893 / 0.65);
 	color-6: rgba(179, 0, 255, 0.65);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+}
+}

plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css

@@ -482,3 +482,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-5: color(display-p3 0.56492 0 0.48893 / 0.65);
 	color-6: rgba(179, 0, 255, 0.65);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+}
+}

plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css

@@ -476,3 +476,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-5: color(display-p3 0.56492 0 0.48893 / 0.65);
 	color-6: rgba(179, 0, 255, 0.65);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
+}
+}

plugin-packs/postcss-preset-env/test/basic.ch38.expect.css

@@ -476,3 +476,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-5: color(display-p3 0.56492 0 0.48893 / 0.65);
 	color-6: rgba(179, 0, 255, 0.65);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
+}
+}

plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css

@@ -447,3 +447,7 @@
 	color-5: color-mix(in lch, rgb(255 0 0 / 0), blue 65%);
 	color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
+}

plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css

@@ -596,3 +596,19 @@
 	color-5: color(display-p3 0.56492 0 0.48893 / 0.65);
 	color-6: rgba(179, 0, 255, 0.65);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+}
+}

plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css

@@ -487,3 +487,19 @@
 	color-5: color(display-p3 0.56492 0 0.48893 / 0.65);
 	color-6: rgba(179, 0, 255, 0.65);
 }
+
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+.gradients-interpolation-method {
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+}
+}