diff --git a/plugins/postcss-color-function/dist/index.cjs b/plugins/postcss-color-function/dist/index.cjs index 9a6d5d023..1e0a2af95 100644 --- a/plugins/postcss-color-function/dist/index.cjs +++ b/plugins/postcss-color-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),o=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),o=s.index(e);for(let e=0;e({postcssPlugin:"postcss-color-function",Declaration:c=>{if(hasFallback(c))return;if(hasSupportsAtRuleAncestor(c))return;const a=c.value;if(!t.test(a.toLowerCase()))return;const i=s.tokenize({css:a}),l=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(i),(e=>{if(o.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),p=o.stringify(l);p!==a&&(c.cloneBefore({value:p}),null!=e&&e.preserve||c.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),o=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),o=s.index(e);for(let e=0;e({postcssPlugin:"postcss-color-function",Declaration:c=>{const a=c.value;if(!t.test(a.toLowerCase()))return;if(hasFallback(c))return;if(hasSupportsAtRuleAncestor(c))return;const i=s.tokenize({css:a}),l=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(i),(e=>{if(o.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),p=o.stringify(l);p!==a&&(c.cloneBefore({value:p}),null!=e&&e.preserve||c.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-color-function/dist/index.mjs b/plugins/postcss-color-function/dist/index.mjs index 25ce5c294..79a76fd12 100644 --- a/plugins/postcss-color-function/dist/index.mjs +++ b/plugins/postcss-color-function/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as r}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as o,serializeRGB as t}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as p,stringify as a}from"@csstools/css-parser-algorithms";function hasFallback(s){const r=s.parent;if(!r)return!1;const e=s.prop.toLowerCase(),o=r.index(s);for(let s=0;s({postcssPlugin:"postcss-color-function",Declaration:u=>{if(hasFallback(u))return;if(hasSupportsAtRuleAncestor(u))return;const f=u.value;if(!i.test(f.toLowerCase()))return;const m=r({css:f}),g=n(c(m),(s=>{if(p(s)&&l.test(s.getName())){const r=e(s);if(!r)return;if(r.syntaxFlags.has(o.HasNoneKeywords))return;return t(r)}})),v=a(g);v!==f&&(u.cloneBefore({value:v}),null!=s&&s.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-function",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as r}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as o,serializeRGB as t}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as p,stringify as a}from"@csstools/css-parser-algorithms";function hasFallback(s){const r=s.parent;if(!r)return!1;const e=s.prop.toLowerCase(),o=r.index(s);for(let s=0;s({postcssPlugin:"postcss-color-function",Declaration:u=>{const f=u.value;if(!i.test(f.toLowerCase()))return;if(hasFallback(u))return;if(hasSupportsAtRuleAncestor(u))return;const m=r({css:f}),g=n(c(m),(s=>{if(p(s)&&l.test(s.getName())){const r=e(s);if(!r)return;if(r.syntaxFlags.has(o.HasNoneKeywords))return;return t(r)}})),v=a(g);v!==f&&(u.cloneBefore({value:v}),null!=s&&s.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-function",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-color-function/src/index.ts b/plugins/postcss-color-function/src/index.ts index 62a0ca1c6..f0b26fa2e 100644 --- a/plugins/postcss-color-function/src/index.ts +++ b/plugins/postcss-color-function/src/index.ts @@ -19,16 +19,16 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return { postcssPlugin: 'postcss-color-function', Declaration: (decl: Declaration) => { - if (hasFallback(decl)) { + const originalValue = decl.value; + if (!(colorFunctionRegex.test(originalValue.toLowerCase()))) { return; } - if (hasSupportsAtRuleAncestor(decl)) { + if (hasFallback(decl)) { return; } - const originalValue = decl.value; - if (!(colorFunctionRegex.test(originalValue.toLowerCase()))) { + if (hasSupportsAtRuleAncestor(decl)) { return; } diff --git a/plugins/postcss-color-mix-function/dist/index.cjs b/plugins/postcss-color-mix-function/dist/index.cjs index c2bf12936..a70d0c9bc 100644 --- a/plugins/postcss-color-mix-function/dist/index.cjs +++ b/plugins/postcss-color-mix-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-color-mix-function",Declaration:a=>{if(hasFallback(a))return;if(hasSupportsAtRuleAncestor(a))return;const i=a.value;if(!o.test(i.toLowerCase()))return;const u=s.tokenize({css:i}),l=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.serializeRGB(s)}})),c=t.stringify(l);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(u)),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),a.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&a.cloneBefore({value:p}),null!=e&&e.preserve||a.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-color-mix-function",Declaration:a=>{const i=a.value;if(!o.test(i.toLowerCase()))return;if(hasFallback(a))return;if(hasSupportsAtRuleAncestor(a))return;const u=s.tokenize({css:i}),l=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.serializeRGB(s)}})),c=t.stringify(l);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(u)),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),a.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&a.cloneBefore({value:p}),null!=e&&e.preserve||a.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-color-mix-function/dist/index.mjs b/plugins/postcss-color-mix-function/dist/index.mjs index d24828960..6213d5e7f 100644 --- a/plugins/postcss-color-mix-function/dist/index.mjs +++ b/plugins/postcss-color-mix-function/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,serializeRGB as o,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as c,stringify as l}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-color-mix-function",Declaration:m=>{if(hasFallback(m))return;if(hasSupportsAtRuleAncestor(m))return;const b=m.value;if(!p.test(b.toLowerCase()))return;const g=e({css:b}),P=a(i(g),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return o(e)}})),d=l(P);if(d===b)return;let v=d;null!=s&&s.subFeatures.displayP3&&(v=l(a(i(r(g)),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return n(e)?o(e):u(e)}})))),m.cloneBefore({value:d}),null!=s&&s.subFeatures.displayP3&&v!==d&&m.cloneBefore({value:v}),null!=s&&s.preserve||m.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,serializeRGB as o,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as c,stringify as l}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-color-mix-function",Declaration:m=>{const b=m.value;if(!p.test(b.toLowerCase()))return;if(hasFallback(m))return;if(hasSupportsAtRuleAncestor(m))return;const g=e({css:b}),P=a(i(g),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return o(e)}})),d=l(P);if(d===b)return;let v=d;null!=s&&s.subFeatures.displayP3&&(v=l(a(i(r(g)),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return n(e)?o(e):u(e)}})))),m.cloneBefore({value:d}),null!=s&&s.subFeatures.displayP3&&v!==d&&m.cloneBefore({value:v}),null!=s&&s.preserve||m.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-color-mix-function/src/index.ts b/plugins/postcss-color-mix-function/src/index.ts index c24560458..3def97e6e 100644 --- a/plugins/postcss-color-mix-function/src/index.ts +++ b/plugins/postcss-color-mix-function/src/index.ts @@ -22,16 +22,16 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return { postcssPlugin: 'postcss-color-mix-function', Declaration: (decl: Declaration) => { - if (hasFallback(decl)) { + const originalValue = decl.value; + if (!(colorMixFunctionRegex.test(originalValue.toLowerCase()))) { return; } - if (hasSupportsAtRuleAncestor(decl)) { + if (hasFallback(decl)) { return; } - const originalValue = decl.value; - if (!(colorMixFunctionRegex.test(originalValue.toLowerCase()))) { + if (hasSupportsAtRuleAncestor(decl)) { return; } diff --git a/plugins/postcss-gradients-interpolation-method/.tape.mjs b/plugins/postcss-gradients-interpolation-method/.tape.mjs index 89dd08f70..6d05cbaff 100644 --- a/plugins/postcss-gradients-interpolation-method/.tape.mjs +++ b/plugins/postcss-gradients-interpolation-method/.tape.mjs @@ -1,26 +1,41 @@ -import { postcssTape } from '@csstools/postcss-tape'; +import { postcssTape, ruleClonerPlugin } from '@csstools/postcss-tape'; import plugin from '@csstools/postcss-gradients-interpolation-method'; postcssTape(plugin)({ basic: { message: "supports basic usage", - warnings: 2, }, 'basic:preserve-false': { message: 'supports { preserve: false } usage', - warnings: 2, options: { preserve: false } }, 'basic:preserve-true:progressive-false': { message: 'supports { preserve: true, enableProgressiveCustomProperties: false } usage', - warnings: 2, options: { preserve: true, enableProgressiveCustomProperties: false, } }, + 'basic:with-cloned-rules': { + message: 'doesn\'t cause duplicate CSS', + plugins: [ + ruleClonerPlugin, + plugin({ + preserve: true + }) + ] + }, + 'variables': { + message: 'supports variables', + }, + 'variables:preserve-false': { + message: 'supports variables with { preserve: false } usage', + options: { + preserve: false + } + }, 'examples/example': { message: 'minimal example', }, diff --git a/plugins/postcss-gradients-interpolation-method/CHANGELOG.md b/plugins/postcss-gradients-interpolation-method/CHANGELOG.md index daa03a7b1..5d1600698 100644 --- a/plugins/postcss-gradients-interpolation-method/CHANGELOG.md +++ b/plugins/postcss-gradients-interpolation-method/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Gradients Interpolation Method +### 3.0.0 Unreleased (major) + +- Handle `color-mix()` internally with `@csstools/css-color-parser` + ### 2.0.1 (January 28, 2023) - Improve `types` declaration in `package.json` diff --git a/plugins/postcss-gradients-interpolation-method/README.md b/plugins/postcss-gradients-interpolation-method/README.md index d9d828dd7..60bbad4ef 100644 --- a/plugins/postcss-gradients-interpolation-method/README.md +++ b/plugins/postcss-gradients-interpolation-method/README.md @@ -1,53 +1,57 @@ # PostCSS Gradients Interpolation Method [][PostCSS] -[][npm-url] [][css-url] [][cli-url] [][discord] +[][npm-url] [][css-url] [][cli-url] [][discord] [PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Specification]. ```pcss -.oklch { - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); +.example { + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } /* becomes */ -.oklch { - background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); -} - -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { -:root { - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); -} +.example { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } ``` -## Warnings +## Shortcomings -⚠️ This plugin assumes you have a separate plugin to transform `color-mix()` to something older browsers can understand. +⚠️ Color stops with only a color or only an interpolation hint are not supported. -⚠️ Color stops with only a color and Interpolation hints are not supported. -We can not statically check if a certain value is a single color or an interpolation hint. +For best results you should always provide at least the color and position for each color stop. +Double position color stops are supported. -These are equivalent in PostCSS : +```pcss +.foo { + /* Only a color: can't transform */ + background-image: linear-gradient(in oklch, black 0%, green, blue 100%); + + /* Only an interpolation hint: can't transform */ + background-image: linear-gradient(in oklch, black 0%, 25%, blue 100%); +} +``` + +⚠️ Variable colors are also not supported. +We can not mix colors when the color is a variable. ```pcss +.foo { --red: red; - /* Color stop variable */ - background-image: linear-gradient(90deg, black, var(--red), blue); - - --perc-10: 10%; - /* Interpolation hint */ - background-image: linear-gradient(90deg, black, var(--perc-10), blue); + /* Color stop variable : can't transform */ + background-image: linear-gradient(in oklch, black 0%, var(--red), blue 100%); +} ``` ## Usage @@ -92,29 +96,24 @@ postcssGradientsInterpolationMethod({ preserve: true }) ``` ```pcss -.oklch { - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); +.example { + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } /* becomes */ -.oklch { - background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); -} - -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { -:root { - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); -} +.example { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } ``` @@ -130,31 +129,31 @@ postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false } ``` ```pcss -.oklch { - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); +.example { + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } /* becomes */ -.oklch { - background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); +.example { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } ``` _Custom properties do not fallback to the previous declaration_ [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test -[css-url]: https://cssdb.org/#TODO +[css-url]: https://cssdb.org/#gradients-interpolation-method [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-gradients-interpolation-method diff --git a/plugins/postcss-gradients-interpolation-method/dist/color-stop-list.d.ts b/plugins/postcss-gradients-interpolation-method/dist/color-stop-list.d.ts index 5b8d541a2..3b88f6955 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/color-stop-list.d.ts +++ b/plugins/postcss-gradients-interpolation-method/dist/color-stop-list.d.ts @@ -1,8 +1,9 @@ -import type { Node } from 'postcss-value-parser'; +import type { ColorData } from '@csstools/css-color-parser'; +import type { ComponentValue } from '@csstools/css-parser-algorithms'; +import { TokenNode } from '@csstools/css-parser-algorithms'; export type ColorStop = { - color: string; - colorStopLength: string; - colorHintBetween: Array; - nodes: Array; + color: ComponentValue; + colorData: ColorData; + position: ComponentValue; }; -export declare function colorStopList(nodes: Array, interpolationArguments: string): Array | false; +export declare function interpolateColorsInColorStopsList(colorStops: Array, colorSpace: TokenNode, hueInterpolationMethod: TokenNode | null): Array | false; diff --git a/plugins/postcss-gradients-interpolation-method/dist/has-fallback-decl.d.ts b/plugins/postcss-gradients-interpolation-method/dist/has-fallback-decl.d.ts new file mode 100644 index 000000000..d7ae8d890 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/dist/has-fallback-decl.d.ts @@ -0,0 +1,2 @@ +import type { Declaration } from 'postcss'; +export declare function hasFallback(node: Declaration): boolean; diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.cjs b/plugins/postcss-gradients-interpolation-method/dist/index.cjs index 77889339d..d0d1ab787 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/index.cjs +++ b/plugins/postcss-gradients-interpolation-method/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("postcss-value-parser");function colorStopList(e,n){const t=[];let r={color:"",colorStopLength:"",colorHintBetween:[],nodes:[]};for(let o=0;o({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(t,{result:r}){if(!includesGradientsFunction(t.value))return;if(hasSupportsAtRuleAncestor(t))return;let s;try{s=o(t.value)}catch(e){t.warn(r,`Failed to parse value '${t.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===s)return;let i=!1;if(s.walk((e=>{if("function"!==e.type||"conic-gradient"!==(t=e.value)&&"linear-gradient"!==t&&"radial-gradient"!==t&&"repeating-conic-gradient"!==t&&"repeating-linear-gradient"!==t&&"repeating-radial-gradient"!==t)return;var t;const r=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)),s={interpolationArguments:[],argumentsRemainder:[],colorStops:[]};for(let e=0;eo.stringify(e))).join(" "),t=colorStopList(r.slice(e),n);if(t){s.colorStops=t;break}n&&(i=!0);break}if("word"===t.type&&"in"===t.value&&r[e+1]){if(s.interpolationArguments.push(r[e+1]),e++,r[e+1]&&"word"===r[e+1].type&&n.includes(r[e+1].value)){s.interpolationArguments.push(r[e+1]),e++;continue}}else s.argumentsRemainder.push(t)}if(!s.interpolationArguments.length||!s.colorStops.length)return;e.nodes=[],s.argumentsRemainder.length&&(e.nodes.push(...s.argumentsRemainder.flatMap((e=>[e,{type:"space",value:" ",sourceIndex:0,sourceEndIndex:0}]))),e.nodes.push({type:"div",value:",",before:"",after:"",sourceIndex:0,sourceEndIndex:0}));const l=s.interpolationArguments.map((e=>o.stringify(e))).join(" ");for(let n=0;n{const n=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return n.enableProgressiveCustomProperties&&n.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(n)]}:basePlugin(n)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer"),n=require("@csstools/css-color-parser");const i=/(repeating-)?(linear|radial|conic)-gradient\(/i,s=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(e){const o=e.parent;if(!o)return!1;const t=e.prop.toLowerCase(),n=o.index(e);for(let e=0;e0&&N.some((e=>!o.isCommentNode(e)&&!o.isWhitespaceNode(e)))&&N.push(new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]])),[...N,...m]}const basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(n){if(!i.test(n.value))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const s=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(t.tokenize({css:n.value})),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e);t&&(e.value=t)})));s!==n.value&&(n.cloneBefore({value:s}),null!=e&&e.preserve||n.remove())}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.d.ts b/plugins/postcss-gradients-interpolation-method/dist/index.d.ts index 0520e9654..9a663261c 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/index.d.ts +++ b/plugins/postcss-gradients-interpolation-method/dist/index.d.ts @@ -1,7 +1,7 @@ import type { PluginCreator } from 'postcss'; /** postcss-gradients-interpolation-method plugin options */ export type pluginOptions = { - /** Preserve the original notation. default: true */ + /** Preserve the original notation. default: false */ preserve?: boolean; /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ enableProgressiveCustomProperties?: boolean; diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.mjs b/plugins/postcss-gradients-interpolation-method/dist/index.mjs index 18103efe0..4996b5262 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/index.mjs +++ b/plugins/postcss-gradients-interpolation-method/dist/index.mjs @@ -1 +1 @@ -import e from"@csstools/postcss-progressive-custom-properties";import o from"postcss-value-parser";function colorStopList(e,n){const t=[];let r={color:"",colorStopLength:"",colorHintBetween:[],nodes:[]};for(let o=0;o({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(t,{result:r}){if(!includesGradientsFunction(t.value))return;if(hasSupportsAtRuleAncestor(t))return;let s;try{s=o(t.value)}catch(e){t.warn(r,`Failed to parse value '${t.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===s)return;let i=!1;if(s.walk((e=>{if("function"!==e.type||"conic-gradient"!==(t=e.value)&&"linear-gradient"!==t&&"radial-gradient"!==t&&"repeating-conic-gradient"!==t&&"repeating-linear-gradient"!==t&&"repeating-radial-gradient"!==t)return;var t;const r=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)),s={interpolationArguments:[],argumentsRemainder:[],colorStops:[]};for(let e=0;eo.stringify(e))).join(" "),t=colorStopList(r.slice(e),n);if(t){s.colorStops=t;break}n&&(i=!0);break}if("word"===t.type&&"in"===t.value&&r[e+1]){if(s.interpolationArguments.push(r[e+1]),e++,r[e+1]&&"word"===r[e+1].type&&n.includes(r[e+1].value)){s.interpolationArguments.push(r[e+1]),e++;continue}}else s.argumentsRemainder.push(t)}if(!s.interpolationArguments.length||!s.colorStops.length)return;e.nodes=[],s.argumentsRemainder.length&&(e.nodes.push(...s.argumentsRemainder.flatMap((e=>[e,{type:"space",value:" ",sourceIndex:0,sourceEndIndex:0}]))),e.nodes.push({type:"div",value:",",before:"",after:"",sourceIndex:0,sourceEndIndex:0}));const l=s.interpolationArguments.map((e=>o.stringify(e))).join(" ");for(let n=0;n{const n=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return n.enableProgressiveCustomProperties&&n.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(n)]}:basePlugin(n)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import o from"@csstools/postcss-progressive-custom-properties";import{WhitespaceNode as e,TokenNode as t,FunctionNode as r,isCommentNode as n,isWhitespaceNode as s,isTokenNode as i,stringify as l,replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as u}from"@csstools/css-parser-algorithms";import{TokenType as p,tokenize as v}from"@csstools/css-tokenizer";import{serializeP3 as f,color as h,colorDataFitsRGB_Gamut as d,serializeRGB as m}from"@csstools/css-color-parser";const g=/(repeating-)?(linear|radial|conic)-gradient\(/i,w=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(o){const e=o.parent;if(!e)return!1;const t=o.prop.toLowerCase(),r=e.index(o);for(let o=0;o0&&g.some((o=>!n(o)&&!s(o)))&&g.push(new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]])),[...g,...m]}const basePlugin=o=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(e){if(!g.test(e.value))return;if(hasFallback(e))return;if(hasSupportsAtRuleAncestor(e))return;const t=l(a(c(v({css:e.value})),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o);e&&(o.value=e)})));t!==e.value&&(e.cloneBefore({value:t}),null!=o&&o.preserve||e.remove())}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[o(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-gradients-interpolation-method/dist/is-gradient.d.ts b/plugins/postcss-gradients-interpolation-method/dist/is-gradient.d.ts index afa8e661e..2d83e89ed 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/is-gradient.d.ts +++ b/plugins/postcss-gradients-interpolation-method/dist/is-gradient.d.ts @@ -1,2 +1,2 @@ -export declare function includesGradientsFunction(str: string): boolean; -export declare function isGradientsFunctions(str: string): boolean; +export declare const gradientFunctionRegex: RegExp; +export declare const gradientNameRegex: RegExp; diff --git a/plugins/postcss-gradients-interpolation-method/dist/modify-gradient-component-values.d.ts b/plugins/postcss-gradients-interpolation-method/dist/modify-gradient-component-values.d.ts new file mode 100644 index 000000000..94ce2d34e --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/dist/modify-gradient-component-values.d.ts @@ -0,0 +1,2 @@ +import type { ComponentValue, FunctionNode } from '@csstools/css-parser-algorithms'; +export declare function modifyGradientFunctionComponentValues(gradientFunction: FunctionNode): Array | false; diff --git a/plugins/postcss-gradients-interpolation-method/dist/parse-color-stops.d.ts b/plugins/postcss-gradients-interpolation-method/dist/parse-color-stops.d.ts new file mode 100644 index 000000000..0342da5c6 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/dist/parse-color-stops.d.ts @@ -0,0 +1,3 @@ +import type { ColorStop } from './color-stop-list'; +import type { ComponentValue } from '@csstools/css-parser-algorithms'; +export declare function parseColorStops(componentValues: Array): Array | false; diff --git a/plugins/postcss-gradients-interpolation-method/docs/README.md b/plugins/postcss-gradients-interpolation-method/docs/README.md index 8928eecef..58f9086a8 100644 --- a/plugins/postcss-gradients-interpolation-method/docs/README.md +++ b/plugins/postcss-gradients-interpolation-method/docs/README.md @@ -26,23 +26,32 @@ ``` -## Warnings +## Shortcomings -⚠️ This plugin assumes you have a separate plugin to transform `color-mix()` to something older browsers can understand. +⚠️ Color stops with only a color or only an interpolation hint are not supported. -⚠️ Color stops with only a color and Interpolation hints are not supported. -We can not statically check if a certain value is a single color or an interpolation hint. +For best results you should always provide at least the color and position for each color stop. +Double position color stops are supported. -These are equivalent in PostCSS : +```pcss +.foo { + /* Only a color: can't transform */ + background-image: linear-gradient(in oklch, black 0%, green, blue 100%); + + /* Only an interpolation hint: can't transform */ + background-image: linear-gradient(in oklch, black 0%, 25%, blue 100%); +} +``` + +⚠️ Variable colors are also not supported. +We can not mix colors when the color is a variable. ```pcss +.foo { --red: red; - /* Color stop variable */ - background-image: linear-gradient(90deg, black, var(--red), blue); - - --perc-10: 10%; - /* Interpolation hint */ - background-image: linear-gradient(90deg, black, var(--perc-10), blue); + /* Color stop variable : can't transform */ + background-image: linear-gradient(in oklch, black 0%, var(--red), blue 100%); +} ``` diff --git a/plugins/postcss-gradients-interpolation-method/package.json b/plugins/postcss-gradients-interpolation-method/package.json index 14d206483..d17b6c558 100644 --- a/plugins/postcss-gradients-interpolation-method/package.json +++ b/plugins/postcss-gradients-interpolation-method/package.json @@ -29,8 +29,10 @@ "dist" ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^0.0.0", + "@csstools/css-parser-algorithms": "^2.0.1", + "@csstools/css-tokenizer": "^2.1.0", + "@csstools/postcss-progressive-custom-properties": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" @@ -67,7 +69,7 @@ "syntax" ], "csstools": { - "cssdbId": "TODO", + "cssdbId": "gradients-interpolation-method", "exportName": "postcssGradientsInterpolationMethod", "humanReadableName": "PostCSS Gradients Interpolation Method", "specUrl": "https://drafts.csswg.org/css-images-4/#linear-gradients" diff --git a/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts b/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts index a0064b59f..d5b366245 100644 --- a/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts +++ b/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts @@ -1,94 +1,115 @@ -import type { Node } from 'postcss-value-parser'; -import valueParser from 'postcss-value-parser'; +import type { ColorData } from '@csstools/css-color-parser'; +import type { ComponentValue } from '@csstools/css-parser-algorithms'; +import { FunctionNode, TokenNode, WhitespaceNode } from '@csstools/css-parser-algorithms'; +import { TokenType } from '@csstools/css-tokenizer'; +import { color, colorDataFitsRGB_Gamut, serializeP3, serializeRGB } from '@csstools/css-color-parser'; export type ColorStop = { - color: string; - colorStopLength: string; - colorHintBetween: Array; - nodes: Array; + color: ComponentValue, + colorData: ColorData, + position: ComponentValue, } -export function colorStopList(nodes: Array, interpolationArguments: string) : Array | false { - const stops: Array = []; - let currentStop: ColorStop = { - color: '', - colorStopLength: '', - colorHintBetween: [], - nodes: [], - }; +export function interpolateColorsInColorStopsList(colorStops: Array, colorSpace: TokenNode, hueInterpolationMethod: TokenNode | null): Array | false { + const result: Array = []; + const interpolatedColorStops: Array<{ + color?: ComponentValue, + colorData: ColorData, + position?: ComponentValue, + }> = []; - for (let i = 0; i < nodes.length; i++) { - const node = nodes[i]; - if (node.type === 'div' && node.value === ',') { - stops.push(currentStop); - currentStop = { - color: '', - colorStopLength: '', - colorHintBetween: [], - nodes: [], - }; + for (let i = 0; i < (colorStops.length - 1); i++) { + const colorStop = colorStops[i]; + const nextColorStop = colorStops[i + 1]; - continue; - } - - currentStop.nodes.push(node); - } + interpolatedColorStops.push(colorStop); - stops.push(currentStop); + if ( + serializeP3(colorStop.colorData).toString() !== serializeP3(nextColorStop.colorData).toString() && + colorStop.position.toString() !== nextColorStop.position.toString() + ) { + for (let j = 1; j <= 9; j++) { + const multiplier = j * 10; - // Assign values and handle double position gradients. - const formattedStops : Array = []; - for (let i = 0; i < stops.length; i++) { - const stop = stops[i]; + let hueParts: Array = []; + if (hueInterpolationMethod) { + hueParts = [ + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + hueInterpolationMethod, + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + new TokenNode([TokenType.Ident, 'hue', -1, -1, { value: 'hue' }]), + ]; + } - switch (stop.nodes.length) { - case 0: - break; - case 1: - return false; - case 2: - stop.color = valueParser.stringify(stop.nodes[0]); - stop.colorStopLength = valueParser.stringify(stop.nodes[1]); - formattedStops.push(stop); - break; - case 3: - formattedStops.push({ - color: valueParser.stringify(stop.nodes[0]), - colorStopLength: valueParser.stringify(stop.nodes[1]), - colorHintBetween: [], - nodes: [ - stop.nodes[0], - stop.nodes[1], + const colorMix = new FunctionNode( + [TokenType.Function, 'color-mix(', -1, -1, { value: 'color-mix' }], + [TokenType.CloseParen, ')', -1, -1, undefined], + [ + new TokenNode([TokenType.Ident, 'in', -1, -1, { value: 'in' }]), + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + colorSpace, + ...hueParts, + new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + colorStop.color, + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + new TokenNode([TokenType.Percentage, `${100 - multiplier}%`, -1, -1, { value: 100 - multiplier }]), + new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + nextColorStop.color, + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + new TokenNode([TokenType.Percentage, `${multiplier}%`, -1, -1, { value: multiplier }]), ], - }); + ); - formattedStops.push({ - color: valueParser.stringify(stop.nodes[0]), - colorStopLength: valueParser.stringify(stop.nodes[2]), - colorHintBetween: [], - nodes: [ - stop.nodes[0], - stop.nodes[2], - ], + const mixedColor = color(colorMix); + if (!mixedColor) { + return false; + } + + interpolatedColorStops.push({ + colorData: mixedColor, }); + } + } - break; + if (i === (colorStops.length - 2)) { + interpolatedColorStops.push(nextColorStop); + } + } - default: - break; + for (let i = 0; i < interpolatedColorStops.length; i++) { + if (colorDataFitsRGB_Gamut(interpolatedColorStops[i].colorData)) { + interpolatedColorStops[i].color = serializeRGB(interpolatedColorStops[i].colorData); + } else { + interpolatedColorStops[i].color = serializeP3(interpolatedColorStops[i].colorData); } } - for (let i = 0; i < formattedStops.length; i++) { - const stop = formattedStops[i]; - if (!stop.color) { - stop.color = `color-mix(in ${interpolationArguments}, ${formattedStops[i - 1].color} 50%, ${formattedStops[i + 1].color} 50%)`; - stop.colorHintBetween = [ - formattedStops[i - 1], - formattedStops[i + 1], - ]; + for (let i = 0; i < interpolatedColorStops.length; i++) { + const colorStop = interpolatedColorStops[i]; + if (colorStop.position) { + result.push( + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + colorStop.color!, + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + colorStop.position, + + ); + } else { + result.push( + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + colorStop.color!, + ); + } + + if (i !== (interpolatedColorStops.length - 1)) { + result.push( + new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + ); } } - return formattedStops; + return result; } diff --git a/plugins/postcss-gradients-interpolation-method/src/has-fallback-decl.ts b/plugins/postcss-gradients-interpolation-method/src/has-fallback-decl.ts new file mode 100644 index 000000000..5fc4da9e0 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/src/has-fallback-decl.ts @@ -0,0 +1,20 @@ +import type { Declaration } from 'postcss'; + +export function hasFallback(node: Declaration): boolean { + const parent = node.parent; + if (!parent) { + return false; + } + + const nodeProp = node.prop.toLowerCase(); + + const currentNodeIndex = parent.index(node); + for (let i = 0; i < currentNodeIndex; i++) { + const precedingSibling = parent.nodes[i]; + if (precedingSibling.type === 'decl' && precedingSibling.prop.toLowerCase() === nodeProp) { + return true; + } + } + + return false; +} diff --git a/plugins/postcss-gradients-interpolation-method/src/has-supports-at-rule-ancestor.ts b/plugins/postcss-gradients-interpolation-method/src/has-supports-at-rule-ancestor.ts index 36b3bad8d..7f4a90edf 100644 --- a/plugins/postcss-gradients-interpolation-method/src/has-supports-at-rule-ancestor.ts +++ b/plugins/postcss-gradients-interpolation-method/src/has-supports-at-rule-ancestor.ts @@ -1,4 +1,4 @@ -import { includesGradientsFunction } from './is-gradient'; +import { gradientFunctionRegex } from './is-gradient'; import type { AtRule, Node } from 'postcss'; export function hasSupportsAtRuleAncestor(node: Node): boolean { @@ -9,7 +9,7 @@ export function hasSupportsAtRuleAncestor(node: Node): boolean { continue; } - if ((parent as AtRule).name === 'supports' && includesGradientsFunction((parent as AtRule).params)) { + if ((parent as AtRule).name === 'supports' && gradientFunctionRegex.test((parent as AtRule).params)) { return true; } diff --git a/plugins/postcss-gradients-interpolation-method/src/index.ts b/plugins/postcss-gradients-interpolation-method/src/index.ts index a68bbadd1..a9bb0598e 100644 --- a/plugins/postcss-gradients-interpolation-method/src/index.ts +++ b/plugins/postcss-gradients-interpolation-method/src/index.ts @@ -1,227 +1,57 @@ import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; import type { PluginCreator } from 'postcss'; -import type { Node } from 'postcss-value-parser'; -import valueParser from 'postcss-value-parser'; -import { ColorStop, colorStopList } from './color-stop-list'; +import { gradientFunctionRegex } from './is-gradient'; +import { hasFallback } from './has-fallback-decl'; import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; -import { includesGradientsFunction, isGradientsFunctions } from './is-gradient'; +import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; +import { modifyGradientFunctionComponentValues } from './modify-gradient-component-values'; +import { tokenize } from '@csstools/css-tokenizer'; -const interpolationMethods = [ - 'shorter', - 'longer', - 'increasing', - 'decreasing', - 'specified', -]; +type basePluginOptions = { + preserve: boolean, +}; -/** - * Transform double-position gradients in CSS. - * @param {{preserve?: boolean}} opts - * @returns {import('postcss').Plugin} - */ -const basePlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve?: boolean }) => { +/* Transform gradients with interpolation methods in CSS. */ +const basePlugin: PluginCreator = (opts?: basePluginOptions) => { return { postcssPlugin: 'postcss-gradients-interpolation-method', - Declaration(decl, { result }) { - if (!includesGradientsFunction(decl.value)) { + Declaration(decl) { + if (!gradientFunctionRegex.test(decl.value)) { return; } - if (hasSupportsAtRuleAncestor(decl)) { + if (hasFallback(decl)) { return; } - let valueAST; - - try { - valueAST = valueParser(decl.value); - } catch (error) { - decl.warn( - result, - `Failed to parse value '${decl.value}' as a CSS gradient. Leaving the original value intact.`, - ); - } - - if (typeof valueAST === 'undefined') { - // Bail if there's an error + if (hasSupportsAtRuleAncestor(decl)) { return; } - let hasUnparseableGradients = false; - - valueAST.walk(func => { - if (func.type !== 'function' || !isGradientsFunctions(func.value)) { - return; - } - - // Discarding comments and spaces - const nodes = func.nodes.filter((x) => { - return x.type !== 'comment' && x.type !== 'space'; - }); - - // Build gradient data model. - const gradient: { - interpolationArguments: Array, - colorStops: Array, - argumentsRemainder: Array, - } = { - interpolationArguments: [], - argumentsRemainder: [], - colorStops: [], - }; - - for (let i = 0; i < nodes.length; i++) { - const node = nodes[i]; - if (node.type === 'div' && node.value === ',') { - const interpolationArguments = gradient.interpolationArguments.map((x) => { - return valueParser.stringify(x); - }).join(' '); - - const colorStops = colorStopList(nodes.slice(i), interpolationArguments); - if (colorStops) { - gradient.colorStops = colorStops; - break; - } - - if (interpolationArguments) { - // If there are no interpolation arguments we do not emit warnings. - hasUnparseableGradients = true; - } - break; + const modified = stringify(replaceComponentValues( + parseCommaSeparatedListOfComponentValues(tokenize({ css: decl.value })), + (componentValue) => { + if (!isFunctionNode(componentValue)) { + return; } - if (node.type === 'word' && node.value === 'in' && nodes[i + 1]) { - gradient.interpolationArguments.push(nodes[i + 1]); - i++; - - if (nodes[i + 1] && nodes[i + 1].type === 'word' && interpolationMethods.includes(nodes[i + 1].value)) { - gradient.interpolationArguments.push(nodes[i + 1]); - i++; - continue; - } - - continue; + const modifiedComponentValues = modifyGradientFunctionComponentValues(componentValue); + if (modifiedComponentValues) { + componentValue.value = modifiedComponentValues; } + }, + )); - gradient.argumentsRemainder.push(node); - } - - // No color stops or interpolation arguments found. - if (!gradient.interpolationArguments.length || !gradient.colorStops.length) { - return; - } - - // Rebuild the entire function. - func.nodes = []; - - if (gradient.argumentsRemainder.length) { - func.nodes.push( - ...gradient.argumentsRemainder.flatMap((x): Array => { - return [x, { type: 'space', value: ' ', sourceIndex: 0, sourceEndIndex: 0 }]; - }), - ); - - func.nodes.push({ - type: 'div', - value: ',', - before: '', - after: '', - sourceIndex: 0, - sourceEndIndex: 0, - }); - } - - const interpolationArguments = gradient.interpolationArguments.map((x) => { - return valueParser.stringify(x); - }).join(' '); - - for (let i = 0; i < (gradient.colorStops.length); i++) { - const start = gradient.colorStops[i]; - const end = gradient.colorStops[i + 1]; - - // Last color stop. - if (!end) { - func.nodes.push( - ...valueParser(`${start.color} ${start.colorStopLength}`).nodes, - ); - - continue; - } - - // Two equal colors. - if (start.color === end.color) { - func.nodes.push( - ...valueParser(`${start.color} ${start.colorStopLength}`).nodes, - { - type: 'div', - value: ',', - before: '', - after: '', - sourceIndex: 0, - sourceEndIndex: 0, - }, - ); - - continue; - } - - // Interpolate between colors. - for (let j = 0; j < 10; j++) { - if (j === 0) { - func.nodes.push( - ...valueParser(`${start.color} ${start.colorStopLength}`).nodes, - { - type: 'div', - value: ',', - before: '', - after: '', - sourceIndex: 0, - sourceEndIndex: 0, - }, - ); - - continue; - } - - const color = `color-mix(in ${interpolationArguments}, ${start.color} ${100 - (j * 10)}%, ${end.color} ${(j * 10)}%)`; - const position = `calc(${start.colorStopLength} + ((${end.colorStopLength} - ${start.colorStopLength}) * ${j / 10}))`; - - func.nodes.push( - ...valueParser(`${color} ${position}`).nodes, - { - type: 'div', - value: ',', - before: '', - after: '', - sourceIndex: 0, - sourceEndIndex: 0, - }, - ); - } - } - }); - - if (hasUnparseableGradients) { - decl.warn( - result, - `Failed to parse value '${decl.value}' as a CSS gradient with interpolation. Leaving the original value intact.`, - ); - + if (modified === decl.value) { return; } - const modifiedValue = valueParser.stringify(valueAST.nodes); - if (modifiedValue === decl.value) { - return; - } + decl.cloneBefore({ + value: modified, + }); - if (opts?.preserve) { - decl.cloneBefore({ - prop: decl.prop, - value: modifiedValue, - }); - } else { - decl.value = modifiedValue; + if (!opts?.preserve) { + decl.remove(); } }, }; @@ -231,13 +61,13 @@ basePlugin.postcss = true; /** postcss-gradients-interpolation-method plugin options */ export type pluginOptions = { - /** Preserve the original notation. default: true */ + /** Preserve the original notation. default: false */ preserve?: boolean, /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ enableProgressiveCustomProperties?: boolean, }; -// Transform gradient interpolation methods. +/* Transform gradients with interpolation methods in CSS. */ const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign({ enableProgressiveCustomProperties: true, diff --git a/plugins/postcss-gradients-interpolation-method/src/is-gradient.ts b/plugins/postcss-gradients-interpolation-method/src/is-gradient.ts index 1cbfb708a..587f8847b 100644 --- a/plugins/postcss-gradients-interpolation-method/src/is-gradient.ts +++ b/plugins/postcss-gradients-interpolation-method/src/is-gradient.ts @@ -1,23 +1,2 @@ -export function includesGradientsFunction(str: string): boolean { - return ( - str.includes('in ') && ( - str.includes('conic-gradient(') || - str.includes('linear-gradient(') || - str.includes('radial-gradient(') || - str.includes('repeating-conic-gradient(') || - str.includes('repeating-linear-gradient(') || - str.includes('repeating-radial-gradient(') - ) - ); -} - -export function isGradientsFunctions(str: string): boolean { - return ( - str ==='conic-gradient' || - str ==='linear-gradient' || - str ==='radial-gradient' || - str ==='repeating-conic-gradient' || - str ==='repeating-linear-gradient' || - str ==='repeating-radial-gradient' - ); -} +export const gradientFunctionRegex = /(repeating-)?(linear|radial|conic)-gradient\(/i; +export const gradientNameRegex = /^(repeating-)?(linear|radial|conic)-gradient$/i; diff --git a/plugins/postcss-gradients-interpolation-method/src/modify-gradient-component-values.ts b/plugins/postcss-gradients-interpolation-method/src/modify-gradient-component-values.ts new file mode 100644 index 000000000..e3e5ead3e --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/src/modify-gradient-component-values.ts @@ -0,0 +1,160 @@ +import type { ComponentValue, FunctionNode } from '@csstools/css-parser-algorithms'; +import { gradientNameRegex } from './is-gradient'; +import { interpolateColorsInColorStopsList } from './color-stop-list'; +import { isCommentNode, isTokenNode, isWhitespaceNode, TokenNode, WhitespaceNode } from '@csstools/css-parser-algorithms'; +import { parseColorStops } from './parse-color-stops'; +import { TokenType } from '@csstools/css-tokenizer'; + +const colorSpaceRegex = /^(srgb|srgb-linear|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch)$/i; +const polarColorSpaceRegex = /^(hsl|hwb|lch|oklch)$/i; +const hueInterpolationMethodRegex = /^(shorter|longer|increasing|decreasing)$/i; +const inKeywordRegex = /^in$/i; +const hueKeywordRegex = /^hue$/i; + +export function modifyGradientFunctionComponentValues(gradientFunction: FunctionNode): Array | false { + const functionName = gradientFunction.getName(); + if (!gradientNameRegex.test(functionName)) { + return false; + } + + let colorSpaceName = 'srgb'; + + let inKeyword: TokenNode | null = null; + let colorSpace: TokenNode | null = null; + let hueInterpolationMethod: TokenNode | null = null; + let hueKeyword: TokenNode | null = null; + let firstComma: TokenNode | null = null; + + let remainder: Array = []; + + { + let i = 0; + let node = gradientFunction.value[i]; + + { + // Advance to "in" keyword + while (!(isTokenNode(node) && node.value[0] === TokenType.Ident && inKeywordRegex.test(node.value[4].value))) { + if (isTokenNode(node) && node.value[0] === TokenType.Comma) { + // comma before "in" keyword + return false; + } + + i++; + node = gradientFunction.value[i]; + } + + inKeyword = node; + i++; + node = gradientFunction.value[i]; + } + + while (isCommentNode(node) || isWhitespaceNode(node)) { + i++; + node = gradientFunction.value[i]; + } + + // color space + if ( + isTokenNode(node) && + node.value[0] === TokenType.Ident && + colorSpaceRegex.test(node.value[4].value) + ) { + if (colorSpace) { + return false; + } + + colorSpace = node; + colorSpaceName = node.value[4].value; + + i++; + node = gradientFunction.value[i]; + } + + while (isCommentNode(node) || isWhitespaceNode(node)) { + i++; + node = gradientFunction.value[i]; + } + + // hue interpolation method + if ( + isTokenNode(node) && + node.value[0] === TokenType.Ident && + hueInterpolationMethodRegex.test(node.value[4].value) && + polarColorSpaceRegex.test(colorSpaceName) + ) { + if (hueInterpolationMethod || !colorSpace) { + return false; + } + + hueInterpolationMethod = node; + + i++; + node = gradientFunction.value[i]; + } + + while (isCommentNode(node) || isWhitespaceNode(node)) { + i++; + node = gradientFunction.value[i]; + } + + // "hue" keyword + if ( + isTokenNode(node) && + node.value[0] === TokenType.Ident && + hueKeywordRegex.test(node.value[4].value) + ) { + if (hueKeyword || !colorSpace || !hueInterpolationMethod) { + return false; + } + + hueKeyword = node; + + i++; + node = gradientFunction.value[i]; + } + + // Find first comma + while (!isTokenNode(node) || node.value[0] !== TokenType.Comma) { + i++; + node = gradientFunction.value[i]; + } + + firstComma = node; + remainder = gradientFunction.value.slice(i + 1); + } + + if (!colorSpace) { + return false; + } else if (hueInterpolationMethod && !hueKeyword) { + return false; + } else if (hueKeyword && !hueInterpolationMethod) { + return false; + } + + const colorStops = parseColorStops(remainder); + if (!colorStops) { + return false; + } + + const modifiedColorStops = interpolateColorsInColorStopsList(colorStops, colorSpace, hueInterpolationMethod); + if (!modifiedColorStops) { + return false; + } + + const beforeColorStops = [ + ...gradientFunction.value.slice(0, gradientFunction.value.indexOf(inKeyword)), + ...gradientFunction.value.slice(gradientFunction.value.indexOf(hueKeyword || colorSpace) + 1, gradientFunction.value.indexOf(firstComma)), + ]; + const hasMeaningfulPrefix = beforeColorStops.length > 0 && beforeColorStops.some((node) => !isCommentNode(node) && !isWhitespaceNode(node)); + if (hasMeaningfulPrefix) { + beforeColorStops.push( + new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + ); + } + + return [ + ...beforeColorStops, + ...modifiedColorStops, + ]; +} diff --git a/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts b/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts new file mode 100644 index 000000000..9039aa401 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts @@ -0,0 +1,80 @@ +import type { ColorStop } from './color-stop-list'; +import type { ComponentValue } from '@csstools/css-parser-algorithms'; +import { TokenType } from '@csstools/css-tokenizer'; +import { color, ColorData } from '@csstools/css-color-parser'; +import { isCommentNode } from '@csstools/css-parser-algorithms'; +import { isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms'; + +export function parseColorStops(componentValues: Array): Array | false { + const colorStops: Array = []; + + let currentColorStop: { + color?: ComponentValue, + colorData?: ColorData, + positionA?: ComponentValue, + positionB?: ComponentValue, + } = {}; + + for (let i = 0; i < componentValues.length; i++) { + const node = componentValues[i]; + if (isCommentNode(node) || isWhitespaceNode(node)) { + continue; + } + + if (isTokenNode(node) && node.value[0] === TokenType.Comma) { + if (currentColorStop.color && currentColorStop.colorData && currentColorStop.positionA) { + colorStops.push({ color: currentColorStop.color, colorData: currentColorStop.colorData, position: currentColorStop.positionA }); + + if (currentColorStop.positionB) { + colorStops.push({ color: currentColorStop.color, colorData: currentColorStop.colorData, position: currentColorStop.positionB }); + } + + currentColorStop = {}; + continue; + } + + return false; + } + + const colorData = color(node); + if (colorData && currentColorStop.color) { + return false; + } + + if (colorData) { + currentColorStop.color = node; + currentColorStop.colorData = colorData; + continue; + } + + if (!currentColorStop.positionA) { + currentColorStop.positionA = node; + continue; + } + + if (currentColorStop.positionA && !currentColorStop.positionB) { + currentColorStop.positionB = node; + continue; + } + + return false; + } + + if (!currentColorStop.color || !currentColorStop.positionA) { + return false; + } + + if (currentColorStop.color && currentColorStop.colorData && currentColorStop.positionA) { + colorStops.push({ color: currentColorStop.color, colorData: currentColorStop.colorData, position: currentColorStop.positionA }); + + if (currentColorStop.positionB) { + colorStops.push({ color: currentColorStop.color, colorData: currentColorStop.colorData, position: currentColorStop.positionB }); + } + } + + if (colorStops.length < 2) { + return false; + } + + return colorStops; +} diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.css b/plugins/postcss-gradients-interpolation-method/test/basic.css index 89b791fd5..2f6de8abb 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.css @@ -1,22 +1,283 @@ -.test-linear-gradient { +.test-1 { --perc-50: 50%; background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%); +} - background-image: linear-gradient(in oklch shorter 90deg, black 25% 50%, blue 70% 75%); +.test-2-0 { + background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%); +} +.test-2-1 { + background-image: linear-gradient(in oklab 90deg, red 25% 50%, blue 70% 75%); +} + +.test-2-2 { + background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%); +} + +.test-2-3 { + background-image: linear-gradient(90deg in oklab, red 25% 50%, blue 70% 75%); +} + +.test-3 { --red: red; /* Color stop variable */ background-image: linear-gradient(in oklch 90deg, black, var(--red), blue); +} + +.test-4 { --perc-10: 10%; /* Interpolation hint */ background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); } -:root { - --gradient-prop-1: conic-gradient(in oklch, yellowgreen 0deg, gold 15deg, gold 50deg, #f06 180deg); - --gradient-prop-2: linear-gradient(in oklch 90deg, black 25%, red 45%, blue 50% 75%); - --gradient-prop-3: radial-gradient(in oklch, cyan 0%, transparent 20% 30%, salmon 40%); - --gradient-prop-4: repeating-conic-gradient(in oklch from 0deg, yellowgreen 40deg, gold 60deg 75deg, #f06 0deg); - --gradient-prop-5: repeating-linear-gradient(in oklch 90deg, black 25% 50%, blue 50% 75%); - --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); +.test-missing-position-1 { + background-image: linear-gradient(in oklch, red, green 45%, blue); +} + +.test-missing-position-2 { + background-image: linear-gradient(in oklch, red 0%, green, blue 100%); +} + +.test-missing-color { + background-image: linear-gradient(in oklch, red 0%, 25%, blue 100%); +} + +.test-visual-effect-1-1 { + background-image: linear-gradient(in srgb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-2-1 { + background-image: linear-gradient(in srgb-linear, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-3-1 { + background-image: linear-gradient(in lab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-4-1 { + background-image: linear-gradient(in oklab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-5-1 { + background-image: linear-gradient(in xyz, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-6-1 { + background-image: linear-gradient(in xyz-d65, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-7-1 { + background-image: linear-gradient(in xyz-d50, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-a { + background-image: linear-gradient(in hsl, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-b { + background-image: linear-gradient(in hsl shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-c { + background-image: linear-gradient(in hsl longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-d { + background-image: linear-gradient(in hsl increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-e { + background-image: linear-gradient(in hsl decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-a { + background-image: linear-gradient(in hwb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-b { + background-image: linear-gradient(in hwb shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-c { + background-image: linear-gradient(in hwb longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-d { + background-image: linear-gradient(in hwb increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-e { + background-image: linear-gradient(in hwb decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-a { + background-image: linear-gradient(in lch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-b { + background-image: linear-gradient(in lch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-c { + background-image: linear-gradient(in lch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-d { + background-image: linear-gradient(in lch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-e { + background-image: linear-gradient(in lch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-a { + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-b { + background-image: linear-gradient(in oklch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-c { + background-image: linear-gradient(in oklch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-d { + background-image: linear-gradient(in oklch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-e { + background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-1-2 { + background-image: linear-gradient(in srgb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-2-2 { + background-image: linear-gradient(in srgb-linear, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-3-2 { + background-image: linear-gradient(in lab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-4-2 { + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-5-2 { + background-image: linear-gradient(in xyz, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-6-2 { + background-image: linear-gradient(in xyz-d65, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-7-2 { + background-image: linear-gradient(in xyz-d50, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-a { + background-image: linear-gradient(in hsl, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-b { + background-image: linear-gradient(in hsl shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-c { + background-image: linear-gradient(in hsl longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-d { + background-image: linear-gradient(in hsl increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-e { + background-image: linear-gradient(in hsl decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-a { + background-image: linear-gradient(in hwb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-b { + background-image: linear-gradient(in hwb shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-c { + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-d { + background-image: linear-gradient(in hwb increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-e { + background-image: linear-gradient(in hwb decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-a { + background-image: linear-gradient(in lch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-b { + background-image: linear-gradient(in lch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-c { + background-image: linear-gradient(in lch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-d { + background-image: linear-gradient(in lch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-e { + background-image: linear-gradient(in lch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-a { + background-image: linear-gradient(in oklch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-b { + background-image: linear-gradient(in oklch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-c { + background-image: linear-gradient(in oklch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-d { + background-image: linear-gradient(in oklch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-e { + background-image: linear-gradient(in oklch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.patterns-1 { + background: + conic-gradient(in oklch from -45deg, #EB6841 90deg, #0000 0 180deg, #EDC951 0 270deg, #0000 0) 0 calc(64px/2)/64px 64px, + conic-gradient(in oklch from 135deg at 50% 0, #EB6841 90deg, #EDC951 0) 0 0/calc(2*64px) 64px; +} + +.patterns-2 { + background: + conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0, + linear-gradient(#53777A 20px, #0000 0) 0 15px, + conic-gradient(at 20px calc(100% - 20px) in hsl longer hue, #0000 90deg, #53777A 0 180deg, #C02942 0), + #ECD078; +} + +.manual_fallback { + background-image: red; + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +to-clone { + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css index bf0dc5fc4..5ee652057 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css @@ -1,61 +1,351 @@ -.test-linear-gradient { +.test-1 { --perc-50: 50%; - background-image: linear-gradient(90deg ,black 20%,black var(--perc-50),color-mix(in oklch, black 90%, blue 10%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.9)),blue 70%,blue 75%); + background-image: linear-gradient( 90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), color(display-p3 0.00029 0 0.02873), color(display-p3 0.00017 0 0.11197), color(display-p3 0 0 0.20487), color(display-p3 0 0 0.30489), color(display-p3 0 0 0.41072), color(display-p3 0 0 0.52175), color(display-p3 0 0 0.63725), color(display-p3 0 0 0.75659), color(display-p3 0 0 0.8797), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%); +} + +.test-2-0 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 0 0.41862), color(display-p3 0.80547 0 0.53001), color(display-p3 0.74092 0 0.63538), color(display-p3 0.66511 0 0.7332), color(display-p3 0.57951 0 0.81971), color(display-p3 0.4848 0 0.89016), color(display-p3 0.37932 0 0.93966), color(display-p3 0.25342 0 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%); +} - background-image: linear-gradient(90deg ,black 25%,black 50%,color-mix(in oklch shorter, black 90%, blue 10%) calc(50% + ((70% - 50%) * 0.1)),color-mix(in oklch shorter, black 80%, blue 20%) calc(50% + ((70% - 50%) * 0.2)),color-mix(in oklch shorter, black 70%, blue 30%) calc(50% + ((70% - 50%) * 0.3)),color-mix(in oklch shorter, black 60%, blue 40%) calc(50% + ((70% - 50%) * 0.4)),color-mix(in oklch shorter, black 50%, blue 50%) calc(50% + ((70% - 50%) * 0.5)),color-mix(in oklch shorter, black 40%, blue 60%) calc(50% + ((70% - 50%) * 0.6)),color-mix(in oklch shorter, black 30%, blue 70%) calc(50% + ((70% - 50%) * 0.7)),color-mix(in oklch shorter, black 20%, blue 80%) calc(50% + ((70% - 50%) * 0.8)),color-mix(in oklch shorter, black 10%, blue 90%) calc(50% + ((70% - 50%) * 0.9)),blue 70%,blue 75%); +.test-2-1 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in oklab 90deg, red 25% 50%, blue 70% 75%); +} - background-image: linear-gradient(in oklch shorter 90deg, black 25% 50%, blue 70% 75%); +.test-2-2 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%); +} + +.test-2-3 { + background-image: linear-gradient(90deg , rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(90deg in oklab, red 25% 50%, blue 70% 75%); +} +.test-3 { --red: red; /* Color stop variable */ background-image: linear-gradient(in oklch 90deg, black, var(--red), blue); +} + +.test-4 { --perc-10: 10%; /* Interpolation hint */ background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); } -:root { - --gradient-prop-1: conic-gradient(yellowgreen 0deg,color-mix(in oklch, yellowgreen 90%, gold 10%) calc(0deg + ((15deg - 0deg) * 0.1)),color-mix(in oklch, yellowgreen 80%, gold 20%) calc(0deg + ((15deg - 0deg) * 0.2)),color-mix(in oklch, yellowgreen 70%, gold 30%) calc(0deg + ((15deg - 0deg) * 0.3)),color-mix(in oklch, yellowgreen 60%, gold 40%) calc(0deg + ((15deg - 0deg) * 0.4)),color-mix(in oklch, yellowgreen 50%, gold 50%) calc(0deg + ((15deg - 0deg) * 0.5)),color-mix(in oklch, yellowgreen 40%, gold 60%) calc(0deg + ((15deg - 0deg) * 0.6)),color-mix(in oklch, yellowgreen 30%, gold 70%) calc(0deg + ((15deg - 0deg) * 0.7)),color-mix(in oklch, yellowgreen 20%, gold 80%) calc(0deg + ((15deg - 0deg) * 0.8)),color-mix(in oklch, yellowgreen 10%, gold 90%) calc(0deg + ((15deg - 0deg) * 0.9)),gold 15deg,gold 50deg,color-mix(in oklch, gold 90%, #f06 10%) calc(50deg + ((180deg - 50deg) * 0.1)),color-mix(in oklch, gold 80%, #f06 20%) calc(50deg + ((180deg - 50deg) * 0.2)),color-mix(in oklch, gold 70%, #f06 30%) calc(50deg + ((180deg - 50deg) * 0.3)),color-mix(in oklch, gold 60%, #f06 40%) calc(50deg + ((180deg - 50deg) * 0.4)),color-mix(in oklch, gold 50%, #f06 50%) calc(50deg + ((180deg - 50deg) * 0.5)),color-mix(in oklch, gold 40%, #f06 60%) calc(50deg + ((180deg - 50deg) * 0.6)),color-mix(in oklch, gold 30%, #f06 70%) calc(50deg + ((180deg - 50deg) * 0.7)),color-mix(in oklch, gold 20%, #f06 80%) calc(50deg + ((180deg - 50deg) * 0.8)),color-mix(in oklch, gold 10%, #f06 90%) calc(50deg + ((180deg - 50deg) * 0.9)),#f06 180deg); - --gradient-prop-2: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, red 10%) calc(25% + ((45% - 25%) * 0.1)),color-mix(in oklch, black 80%, red 20%) calc(25% + ((45% - 25%) * 0.2)),color-mix(in oklch, black 70%, red 30%) calc(25% + ((45% - 25%) * 0.3)),color-mix(in oklch, black 60%, red 40%) calc(25% + ((45% - 25%) * 0.4)),color-mix(in oklch, black 50%, red 50%) calc(25% + ((45% - 25%) * 0.5)),color-mix(in oklch, black 40%, red 60%) calc(25% + ((45% - 25%) * 0.6)),color-mix(in oklch, black 30%, red 70%) calc(25% + ((45% - 25%) * 0.7)),color-mix(in oklch, black 20%, red 80%) calc(25% + ((45% - 25%) * 0.8)),color-mix(in oklch, black 10%, red 90%) calc(25% + ((45% - 25%) * 0.9)),red 45%,color-mix(in oklch, red 90%, blue 10%) calc(45% + ((50% - 45%) * 0.1)),color-mix(in oklch, red 80%, blue 20%) calc(45% + ((50% - 45%) * 0.2)),color-mix(in oklch, red 70%, blue 30%) calc(45% + ((50% - 45%) * 0.3)),color-mix(in oklch, red 60%, blue 40%) calc(45% + ((50% - 45%) * 0.4)),color-mix(in oklch, red 50%, blue 50%) calc(45% + ((50% - 45%) * 0.5)),color-mix(in oklch, red 40%, blue 60%) calc(45% + ((50% - 45%) * 0.6)),color-mix(in oklch, red 30%, blue 70%) calc(45% + ((50% - 45%) * 0.7)),color-mix(in oklch, red 20%, blue 80%) calc(45% + ((50% - 45%) * 0.8)),color-mix(in oklch, red 10%, blue 90%) calc(45% + ((50% - 45%) * 0.9)),blue 50%,blue 75%); - --gradient-prop-3: radial-gradient(cyan 0%,color-mix(in oklch, cyan 90%, transparent 10%) calc(0% + ((20% - 0%) * 0.1)),color-mix(in oklch, cyan 80%, transparent 20%) calc(0% + ((20% - 0%) * 0.2)),color-mix(in oklch, cyan 70%, transparent 30%) calc(0% + ((20% - 0%) * 0.3)),color-mix(in oklch, cyan 60%, transparent 40%) calc(0% + ((20% - 0%) * 0.4)),color-mix(in oklch, cyan 50%, transparent 50%) calc(0% + ((20% - 0%) * 0.5)),color-mix(in oklch, cyan 40%, transparent 60%) calc(0% + ((20% - 0%) * 0.6)),color-mix(in oklch, cyan 30%, transparent 70%) calc(0% + ((20% - 0%) * 0.7)),color-mix(in oklch, cyan 20%, transparent 80%) calc(0% + ((20% - 0%) * 0.8)),color-mix(in oklch, cyan 10%, transparent 90%) calc(0% + ((20% - 0%) * 0.9)),transparent 20%,transparent 30%,color-mix(in oklch, transparent 90%, salmon 10%) calc(30% + ((40% - 30%) * 0.1)),color-mix(in oklch, transparent 80%, salmon 20%) calc(30% + ((40% - 30%) * 0.2)),color-mix(in oklch, transparent 70%, salmon 30%) calc(30% + ((40% - 30%) * 0.3)),color-mix(in oklch, transparent 60%, salmon 40%) calc(30% + ((40% - 30%) * 0.4)),color-mix(in oklch, transparent 50%, salmon 50%) calc(30% + ((40% - 30%) * 0.5)),color-mix(in oklch, transparent 40%, salmon 60%) calc(30% + ((40% - 30%) * 0.6)),color-mix(in oklch, transparent 30%, salmon 70%) calc(30% + ((40% - 30%) * 0.7)),color-mix(in oklch, transparent 20%, salmon 80%) calc(30% + ((40% - 30%) * 0.8)),color-mix(in oklch, transparent 10%, salmon 90%) calc(30% + ((40% - 30%) * 0.9)),salmon 40%); - --gradient-prop-4: repeating-conic-gradient(from 0deg ,yellowgreen 40deg,color-mix(in oklch, yellowgreen 90%, gold 10%) calc(40deg + ((60deg - 40deg) * 0.1)),color-mix(in oklch, yellowgreen 80%, gold 20%) calc(40deg + ((60deg - 40deg) * 0.2)),color-mix(in oklch, yellowgreen 70%, gold 30%) calc(40deg + ((60deg - 40deg) * 0.3)),color-mix(in oklch, yellowgreen 60%, gold 40%) calc(40deg + ((60deg - 40deg) * 0.4)),color-mix(in oklch, yellowgreen 50%, gold 50%) calc(40deg + ((60deg - 40deg) * 0.5)),color-mix(in oklch, yellowgreen 40%, gold 60%) calc(40deg + ((60deg - 40deg) * 0.6)),color-mix(in oklch, yellowgreen 30%, gold 70%) calc(40deg + ((60deg - 40deg) * 0.7)),color-mix(in oklch, yellowgreen 20%, gold 80%) calc(40deg + ((60deg - 40deg) * 0.8)),color-mix(in oklch, yellowgreen 10%, gold 90%) calc(40deg + ((60deg - 40deg) * 0.9)),gold 60deg,gold 75deg,color-mix(in oklch, gold 90%, #f06 10%) calc(75deg + ((0deg - 75deg) * 0.1)),color-mix(in oklch, gold 80%, #f06 20%) calc(75deg + ((0deg - 75deg) * 0.2)),color-mix(in oklch, gold 70%, #f06 30%) calc(75deg + ((0deg - 75deg) * 0.3)),color-mix(in oklch, gold 60%, #f06 40%) calc(75deg + ((0deg - 75deg) * 0.4)),color-mix(in oklch, gold 50%, #f06 50%) calc(75deg + ((0deg - 75deg) * 0.5)),color-mix(in oklch, gold 40%, #f06 60%) calc(75deg + ((0deg - 75deg) * 0.6)),color-mix(in oklch, gold 30%, #f06 70%) calc(75deg + ((0deg - 75deg) * 0.7)),color-mix(in oklch, gold 20%, #f06 80%) calc(75deg + ((0deg - 75deg) * 0.8)),color-mix(in oklch, gold 10%, #f06 90%) calc(75deg + ((0deg - 75deg) * 0.9)),#f06 0deg); - --gradient-prop-5: repeating-linear-gradient(90deg ,black 25%,black 50%,color-mix(in oklch, black 90%, blue 10%) calc(50% + ((50% - 50%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(50% + ((50% - 50%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(50% + ((50% - 50%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(50% + ((50% - 50%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(50% + ((50% - 50%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(50% + ((50% - 50%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(50% + ((50% - 50%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(50% + ((50% - 50%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(50% + ((50% - 50%) * 0.9)),blue 50%,blue 75%); - --gradient-prop-6: repeating-radial-gradient(red 0,red 8%,color-mix(in oklch, red 90%, yellow 10%) calc(8% + ((8% - 8%) * 0.1)),color-mix(in oklch, red 80%, yellow 20%) calc(8% + ((8% - 8%) * 0.2)),color-mix(in oklch, red 70%, yellow 30%) calc(8% + ((8% - 8%) * 0.3)),color-mix(in oklch, red 60%, yellow 40%) calc(8% + ((8% - 8%) * 0.4)),color-mix(in oklch, red 50%, yellow 50%) calc(8% + ((8% - 8%) * 0.5)),color-mix(in oklch, red 40%, yellow 60%) calc(8% + ((8% - 8%) * 0.6)),color-mix(in oklch, red 30%, yellow 70%) calc(8% + ((8% - 8%) * 0.7)),color-mix(in oklch, red 20%, yellow 80%) calc(8% + ((8% - 8%) * 0.8)),color-mix(in oklch, red 10%, yellow 90%) calc(8% + ((8% - 8%) * 0.9)),yellow 8%,yellow 16%,color-mix(in oklch, yellow 90%, blue 10%) calc(16% + ((16% - 16%) * 0.1)),color-mix(in oklch, yellow 80%, blue 20%) calc(16% + ((16% - 16%) * 0.2)),color-mix(in oklch, yellow 70%, blue 30%) calc(16% + ((16% - 16%) * 0.3)),color-mix(in oklch, yellow 60%, blue 40%) calc(16% + ((16% - 16%) * 0.4)),color-mix(in oklch, yellow 50%, blue 50%) calc(16% + ((16% - 16%) * 0.5)),color-mix(in oklch, yellow 40%, blue 60%) calc(16% + ((16% - 16%) * 0.6)),color-mix(in oklch, yellow 30%, blue 70%) calc(16% + ((16% - 16%) * 0.7)),color-mix(in oklch, yellow 20%, blue 80%) calc(16% + ((16% - 16%) * 0.8)),color-mix(in oklch, yellow 10%, blue 90%) calc(16% + ((16% - 16%) * 0.9)),blue 16%,blue 24%); +.test-missing-position-1 { + background-image: linear-gradient(in oklch, red, green 45%, blue); +} + +.test-missing-position-2 { + background-image: linear-gradient(in oklch, red 0%, green, blue 100%); +} + +.test-missing-color { + background-image: linear-gradient(in oklch, red 0%, 25%, blue 100%); +} + +.test-visual-effect-1-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(230, 147, 147), rgb(215, 157, 157), rgb(200, 167, 167), rgb(185, 177, 177), rgb(170, 187, 187), rgb(155, 197, 197), rgb(140, 207, 207), rgb(125, 217, 217), rgb(109, 227, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in srgb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-2-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in srgb-linear, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-3-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(238, 149, 147), rgb(229, 160, 156), rgb(219, 171, 166), rgb(209, 181, 176), rgb(197, 191, 186), rgb(183, 201, 196), rgb(168, 210, 206), rgb(149, 219, 216), rgb(126, 228, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-4-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(237, 149, 147), rgb(229, 161, 157), rgb(219, 171, 167), rgb(208, 182, 177), rgb(196, 192, 187), rgb(183, 201, 197), rgb(167, 210, 207), rgb(149, 220, 217), rgb(126, 228, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-5-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-6-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz-d65, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-7-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz-d50, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 128, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 115, 242), rgb(137, 111, 241), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -@supports (background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg)) { -:root { - --gradient-prop-1: conic-gradient(in oklch, yellowgreen 0deg, gold 15deg, gold 50deg, #f06 180deg); +.test-visual-effect-10-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } + +.test-visual-effect-10-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1), color(display-p3 0.66124 0.77478 1), color(display-p3 0.59127 0.81803 1), color(display-p3 0.52052 0.85831 1), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { -:root { - --gradient-prop-2: linear-gradient(in oklch 90deg, black 25%, red 45%, blue 50% 75%); +.test-visual-effect-10-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } + +.test-visual-effect-10-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1), color(display-p3 0.66124 0.77478 1), color(display-p3 0.59127 0.81803 1), color(display-p3 0.52052 0.85831 1), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -@supports (background: radial-gradient(in oklch, red, red 1px 2px, red 3px)) { -:root { - --gradient-prop-3: radial-gradient(in oklch, cyan 0%, transparent 20% 30%, salmon 40%); +.test-visual-effect-11-1-a { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } + +.test-visual-effect-11-1-b { + background-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%); + background-image: linear-gradient(in oklch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -@supports (background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg)) { -:root { - --gradient-prop-4: repeating-conic-gradient(in oklch from 0deg, yellowgreen 40deg, gold 60deg 75deg, #f06 0deg); +.test-visual-effect-11-1-c { + 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), color(display-p3 0.66943 0.75326 1), color(display-p3 0.61041 0.80007 1), color(display-p3 0.54198 0.8462 1), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } + +.test-visual-effect-11-1-d { + background-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%); + background-image: linear-gradient(in oklch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -@supports (background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { -:root { - --gradient-prop-5: repeating-linear-gradient(in oklch 90deg, black 25% 50%, blue 50% 75%); +.test-visual-effect-11-1-e { + 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), color(display-p3 0.66943 0.75326 1), color(display-p3 0.61041 0.80007 1), color(display-p3 0.54198 0.8462 1), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } + +.test-visual-effect-1-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(61, 80, 42), rgb(66, 74, 49), rgb(71, 67, 56), rgb(76, 61, 63), rgb(81, 54, 70), rgb(86, 47, 76), rgb(91, 41, 83), rgb(96, 34, 90), rgb(101, 28, 97), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in srgb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-2-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in srgb-linear, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } -@supports (background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px)) { -:root { - --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); +.test-visual-effect-3-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 44), rgb(71, 78, 51), rgb(77, 73, 58), rgb(83, 68, 65), rgb(87, 63, 72), rgb(92, 57, 78), rgb(96, 50, 85), rgb(100, 43, 91), rgb(103, 33, 97), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } + +.test-visual-effect-4-2 { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-5-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-6-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz-d65, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-7-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz-d50, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 0 0.33649 0.31294), color(display-p3 0 0.32263 0.36999), color(display-p3 0 0.30878 0.41269), color(display-p3 0 0.2945 0.45883), color(display-p3 0 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 0 0.33649 0.31294), color(display-p3 0 0.32263 0.36999), color(display-p3 0 0.30878 0.41269), color(display-p3 0 0.2945 0.45883), color(display-p3 0 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 0 0.34584 0.34631), color(display-p3 0 0.33067 0.4127), color(display-p3 0 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 0 0.34584 0.34631), color(display-p3 0 0.33067 0.4127), color(display-p3 0 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.patterns-1 { + background: + conic-gradient( from -45deg, rgb(235, 104, 65) 90deg, rgba(235, 104, 65, 0.9), rgba(235, 104, 65, 0.8), rgba(235, 104, 65, 0.7), rgba(235, 104, 65, 0.6), rgba(235, 104, 65, 0.5), rgba(235, 104, 65, 0.4), rgba(235, 104, 65, 0.3), rgba(235, 104, 65, 0.2), rgba(235, 104, 65, 0.1), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 180deg, rgba(237, 201, 81, 0.1), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.9), rgb(237, 201, 81) 0, rgb(237, 201, 81) 270deg, rgba(237, 201, 81, 0.9), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.1), rgba(0, 0, 0, 0) 0) 0 calc(64px/2)/64px 64px, + conic-gradient( from 135deg at 50% 0, rgb(235, 104, 65) 90deg, rgb(238, 114, 58), rgb(240, 123, 53), rgb(242, 133, 48), rgb(243, 143, 45), rgb(244, 153, 44), rgb(243, 162, 47), rgb(243, 172, 53), rgb(241, 182, 60), rgb(239, 192, 70), rgb(237, 201, 81) 0) 0 0/calc(2*64px) 64px; + background: + conic-gradient(in oklch from -45deg, #EB6841 90deg, #0000 0 180deg, #EDC951 0 270deg, #0000 0) 0 calc(64px/2)/64px 64px, + conic-gradient(in oklch from 135deg at 50% 0, #EB6841 90deg, #EDC951 0) 0 0/calc(2*64px) 64px; +} + +.patterns-2 { + background: + conic-gradient( at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, + linear-gradient(#53777A 20px, #0000 0) 0 15px, + conic-gradient(at 20px calc(100% - 20px) , rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), + #ECD078; + background: + conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0, + linear-gradient(#53777A 20px, #0000 0) 0 15px, + conic-gradient(at 20px calc(100% - 20px) in hsl longer hue, #0000 90deg, #53777A 0 180deg, #C02942 0), + #ECD078; +} + +.manual_fallback { + background-image: red; + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +to-clone { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css index cc2536073..0faee0108 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css @@ -1,22 +1,283 @@ -.test-linear-gradient { +.test-1 { --perc-50: 50%; - background-image: linear-gradient(90deg ,black 20%,black var(--perc-50),color-mix(in oklch, black 90%, blue 10%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.9)),blue 70%,blue 75%); + background-image: linear-gradient( 90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), color(display-p3 0.00029 0 0.02873), color(display-p3 0.00017 0 0.11197), color(display-p3 0 0 0.20487), color(display-p3 0 0 0.30489), color(display-p3 0 0 0.41072), color(display-p3 0 0 0.52175), color(display-p3 0 0 0.63725), color(display-p3 0 0 0.75659), color(display-p3 0 0 0.8797), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); +} - background-image: linear-gradient(90deg ,black 25%,black 50%,color-mix(in oklch shorter, black 90%, blue 10%) calc(50% + ((70% - 50%) * 0.1)),color-mix(in oklch shorter, black 80%, blue 20%) calc(50% + ((70% - 50%) * 0.2)),color-mix(in oklch shorter, black 70%, blue 30%) calc(50% + ((70% - 50%) * 0.3)),color-mix(in oklch shorter, black 60%, blue 40%) calc(50% + ((70% - 50%) * 0.4)),color-mix(in oklch shorter, black 50%, blue 50%) calc(50% + ((70% - 50%) * 0.5)),color-mix(in oklch shorter, black 40%, blue 60%) calc(50% + ((70% - 50%) * 0.6)),color-mix(in oklch shorter, black 30%, blue 70%) calc(50% + ((70% - 50%) * 0.7)),color-mix(in oklch shorter, black 20%, blue 80%) calc(50% + ((70% - 50%) * 0.8)),color-mix(in oklch shorter, black 10%, blue 90%) calc(50% + ((70% - 50%) * 0.9)),blue 70%,blue 75%); +.test-2-0 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 0 0.41862), color(display-p3 0.80547 0 0.53001), color(display-p3 0.74092 0 0.63538), color(display-p3 0.66511 0 0.7332), color(display-p3 0.57951 0 0.81971), color(display-p3 0.4848 0 0.89016), color(display-p3 0.37932 0 0.93966), color(display-p3 0.25342 0 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); +} +.test-2-1 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); +} + +.test-2-2 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); +} + +.test-2-3 { + background-image: linear-gradient(90deg , rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); +} + +.test-3 { --red: red; /* Color stop variable */ background-image: linear-gradient(in oklch 90deg, black, var(--red), blue); +} + +.test-4 { --perc-10: 10%; /* Interpolation hint */ background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); } -:root { - --gradient-prop-1: conic-gradient(yellowgreen 0deg,color-mix(in oklch, yellowgreen 90%, gold 10%) calc(0deg + ((15deg - 0deg) * 0.1)),color-mix(in oklch, yellowgreen 80%, gold 20%) calc(0deg + ((15deg - 0deg) * 0.2)),color-mix(in oklch, yellowgreen 70%, gold 30%) calc(0deg + ((15deg - 0deg) * 0.3)),color-mix(in oklch, yellowgreen 60%, gold 40%) calc(0deg + ((15deg - 0deg) * 0.4)),color-mix(in oklch, yellowgreen 50%, gold 50%) calc(0deg + ((15deg - 0deg) * 0.5)),color-mix(in oklch, yellowgreen 40%, gold 60%) calc(0deg + ((15deg - 0deg) * 0.6)),color-mix(in oklch, yellowgreen 30%, gold 70%) calc(0deg + ((15deg - 0deg) * 0.7)),color-mix(in oklch, yellowgreen 20%, gold 80%) calc(0deg + ((15deg - 0deg) * 0.8)),color-mix(in oklch, yellowgreen 10%, gold 90%) calc(0deg + ((15deg - 0deg) * 0.9)),gold 15deg,gold 50deg,color-mix(in oklch, gold 90%, #f06 10%) calc(50deg + ((180deg - 50deg) * 0.1)),color-mix(in oklch, gold 80%, #f06 20%) calc(50deg + ((180deg - 50deg) * 0.2)),color-mix(in oklch, gold 70%, #f06 30%) calc(50deg + ((180deg - 50deg) * 0.3)),color-mix(in oklch, gold 60%, #f06 40%) calc(50deg + ((180deg - 50deg) * 0.4)),color-mix(in oklch, gold 50%, #f06 50%) calc(50deg + ((180deg - 50deg) * 0.5)),color-mix(in oklch, gold 40%, #f06 60%) calc(50deg + ((180deg - 50deg) * 0.6)),color-mix(in oklch, gold 30%, #f06 70%) calc(50deg + ((180deg - 50deg) * 0.7)),color-mix(in oklch, gold 20%, #f06 80%) calc(50deg + ((180deg - 50deg) * 0.8)),color-mix(in oklch, gold 10%, #f06 90%) calc(50deg + ((180deg - 50deg) * 0.9)),#f06 180deg); - --gradient-prop-2: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, red 10%) calc(25% + ((45% - 25%) * 0.1)),color-mix(in oklch, black 80%, red 20%) calc(25% + ((45% - 25%) * 0.2)),color-mix(in oklch, black 70%, red 30%) calc(25% + ((45% - 25%) * 0.3)),color-mix(in oklch, black 60%, red 40%) calc(25% + ((45% - 25%) * 0.4)),color-mix(in oklch, black 50%, red 50%) calc(25% + ((45% - 25%) * 0.5)),color-mix(in oklch, black 40%, red 60%) calc(25% + ((45% - 25%) * 0.6)),color-mix(in oklch, black 30%, red 70%) calc(25% + ((45% - 25%) * 0.7)),color-mix(in oklch, black 20%, red 80%) calc(25% + ((45% - 25%) * 0.8)),color-mix(in oklch, black 10%, red 90%) calc(25% + ((45% - 25%) * 0.9)),red 45%,color-mix(in oklch, red 90%, blue 10%) calc(45% + ((50% - 45%) * 0.1)),color-mix(in oklch, red 80%, blue 20%) calc(45% + ((50% - 45%) * 0.2)),color-mix(in oklch, red 70%, blue 30%) calc(45% + ((50% - 45%) * 0.3)),color-mix(in oklch, red 60%, blue 40%) calc(45% + ((50% - 45%) * 0.4)),color-mix(in oklch, red 50%, blue 50%) calc(45% + ((50% - 45%) * 0.5)),color-mix(in oklch, red 40%, blue 60%) calc(45% + ((50% - 45%) * 0.6)),color-mix(in oklch, red 30%, blue 70%) calc(45% + ((50% - 45%) * 0.7)),color-mix(in oklch, red 20%, blue 80%) calc(45% + ((50% - 45%) * 0.8)),color-mix(in oklch, red 10%, blue 90%) calc(45% + ((50% - 45%) * 0.9)),blue 50%,blue 75%); - --gradient-prop-3: radial-gradient(cyan 0%,color-mix(in oklch, cyan 90%, transparent 10%) calc(0% + ((20% - 0%) * 0.1)),color-mix(in oklch, cyan 80%, transparent 20%) calc(0% + ((20% - 0%) * 0.2)),color-mix(in oklch, cyan 70%, transparent 30%) calc(0% + ((20% - 0%) * 0.3)),color-mix(in oklch, cyan 60%, transparent 40%) calc(0% + ((20% - 0%) * 0.4)),color-mix(in oklch, cyan 50%, transparent 50%) calc(0% + ((20% - 0%) * 0.5)),color-mix(in oklch, cyan 40%, transparent 60%) calc(0% + ((20% - 0%) * 0.6)),color-mix(in oklch, cyan 30%, transparent 70%) calc(0% + ((20% - 0%) * 0.7)),color-mix(in oklch, cyan 20%, transparent 80%) calc(0% + ((20% - 0%) * 0.8)),color-mix(in oklch, cyan 10%, transparent 90%) calc(0% + ((20% - 0%) * 0.9)),transparent 20%,transparent 30%,color-mix(in oklch, transparent 90%, salmon 10%) calc(30% + ((40% - 30%) * 0.1)),color-mix(in oklch, transparent 80%, salmon 20%) calc(30% + ((40% - 30%) * 0.2)),color-mix(in oklch, transparent 70%, salmon 30%) calc(30% + ((40% - 30%) * 0.3)),color-mix(in oklch, transparent 60%, salmon 40%) calc(30% + ((40% - 30%) * 0.4)),color-mix(in oklch, transparent 50%, salmon 50%) calc(30% + ((40% - 30%) * 0.5)),color-mix(in oklch, transparent 40%, salmon 60%) calc(30% + ((40% - 30%) * 0.6)),color-mix(in oklch, transparent 30%, salmon 70%) calc(30% + ((40% - 30%) * 0.7)),color-mix(in oklch, transparent 20%, salmon 80%) calc(30% + ((40% - 30%) * 0.8)),color-mix(in oklch, transparent 10%, salmon 90%) calc(30% + ((40% - 30%) * 0.9)),salmon 40%); - --gradient-prop-4: repeating-conic-gradient(from 0deg ,yellowgreen 40deg,color-mix(in oklch, yellowgreen 90%, gold 10%) calc(40deg + ((60deg - 40deg) * 0.1)),color-mix(in oklch, yellowgreen 80%, gold 20%) calc(40deg + ((60deg - 40deg) * 0.2)),color-mix(in oklch, yellowgreen 70%, gold 30%) calc(40deg + ((60deg - 40deg) * 0.3)),color-mix(in oklch, yellowgreen 60%, gold 40%) calc(40deg + ((60deg - 40deg) * 0.4)),color-mix(in oklch, yellowgreen 50%, gold 50%) calc(40deg + ((60deg - 40deg) * 0.5)),color-mix(in oklch, yellowgreen 40%, gold 60%) calc(40deg + ((60deg - 40deg) * 0.6)),color-mix(in oklch, yellowgreen 30%, gold 70%) calc(40deg + ((60deg - 40deg) * 0.7)),color-mix(in oklch, yellowgreen 20%, gold 80%) calc(40deg + ((60deg - 40deg) * 0.8)),color-mix(in oklch, yellowgreen 10%, gold 90%) calc(40deg + ((60deg - 40deg) * 0.9)),gold 60deg,gold 75deg,color-mix(in oklch, gold 90%, #f06 10%) calc(75deg + ((0deg - 75deg) * 0.1)),color-mix(in oklch, gold 80%, #f06 20%) calc(75deg + ((0deg - 75deg) * 0.2)),color-mix(in oklch, gold 70%, #f06 30%) calc(75deg + ((0deg - 75deg) * 0.3)),color-mix(in oklch, gold 60%, #f06 40%) calc(75deg + ((0deg - 75deg) * 0.4)),color-mix(in oklch, gold 50%, #f06 50%) calc(75deg + ((0deg - 75deg) * 0.5)),color-mix(in oklch, gold 40%, #f06 60%) calc(75deg + ((0deg - 75deg) * 0.6)),color-mix(in oklch, gold 30%, #f06 70%) calc(75deg + ((0deg - 75deg) * 0.7)),color-mix(in oklch, gold 20%, #f06 80%) calc(75deg + ((0deg - 75deg) * 0.8)),color-mix(in oklch, gold 10%, #f06 90%) calc(75deg + ((0deg - 75deg) * 0.9)),#f06 0deg); - --gradient-prop-5: repeating-linear-gradient(90deg ,black 25%,black 50%,color-mix(in oklch, black 90%, blue 10%) calc(50% + ((50% - 50%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(50% + ((50% - 50%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(50% + ((50% - 50%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(50% + ((50% - 50%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(50% + ((50% - 50%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(50% + ((50% - 50%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(50% + ((50% - 50%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(50% + ((50% - 50%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(50% + ((50% - 50%) * 0.9)),blue 50%,blue 75%); - --gradient-prop-6: repeating-radial-gradient(red 0,red 8%,color-mix(in oklch, red 90%, yellow 10%) calc(8% + ((8% - 8%) * 0.1)),color-mix(in oklch, red 80%, yellow 20%) calc(8% + ((8% - 8%) * 0.2)),color-mix(in oklch, red 70%, yellow 30%) calc(8% + ((8% - 8%) * 0.3)),color-mix(in oklch, red 60%, yellow 40%) calc(8% + ((8% - 8%) * 0.4)),color-mix(in oklch, red 50%, yellow 50%) calc(8% + ((8% - 8%) * 0.5)),color-mix(in oklch, red 40%, yellow 60%) calc(8% + ((8% - 8%) * 0.6)),color-mix(in oklch, red 30%, yellow 70%) calc(8% + ((8% - 8%) * 0.7)),color-mix(in oklch, red 20%, yellow 80%) calc(8% + ((8% - 8%) * 0.8)),color-mix(in oklch, red 10%, yellow 90%) calc(8% + ((8% - 8%) * 0.9)),yellow 8%,yellow 16%,color-mix(in oklch, yellow 90%, blue 10%) calc(16% + ((16% - 16%) * 0.1)),color-mix(in oklch, yellow 80%, blue 20%) calc(16% + ((16% - 16%) * 0.2)),color-mix(in oklch, yellow 70%, blue 30%) calc(16% + ((16% - 16%) * 0.3)),color-mix(in oklch, yellow 60%, blue 40%) calc(16% + ((16% - 16%) * 0.4)),color-mix(in oklch, yellow 50%, blue 50%) calc(16% + ((16% - 16%) * 0.5)),color-mix(in oklch, yellow 40%, blue 60%) calc(16% + ((16% - 16%) * 0.6)),color-mix(in oklch, yellow 30%, blue 70%) calc(16% + ((16% - 16%) * 0.7)),color-mix(in oklch, yellow 20%, blue 80%) calc(16% + ((16% - 16%) * 0.8)),color-mix(in oklch, yellow 10%, blue 90%) calc(16% + ((16% - 16%) * 0.9)),blue 16%,blue 24%); +.test-missing-position-1 { + background-image: linear-gradient(in oklch, red, green 45%, blue); +} + +.test-missing-position-2 { + background-image: linear-gradient(in oklch, red 0%, green, blue 100%); +} + +.test-missing-color { + background-image: linear-gradient(in oklch, red 0%, 25%, blue 100%); +} + +.test-visual-effect-1-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(230, 147, 147), rgb(215, 157, 157), rgb(200, 167, 167), rgb(185, 177, 177), rgb(170, 187, 187), rgb(155, 197, 197), rgb(140, 207, 207), rgb(125, 217, 217), rgb(109, 227, 227), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-2-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-3-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(238, 149, 147), rgb(229, 160, 156), rgb(219, 171, 166), rgb(209, 181, 176), rgb(197, 191, 186), rgb(183, 201, 196), rgb(168, 210, 206), rgb(149, 219, 216), rgb(126, 228, 227), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-4-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(237, 149, 147), rgb(229, 161, 157), rgb(219, 171, 167), rgb(208, 182, 177), rgb(196, 192, 187), rgb(183, 201, 197), rgb(167, 210, 207), rgb(149, 220, 217), rgb(126, 228, 227), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-5-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-6-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-7-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-8-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-8-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-8-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-8-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-8-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 128, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 115, 242), rgb(137, 111, 241), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-9-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-9-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-9-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-9-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-9-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-10-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-10-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-10-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1), color(display-p3 0.66124 0.77478 1), color(display-p3 0.59127 0.81803 1), color(display-p3 0.52052 0.85831 1), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-10-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-10-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1), color(display-p3 0.66124 0.77478 1), color(display-p3 0.59127 0.81803 1), color(display-p3 0.52052 0.85831 1), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-11-1-a { + background-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%); +} + +.test-visual-effect-11-1-b { + background-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%); +} + +.test-visual-effect-11-1-c { + 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), color(display-p3 0.66943 0.75326 1), color(display-p3 0.61041 0.80007 1), color(display-p3 0.54198 0.8462 1), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-11-1-d { + background-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%); +} + +.test-visual-effect-11-1-e { + 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), color(display-p3 0.66943 0.75326 1), color(display-p3 0.61041 0.80007 1), color(display-p3 0.54198 0.8462 1), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} + +.test-visual-effect-1-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(61, 80, 42), rgb(66, 74, 49), rgb(71, 67, 56), rgb(76, 61, 63), rgb(81, 54, 70), rgb(86, 47, 76), rgb(91, 41, 83), rgb(96, 34, 90), rgb(101, 28, 97), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-2-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-3-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 44), rgb(71, 78, 51), rgb(77, 73, 58), rgb(83, 68, 65), rgb(87, 63, 72), rgb(92, 57, 78), rgb(96, 50, 85), rgb(100, 43, 91), rgb(103, 33, 97), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-4-2 { + 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%); +} + +.test-visual-effect-5-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-6-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-7-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-8-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-8-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-8-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-8-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-8-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-9-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-9-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-9-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-9-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-9-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-10-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-10-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-10-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 0 0.33649 0.31294), color(display-p3 0 0.32263 0.36999), color(display-p3 0 0.30878 0.41269), color(display-p3 0 0.2945 0.45883), color(display-p3 0 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-10-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 0 0.33649 0.31294), color(display-p3 0 0.32263 0.36999), color(display-p3 0 0.30878 0.41269), color(display-p3 0 0.2945 0.45883), color(display-p3 0 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-10-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-11-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-11-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-11-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 0 0.34584 0.34631), color(display-p3 0 0.33067 0.4127), color(display-p3 0 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-11-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 0 0.34584 0.34631), color(display-p3 0 0.33067 0.4127), color(display-p3 0 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); +} + +.test-visual-effect-11-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); +} + +.patterns-1 { + background: + conic-gradient( from -45deg, rgb(235, 104, 65) 90deg, rgba(235, 104, 65, 0.9), rgba(235, 104, 65, 0.8), rgba(235, 104, 65, 0.7), rgba(235, 104, 65, 0.6), rgba(235, 104, 65, 0.5), rgba(235, 104, 65, 0.4), rgba(235, 104, 65, 0.3), rgba(235, 104, 65, 0.2), rgba(235, 104, 65, 0.1), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 180deg, rgba(237, 201, 81, 0.1), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.9), rgb(237, 201, 81) 0, rgb(237, 201, 81) 270deg, rgba(237, 201, 81, 0.9), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.1), rgba(0, 0, 0, 0) 0) 0 calc(64px/2)/64px 64px, + conic-gradient( from 135deg at 50% 0, rgb(235, 104, 65) 90deg, rgb(238, 114, 58), rgb(240, 123, 53), rgb(242, 133, 48), rgb(243, 143, 45), rgb(244, 153, 44), rgb(243, 162, 47), rgb(243, 172, 53), rgb(241, 182, 60), rgb(239, 192, 70), rgb(237, 201, 81) 0) 0 0/calc(2*64px) 64px; +} + +.patterns-2 { + background: + conic-gradient( at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, + linear-gradient(#53777A 20px, #0000 0) 0 15px, + conic-gradient(at 20px calc(100% - 20px) , rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), + #ECD078; +} + +.manual_fallback { + background-image: red; + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +to-clone { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-true.progressive-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-true.progressive-false.expect.css index b4c915411..5ee652057 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-true.progressive-false.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-true.progressive-false.expect.css @@ -1,31 +1,351 @@ -.test-linear-gradient { +.test-1 { --perc-50: 50%; - background-image: linear-gradient(90deg ,black 20%,black var(--perc-50),color-mix(in oklch, black 90%, blue 10%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(var(--perc-50) + ((70% - var(--perc-50)) * 0.9)),blue 70%,blue 75%); + background-image: linear-gradient( 90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), color(display-p3 0.00029 0 0.02873), color(display-p3 0.00017 0 0.11197), color(display-p3 0 0 0.20487), color(display-p3 0 0 0.30489), color(display-p3 0 0 0.41072), color(display-p3 0 0 0.52175), color(display-p3 0 0 0.63725), color(display-p3 0 0 0.75659), color(display-p3 0 0 0.8797), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%); +} - background-image: linear-gradient(90deg ,black 25%,black 50%,color-mix(in oklch shorter, black 90%, blue 10%) calc(50% + ((70% - 50%) * 0.1)),color-mix(in oklch shorter, black 80%, blue 20%) calc(50% + ((70% - 50%) * 0.2)),color-mix(in oklch shorter, black 70%, blue 30%) calc(50% + ((70% - 50%) * 0.3)),color-mix(in oklch shorter, black 60%, blue 40%) calc(50% + ((70% - 50%) * 0.4)),color-mix(in oklch shorter, black 50%, blue 50%) calc(50% + ((70% - 50%) * 0.5)),color-mix(in oklch shorter, black 40%, blue 60%) calc(50% + ((70% - 50%) * 0.6)),color-mix(in oklch shorter, black 30%, blue 70%) calc(50% + ((70% - 50%) * 0.7)),color-mix(in oklch shorter, black 20%, blue 80%) calc(50% + ((70% - 50%) * 0.8)),color-mix(in oklch shorter, black 10%, blue 90%) calc(50% + ((70% - 50%) * 0.9)),blue 70%,blue 75%); +.test-2-0 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 0 0.41862), color(display-p3 0.80547 0 0.53001), color(display-p3 0.74092 0 0.63538), color(display-p3 0.66511 0 0.7332), color(display-p3 0.57951 0 0.81971), color(display-p3 0.4848 0 0.89016), color(display-p3 0.37932 0 0.93966), color(display-p3 0.25342 0 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%); +} - background-image: linear-gradient(in oklch shorter 90deg, black 25% 50%, blue 70% 75%); +.test-2-1 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in oklab 90deg, red 25% 50%, blue 70% 75%); +} + +.test-2-2 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%); +} +.test-2-3 { + background-image: linear-gradient(90deg , rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(90deg in oklab, red 25% 50%, blue 70% 75%); +} + +.test-3 { --red: red; /* Color stop variable */ background-image: linear-gradient(in oklch 90deg, black, var(--red), blue); +} + +.test-4 { --perc-10: 10%; /* Interpolation hint */ background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); } -:root { - --gradient-prop-1: conic-gradient(yellowgreen 0deg,color-mix(in oklch, yellowgreen 90%, gold 10%) calc(0deg + ((15deg - 0deg) * 0.1)),color-mix(in oklch, yellowgreen 80%, gold 20%) calc(0deg + ((15deg - 0deg) * 0.2)),color-mix(in oklch, yellowgreen 70%, gold 30%) calc(0deg + ((15deg - 0deg) * 0.3)),color-mix(in oklch, yellowgreen 60%, gold 40%) calc(0deg + ((15deg - 0deg) * 0.4)),color-mix(in oklch, yellowgreen 50%, gold 50%) calc(0deg + ((15deg - 0deg) * 0.5)),color-mix(in oklch, yellowgreen 40%, gold 60%) calc(0deg + ((15deg - 0deg) * 0.6)),color-mix(in oklch, yellowgreen 30%, gold 70%) calc(0deg + ((15deg - 0deg) * 0.7)),color-mix(in oklch, yellowgreen 20%, gold 80%) calc(0deg + ((15deg - 0deg) * 0.8)),color-mix(in oklch, yellowgreen 10%, gold 90%) calc(0deg + ((15deg - 0deg) * 0.9)),gold 15deg,gold 50deg,color-mix(in oklch, gold 90%, #f06 10%) calc(50deg + ((180deg - 50deg) * 0.1)),color-mix(in oklch, gold 80%, #f06 20%) calc(50deg + ((180deg - 50deg) * 0.2)),color-mix(in oklch, gold 70%, #f06 30%) calc(50deg + ((180deg - 50deg) * 0.3)),color-mix(in oklch, gold 60%, #f06 40%) calc(50deg + ((180deg - 50deg) * 0.4)),color-mix(in oklch, gold 50%, #f06 50%) calc(50deg + ((180deg - 50deg) * 0.5)),color-mix(in oklch, gold 40%, #f06 60%) calc(50deg + ((180deg - 50deg) * 0.6)),color-mix(in oklch, gold 30%, #f06 70%) calc(50deg + ((180deg - 50deg) * 0.7)),color-mix(in oklch, gold 20%, #f06 80%) calc(50deg + ((180deg - 50deg) * 0.8)),color-mix(in oklch, gold 10%, #f06 90%) calc(50deg + ((180deg - 50deg) * 0.9)),#f06 180deg); - --gradient-prop-1: conic-gradient(in oklch, yellowgreen 0deg, gold 15deg, gold 50deg, #f06 180deg); - --gradient-prop-2: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, red 10%) calc(25% + ((45% - 25%) * 0.1)),color-mix(in oklch, black 80%, red 20%) calc(25% + ((45% - 25%) * 0.2)),color-mix(in oklch, black 70%, red 30%) calc(25% + ((45% - 25%) * 0.3)),color-mix(in oklch, black 60%, red 40%) calc(25% + ((45% - 25%) * 0.4)),color-mix(in oklch, black 50%, red 50%) calc(25% + ((45% - 25%) * 0.5)),color-mix(in oklch, black 40%, red 60%) calc(25% + ((45% - 25%) * 0.6)),color-mix(in oklch, black 30%, red 70%) calc(25% + ((45% - 25%) * 0.7)),color-mix(in oklch, black 20%, red 80%) calc(25% + ((45% - 25%) * 0.8)),color-mix(in oklch, black 10%, red 90%) calc(25% + ((45% - 25%) * 0.9)),red 45%,color-mix(in oklch, red 90%, blue 10%) calc(45% + ((50% - 45%) * 0.1)),color-mix(in oklch, red 80%, blue 20%) calc(45% + ((50% - 45%) * 0.2)),color-mix(in oklch, red 70%, blue 30%) calc(45% + ((50% - 45%) * 0.3)),color-mix(in oklch, red 60%, blue 40%) calc(45% + ((50% - 45%) * 0.4)),color-mix(in oklch, red 50%, blue 50%) calc(45% + ((50% - 45%) * 0.5)),color-mix(in oklch, red 40%, blue 60%) calc(45% + ((50% - 45%) * 0.6)),color-mix(in oklch, red 30%, blue 70%) calc(45% + ((50% - 45%) * 0.7)),color-mix(in oklch, red 20%, blue 80%) calc(45% + ((50% - 45%) * 0.8)),color-mix(in oklch, red 10%, blue 90%) calc(45% + ((50% - 45%) * 0.9)),blue 50%,blue 75%); - --gradient-prop-2: linear-gradient(in oklch 90deg, black 25%, red 45%, blue 50% 75%); - --gradient-prop-3: radial-gradient(cyan 0%,color-mix(in oklch, cyan 90%, transparent 10%) calc(0% + ((20% - 0%) * 0.1)),color-mix(in oklch, cyan 80%, transparent 20%) calc(0% + ((20% - 0%) * 0.2)),color-mix(in oklch, cyan 70%, transparent 30%) calc(0% + ((20% - 0%) * 0.3)),color-mix(in oklch, cyan 60%, transparent 40%) calc(0% + ((20% - 0%) * 0.4)),color-mix(in oklch, cyan 50%, transparent 50%) calc(0% + ((20% - 0%) * 0.5)),color-mix(in oklch, cyan 40%, transparent 60%) calc(0% + ((20% - 0%) * 0.6)),color-mix(in oklch, cyan 30%, transparent 70%) calc(0% + ((20% - 0%) * 0.7)),color-mix(in oklch, cyan 20%, transparent 80%) calc(0% + ((20% - 0%) * 0.8)),color-mix(in oklch, cyan 10%, transparent 90%) calc(0% + ((20% - 0%) * 0.9)),transparent 20%,transparent 30%,color-mix(in oklch, transparent 90%, salmon 10%) calc(30% + ((40% - 30%) * 0.1)),color-mix(in oklch, transparent 80%, salmon 20%) calc(30% + ((40% - 30%) * 0.2)),color-mix(in oklch, transparent 70%, salmon 30%) calc(30% + ((40% - 30%) * 0.3)),color-mix(in oklch, transparent 60%, salmon 40%) calc(30% + ((40% - 30%) * 0.4)),color-mix(in oklch, transparent 50%, salmon 50%) calc(30% + ((40% - 30%) * 0.5)),color-mix(in oklch, transparent 40%, salmon 60%) calc(30% + ((40% - 30%) * 0.6)),color-mix(in oklch, transparent 30%, salmon 70%) calc(30% + ((40% - 30%) * 0.7)),color-mix(in oklch, transparent 20%, salmon 80%) calc(30% + ((40% - 30%) * 0.8)),color-mix(in oklch, transparent 10%, salmon 90%) calc(30% + ((40% - 30%) * 0.9)),salmon 40%); - --gradient-prop-3: radial-gradient(in oklch, cyan 0%, transparent 20% 30%, salmon 40%); - --gradient-prop-4: repeating-conic-gradient(from 0deg ,yellowgreen 40deg,color-mix(in oklch, yellowgreen 90%, gold 10%) calc(40deg + ((60deg - 40deg) * 0.1)),color-mix(in oklch, yellowgreen 80%, gold 20%) calc(40deg + ((60deg - 40deg) * 0.2)),color-mix(in oklch, yellowgreen 70%, gold 30%) calc(40deg + ((60deg - 40deg) * 0.3)),color-mix(in oklch, yellowgreen 60%, gold 40%) calc(40deg + ((60deg - 40deg) * 0.4)),color-mix(in oklch, yellowgreen 50%, gold 50%) calc(40deg + ((60deg - 40deg) * 0.5)),color-mix(in oklch, yellowgreen 40%, gold 60%) calc(40deg + ((60deg - 40deg) * 0.6)),color-mix(in oklch, yellowgreen 30%, gold 70%) calc(40deg + ((60deg - 40deg) * 0.7)),color-mix(in oklch, yellowgreen 20%, gold 80%) calc(40deg + ((60deg - 40deg) * 0.8)),color-mix(in oklch, yellowgreen 10%, gold 90%) calc(40deg + ((60deg - 40deg) * 0.9)),gold 60deg,gold 75deg,color-mix(in oklch, gold 90%, #f06 10%) calc(75deg + ((0deg - 75deg) * 0.1)),color-mix(in oklch, gold 80%, #f06 20%) calc(75deg + ((0deg - 75deg) * 0.2)),color-mix(in oklch, gold 70%, #f06 30%) calc(75deg + ((0deg - 75deg) * 0.3)),color-mix(in oklch, gold 60%, #f06 40%) calc(75deg + ((0deg - 75deg) * 0.4)),color-mix(in oklch, gold 50%, #f06 50%) calc(75deg + ((0deg - 75deg) * 0.5)),color-mix(in oklch, gold 40%, #f06 60%) calc(75deg + ((0deg - 75deg) * 0.6)),color-mix(in oklch, gold 30%, #f06 70%) calc(75deg + ((0deg - 75deg) * 0.7)),color-mix(in oklch, gold 20%, #f06 80%) calc(75deg + ((0deg - 75deg) * 0.8)),color-mix(in oklch, gold 10%, #f06 90%) calc(75deg + ((0deg - 75deg) * 0.9)),#f06 0deg); - --gradient-prop-4: repeating-conic-gradient(in oklch from 0deg, yellowgreen 40deg, gold 60deg 75deg, #f06 0deg); - --gradient-prop-5: repeating-linear-gradient(90deg ,black 25%,black 50%,color-mix(in oklch, black 90%, blue 10%) calc(50% + ((50% - 50%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(50% + ((50% - 50%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(50% + ((50% - 50%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(50% + ((50% - 50%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(50% + ((50% - 50%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(50% + ((50% - 50%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(50% + ((50% - 50%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(50% + ((50% - 50%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(50% + ((50% - 50%) * 0.9)),blue 50%,blue 75%); - --gradient-prop-5: repeating-linear-gradient(in oklch 90deg, black 25% 50%, blue 50% 75%); - --gradient-prop-6: repeating-radial-gradient(red 0,red 8%,color-mix(in oklch, red 90%, yellow 10%) calc(8% + ((8% - 8%) * 0.1)),color-mix(in oklch, red 80%, yellow 20%) calc(8% + ((8% - 8%) * 0.2)),color-mix(in oklch, red 70%, yellow 30%) calc(8% + ((8% - 8%) * 0.3)),color-mix(in oklch, red 60%, yellow 40%) calc(8% + ((8% - 8%) * 0.4)),color-mix(in oklch, red 50%, yellow 50%) calc(8% + ((8% - 8%) * 0.5)),color-mix(in oklch, red 40%, yellow 60%) calc(8% + ((8% - 8%) * 0.6)),color-mix(in oklch, red 30%, yellow 70%) calc(8% + ((8% - 8%) * 0.7)),color-mix(in oklch, red 20%, yellow 80%) calc(8% + ((8% - 8%) * 0.8)),color-mix(in oklch, red 10%, yellow 90%) calc(8% + ((8% - 8%) * 0.9)),yellow 8%,yellow 16%,color-mix(in oklch, yellow 90%, blue 10%) calc(16% + ((16% - 16%) * 0.1)),color-mix(in oklch, yellow 80%, blue 20%) calc(16% + ((16% - 16%) * 0.2)),color-mix(in oklch, yellow 70%, blue 30%) calc(16% + ((16% - 16%) * 0.3)),color-mix(in oklch, yellow 60%, blue 40%) calc(16% + ((16% - 16%) * 0.4)),color-mix(in oklch, yellow 50%, blue 50%) calc(16% + ((16% - 16%) * 0.5)),color-mix(in oklch, yellow 40%, blue 60%) calc(16% + ((16% - 16%) * 0.6)),color-mix(in oklch, yellow 30%, blue 70%) calc(16% + ((16% - 16%) * 0.7)),color-mix(in oklch, yellow 20%, blue 80%) calc(16% + ((16% - 16%) * 0.8)),color-mix(in oklch, yellow 10%, blue 90%) calc(16% + ((16% - 16%) * 0.9)),blue 16%,blue 24%); - --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); +.test-missing-position-1 { + background-image: linear-gradient(in oklch, red, green 45%, blue); +} + +.test-missing-position-2 { + background-image: linear-gradient(in oklch, red 0%, green, blue 100%); +} + +.test-missing-color { + background-image: linear-gradient(in oklch, red 0%, 25%, blue 100%); +} + +.test-visual-effect-1-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(230, 147, 147), rgb(215, 157, 157), rgb(200, 167, 167), rgb(185, 177, 177), rgb(170, 187, 187), rgb(155, 197, 197), rgb(140, 207, 207), rgb(125, 217, 217), rgb(109, 227, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in srgb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-2-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in srgb-linear, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-3-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(238, 149, 147), rgb(229, 160, 156), rgb(219, 171, 166), rgb(209, 181, 176), rgb(197, 191, 186), rgb(183, 201, 196), rgb(168, 210, 206), rgb(149, 219, 216), rgb(126, 228, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-4-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(237, 149, 147), rgb(229, 161, 157), rgb(219, 171, 167), rgb(208, 182, 177), rgb(196, 192, 187), rgb(183, 201, 197), rgb(167, 210, 207), rgb(149, 220, 217), rgb(126, 228, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-5-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-6-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz-d65, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-7-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz-d50, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 128, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 115, 242), rgb(137, 111, 241), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1), color(display-p3 0.66124 0.77478 1), color(display-p3 0.59127 0.81803 1), color(display-p3 0.52052 0.85831 1), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1), color(display-p3 0.66124 0.77478 1), color(display-p3 0.59127 0.81803 1), color(display-p3 0.52052 0.85831 1), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-a { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-b { + background-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%); + background-image: linear-gradient(in oklch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-c { + 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), color(display-p3 0.66943 0.75326 1), color(display-p3 0.61041 0.80007 1), color(display-p3 0.54198 0.8462 1), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-d { + background-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%); + background-image: linear-gradient(in oklch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-e { + 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), color(display-p3 0.66943 0.75326 1), color(display-p3 0.61041 0.80007 1), color(display-p3 0.54198 0.8462 1), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-1-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(61, 80, 42), rgb(66, 74, 49), rgb(71, 67, 56), rgb(76, 61, 63), rgb(81, 54, 70), rgb(86, 47, 76), rgb(91, 41, 83), rgb(96, 34, 90), rgb(101, 28, 97), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in srgb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-2-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in srgb-linear, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-3-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 44), rgb(71, 78, 51), rgb(77, 73, 58), rgb(83, 68, 65), rgb(87, 63, 72), rgb(92, 57, 78), rgb(96, 50, 85), rgb(100, 43, 91), rgb(103, 33, 97), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-4-2 { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-5-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-6-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz-d65, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-7-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz-d50, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 0 0.33649 0.31294), color(display-p3 0 0.32263 0.36999), color(display-p3 0 0.30878 0.41269), color(display-p3 0 0.2945 0.45883), color(display-p3 0 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 0 0.33649 0.31294), color(display-p3 0 0.32263 0.36999), color(display-p3 0 0.30878 0.41269), color(display-p3 0 0.2945 0.45883), color(display-p3 0 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 0 0.34584 0.34631), color(display-p3 0 0.33067 0.4127), color(display-p3 0 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 0 0.34584 0.34631), color(display-p3 0 0.33067 0.4127), color(display-p3 0 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.patterns-1 { + background: + conic-gradient( from -45deg, rgb(235, 104, 65) 90deg, rgba(235, 104, 65, 0.9), rgba(235, 104, 65, 0.8), rgba(235, 104, 65, 0.7), rgba(235, 104, 65, 0.6), rgba(235, 104, 65, 0.5), rgba(235, 104, 65, 0.4), rgba(235, 104, 65, 0.3), rgba(235, 104, 65, 0.2), rgba(235, 104, 65, 0.1), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 180deg, rgba(237, 201, 81, 0.1), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.9), rgb(237, 201, 81) 0, rgb(237, 201, 81) 270deg, rgba(237, 201, 81, 0.9), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.1), rgba(0, 0, 0, 0) 0) 0 calc(64px/2)/64px 64px, + conic-gradient( from 135deg at 50% 0, rgb(235, 104, 65) 90deg, rgb(238, 114, 58), rgb(240, 123, 53), rgb(242, 133, 48), rgb(243, 143, 45), rgb(244, 153, 44), rgb(243, 162, 47), rgb(243, 172, 53), rgb(241, 182, 60), rgb(239, 192, 70), rgb(237, 201, 81) 0) 0 0/calc(2*64px) 64px; + background: + conic-gradient(in oklch from -45deg, #EB6841 90deg, #0000 0 180deg, #EDC951 0 270deg, #0000 0) 0 calc(64px/2)/64px 64px, + conic-gradient(in oklch from 135deg at 50% 0, #EB6841 90deg, #EDC951 0) 0 0/calc(2*64px) 64px; +} + +.patterns-2 { + background: + conic-gradient( at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, + linear-gradient(#53777A 20px, #0000 0) 0 15px, + conic-gradient(at 20px calc(100% - 20px) , rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), + #ECD078; + background: + conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0, + linear-gradient(#53777A 20px, #0000 0) 0 15px, + conic-gradient(at 20px calc(100% - 20px) in hsl longer hue, #0000 90deg, #53777A 0 180deg, #C02942 0), + #ECD078; +} + +.manual_fallback { + background-image: red; + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +to-clone { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css new file mode 100644 index 000000000..e4056b929 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css @@ -0,0 +1,356 @@ +.test-1 { + --perc-50: 50%; + background-image: linear-gradient( 90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), color(display-p3 0.00029 0 0.02873), color(display-p3 0.00017 0 0.11197), color(display-p3 0 0 0.20487), color(display-p3 0 0 0.30489), color(display-p3 0 0 0.41072), color(display-p3 0 0 0.52175), color(display-p3 0 0 0.63725), color(display-p3 0 0 0.75659), color(display-p3 0 0 0.8797), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%); +} + +.test-2-0 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 0 0.41862), color(display-p3 0.80547 0 0.53001), color(display-p3 0.74092 0 0.63538), color(display-p3 0.66511 0 0.7332), color(display-p3 0.57951 0 0.81971), color(display-p3 0.4848 0 0.89016), color(display-p3 0.37932 0 0.93966), color(display-p3 0.25342 0 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%); +} + +.test-2-1 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in oklab 90deg, red 25% 50%, blue 70% 75%); +} + +.test-2-2 { + background-image: linear-gradient( 90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%); +} + +.test-2-3 { + background-image: linear-gradient(90deg , rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); + background-image: linear-gradient(90deg in oklab, red 25% 50%, blue 70% 75%); +} + +.test-3 { + --red: red; + /* Color stop variable */ + background-image: linear-gradient(in oklch 90deg, black, var(--red), blue); +} + +.test-4 { + --perc-10: 10%; + /* Interpolation hint */ + background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); +} + +.test-missing-position-1 { + background-image: linear-gradient(in oklch, red, green 45%, blue); +} + +.test-missing-position-2 { + background-image: linear-gradient(in oklch, red 0%, green, blue 100%); +} + +.test-missing-color { + background-image: linear-gradient(in oklch, red 0%, 25%, blue 100%); +} + +.test-visual-effect-1-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(230, 147, 147), rgb(215, 157, 157), rgb(200, 167, 167), rgb(185, 177, 177), rgb(170, 187, 187), rgb(155, 197, 197), rgb(140, 207, 207), rgb(125, 217, 217), rgb(109, 227, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in srgb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-2-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in srgb-linear, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-3-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(238, 149, 147), rgb(229, 160, 156), rgb(219, 171, 166), rgb(209, 181, 176), rgb(197, 191, 186), rgb(183, 201, 196), rgb(168, 210, 206), rgb(149, 219, 216), rgb(126, 228, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-4-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(237, 149, 147), rgb(229, 161, 157), rgb(219, 171, 167), rgb(208, 182, 177), rgb(196, 192, 187), rgb(183, 201, 197), rgb(167, 210, 207), rgb(149, 220, 217), rgb(126, 228, 227), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-5-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-6-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz-d65, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-7-1 { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in xyz-d50, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-8-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 128, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 115, 242), rgb(137, 111, 241), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hsl decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-9-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in hwb decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-a { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-b { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-c { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1), color(display-p3 0.66124 0.77478 1), color(display-p3 0.59127 0.81803 1), color(display-p3 0.52052 0.85831 1), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-d { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-10-1-e { + background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1), color(display-p3 0.66124 0.77478 1), color(display-p3 0.59127 0.81803 1), color(display-p3 0.52052 0.85831 1), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in lch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-a { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-b { + background-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%); + background-image: linear-gradient(in oklch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-c { + 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), color(display-p3 0.66943 0.75326 1), color(display-p3 0.61041 0.80007 1), color(display-p3 0.54198 0.8462 1), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-d { + background-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%); + background-image: linear-gradient(in oklch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-11-1-e { + 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), color(display-p3 0.66943 0.75326 1), color(display-p3 0.61041 0.80007 1), color(display-p3 0.54198 0.8462 1), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + +.test-visual-effect-1-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(61, 80, 42), rgb(66, 74, 49), rgb(71, 67, 56), rgb(76, 61, 63), rgb(81, 54, 70), rgb(86, 47, 76), rgb(91, 41, 83), rgb(96, 34, 90), rgb(101, 28, 97), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in srgb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-2-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in srgb-linear, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-3-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 44), rgb(71, 78, 51), rgb(77, 73, 58), rgb(83, 68, 65), rgb(87, 63, 72), rgb(92, 57, 78), rgb(96, 50, 85), rgb(100, 43, 91), rgb(103, 33, 97), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-4-2 { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-5-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-6-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz-d65, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-7-2 { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in xyz-d50, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-8-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hsl decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-9-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 0 0.33649 0.31294), color(display-p3 0 0.32263 0.36999), color(display-p3 0 0.30878 0.41269), color(display-p3 0 0.2945 0.45883), color(display-p3 0 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 0 0.33649 0.31294), color(display-p3 0 0.32263 0.36999), color(display-p3 0 0.30878 0.41269), color(display-p3 0 0.2945 0.45883), color(display-p3 0 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-10-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in lch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-a { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-b { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-c { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 0 0.34584 0.34631), color(display-p3 0 0.33067 0.4127), color(display-p3 0 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-d { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 0 0.34584 0.34631), color(display-p3 0 0.33067 0.4127), color(display-p3 0 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.test-visual-effect-11-2-e { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 0), color(display-p3 0.405 0.23566 0), color(display-p3 0.43044 0.20092 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in oklch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +.patterns-1 { + background: + conic-gradient( from -45deg, rgb(235, 104, 65) 90deg, rgba(235, 104, 65, 0.9), rgba(235, 104, 65, 0.8), rgba(235, 104, 65, 0.7), rgba(235, 104, 65, 0.6), rgba(235, 104, 65, 0.5), rgba(235, 104, 65, 0.4), rgba(235, 104, 65, 0.3), rgba(235, 104, 65, 0.2), rgba(235, 104, 65, 0.1), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 180deg, rgba(237, 201, 81, 0.1), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.9), rgb(237, 201, 81) 0, rgb(237, 201, 81) 270deg, rgba(237, 201, 81, 0.9), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.1), rgba(0, 0, 0, 0) 0) 0 calc(64px/2)/64px 64px, + conic-gradient( from 135deg at 50% 0, rgb(235, 104, 65) 90deg, rgb(238, 114, 58), rgb(240, 123, 53), rgb(242, 133, 48), rgb(243, 143, 45), rgb(244, 153, 44), rgb(243, 162, 47), rgb(243, 172, 53), rgb(241, 182, 60), rgb(239, 192, 70), rgb(237, 201, 81) 0) 0 0/calc(2*64px) 64px; + background: + conic-gradient(in oklch from -45deg, #EB6841 90deg, #0000 0 180deg, #EDC951 0 270deg, #0000 0) 0 calc(64px/2)/64px 64px, + conic-gradient(in oklch from 135deg at 50% 0, #EB6841 90deg, #EDC951 0) 0 0/calc(2*64px) 64px; +} + +.patterns-2 { + background: + conic-gradient( at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, + linear-gradient(#53777A 20px, #0000 0) 0 15px, + conic-gradient(at 20px calc(100% - 20px) , rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), + #ECD078; + background: + conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0, + linear-gradient(#53777A 20px, #0000 0) 0 15px, + conic-gradient(at 20px calc(100% - 20px) in hsl longer hue, #0000 90deg, #53777A 0 180deg, #C02942 0), + #ECD078; +} + +.manual_fallback { + background-image: red; + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +cloned { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} + +to-clone { + background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); + background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); +} diff --git a/plugins/postcss-gradients-interpolation-method/test/examples/example.css b/plugins/postcss-gradients-interpolation-method/test/examples/example.css index e151b08eb..57c6f4c83 100644 --- a/plugins/postcss-gradients-interpolation-method/test/examples/example.css +++ b/plugins/postcss-gradients-interpolation-method/test/examples/example.css @@ -1,7 +1,7 @@ -.oklch { - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); +.example { + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css b/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css index 6f4d926ce..453a817e1 100644 --- a/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css @@ -1,14 +1,9 @@ -.oklch { - background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); -} - -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { -:root { - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); -} +.example { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/examples/example.preserve-true.expect.css b/plugins/postcss-gradients-interpolation-method/test/examples/example.preserve-true.expect.css index 6f4d926ce..453a817e1 100644 --- a/plugins/postcss-gradients-interpolation-method/test/examples/example.preserve-true.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/examples/example.preserve-true.expect.css @@ -1,14 +1,9 @@ -.oklch { - background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); -} - -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { -:root { - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); -} +.example { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/examples/example.preserve-true.progressive-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/examples/example.preserve-true.progressive-false.expect.css index 7b8499673..453a817e1 100644 --- a/plugins/postcss-gradients-interpolation-method/test/examples/example.preserve-true.progressive-false.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/examples/example.preserve-true.progressive-false.expect.css @@ -1,9 +1,9 @@ -.oklch { - background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); - background: linear-gradient(in oklch 90deg, black 25% , blue 75%); +.example { + background-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%); + background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } -:root { - --background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%); - --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); +.example { + 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%); + background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.css b/plugins/postcss-gradients-interpolation-method/test/variables.css new file mode 100644 index 000000000..ae8892cc1 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/test/variables.css @@ -0,0 +1,8 @@ +:root { + --gradient-prop-1: conic-gradient(in oklch, cyan 0deg, gold 45deg, gold 50deg, #f06 180deg, blue 100%); + --gradient-prop-2: linear-gradient(in oklch 90deg, black 25%, red 45%, blue 50% 75%); + --gradient-prop-3: radial-gradient(in oklch, cyan 0%, transparent 20% 30%, salmon 40%); + --gradient-prop-4: repeating-conic-gradient(in oklch from 0deg, yellowgreen 40deg, gold 60deg 75deg, #f06 0deg); + --gradient-prop-5: repeating-linear-gradient(in oklch 90deg, black 25% 50%, blue 50% 75%); + --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); +} diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.expect.css new file mode 100644 index 000000000..d9848a2ec --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/test/variables.expect.css @@ -0,0 +1,44 @@ +:root { + --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1 0.72781 0.07954), color(display-p3 1 0.66411 0), color(display-p3 1 0.59891 0), color(display-p3 1 0.53272 0.03345), color(display-p3 1 0.46604 0.13763), color(display-p3 1 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 0 0.87762), color(display-p3 0.44998 0 0.92496), color(display-p3 0.35136 0 0.956), color(display-p3 0.23382 0 0.9682), rgb(0, 0, 255) 100%); + --gradient-prop-2: linear-gradient( 90deg, rgb(0, 0, 0) 25%, color(display-p3 0.02011 0 0), color(display-p3 0.09788 0 0), color(display-p3 0.18929 0 0), color(display-p3 0.28819 0 0), color(display-p3 0.39308 0 0), color(display-p3 0.5032 0 0), color(display-p3 0.61778 0 0), color(display-p3 0.73647 0 0), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 0 0.41862), color(display-p3 0.80547 0 0.53001), color(display-p3 0.74092 0 0.63538), color(display-p3 0.66511 0 0.7332), color(display-p3 0.57951 0 0.81971), color(display-p3 0.4848 0 0.89016), color(display-p3 0.37932 0 0.93966), color(display-p3 0.25342 0 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-3: radial-gradient(rgb(0, 255, 255) 0%, rgba(0, 255, 255, 0.9), rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0.7), rgba(0, 255, 255, 0.6), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 30%, rgba(250, 128, 114, 0.1), rgba(250, 128, 114, 0.2), rgba(250, 128, 114, 0.3), rgba(250, 128, 114, 0.4), rgba(250, 128, 114, 0.5), rgba(250, 128, 114, 0.6), rgba(250, 128, 114, 0.7), rgba(250, 128, 114, 0.8), rgba(250, 128, 114, 0.9), rgb(250, 128, 114) 40%); + --gradient-prop-4: repeating-conic-gradient( from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1 0.72781 0.07954), color(display-p3 1 0.66411 0), color(display-p3 1 0.59891 0), color(display-p3 1 0.53272 0.03345), color(display-p3 1 0.46604 0.13763), color(display-p3 1 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); + --gradient-prop-5: repeating-linear-gradient( 90deg, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); +} + +@supports (background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg)) { +:root { + --gradient-prop-1: conic-gradient(in oklch, cyan 0deg, gold 45deg, gold 50deg, #f06 180deg, blue 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { +:root { + --gradient-prop-2: linear-gradient(in oklch 90deg, black 25%, red 45%, blue 50% 75%); +} +} + +@supports (background: radial-gradient(in oklch, red, red 1px 2px, red 3px)) { +:root { + --gradient-prop-3: radial-gradient(in oklch, cyan 0%, transparent 20% 30%, salmon 40%); +} +} + +@supports (background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg)) { +:root { + --gradient-prop-4: repeating-conic-gradient(in oklch from 0deg, yellowgreen 40deg, gold 60deg 75deg, #f06 0deg); +} +} + +@supports (background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { +:root { + --gradient-prop-5: repeating-linear-gradient(in oklch 90deg, black 25% 50%, blue 50% 75%); +} +} + +@supports (background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px)) { +:root { + --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); +} +} diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css new file mode 100644 index 000000000..fb33ace14 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css @@ -0,0 +1,8 @@ +:root { + --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1 0.72781 0.07954), color(display-p3 1 0.66411 0), color(display-p3 1 0.59891 0), color(display-p3 1 0.53272 0.03345), color(display-p3 1 0.46604 0.13763), color(display-p3 1 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 0 0.87762), color(display-p3 0.44998 0 0.92496), color(display-p3 0.35136 0 0.956), color(display-p3 0.23382 0 0.9682), rgb(0, 0, 255) 100%); + --gradient-prop-2: linear-gradient( 90deg, rgb(0, 0, 0) 25%, color(display-p3 0.02011 0 0), color(display-p3 0.09788 0 0), color(display-p3 0.18929 0 0), color(display-p3 0.28819 0 0), color(display-p3 0.39308 0 0), color(display-p3 0.5032 0 0), color(display-p3 0.61778 0 0), color(display-p3 0.73647 0 0), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 0 0.41862), color(display-p3 0.80547 0 0.53001), color(display-p3 0.74092 0 0.63538), color(display-p3 0.66511 0 0.7332), color(display-p3 0.57951 0 0.81971), color(display-p3 0.4848 0 0.89016), color(display-p3 0.37932 0 0.93966), color(display-p3 0.25342 0 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-3: radial-gradient(rgb(0, 255, 255) 0%, rgba(0, 255, 255, 0.9), rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0.7), rgba(0, 255, 255, 0.6), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 30%, rgba(250, 128, 114, 0.1), rgba(250, 128, 114, 0.2), rgba(250, 128, 114, 0.3), rgba(250, 128, 114, 0.4), rgba(250, 128, 114, 0.5), rgba(250, 128, 114, 0.6), rgba(250, 128, 114, 0.7), rgba(250, 128, 114, 0.8), rgba(250, 128, 114, 0.9), rgb(250, 128, 114) 40%); + --gradient-prop-4: repeating-conic-gradient( from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1 0.72781 0.07954), color(display-p3 1 0.66411 0), color(display-p3 1 0.59891 0), color(display-p3 1 0.53272 0.03345), color(display-p3 1 0.46604 0.13763), color(display-p3 1 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); + --gradient-prop-5: repeating-linear-gradient( 90deg, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); +} diff --git a/plugins/postcss-lab-function/dist/index.cjs b/plugins/postcss-lab-function/dist/index.cjs index a19abca06..b47c81346 100644 --- a/plugins/postcss-lab-function/dist/index.cjs +++ b/plugins/postcss-lab-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-lab-function",Declaration:n=>{if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const i=n.value;if(!o.test(i.toLowerCase()))return;const l=s.tokenize({css:i}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(l),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),c=t.stringify(u);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(l)),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-lab-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-lab-function",Declaration:n=>{const i=n.value;if(!o.test(i.toLowerCase()))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const l=s.tokenize({css:i}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(l),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),c=t.stringify(u);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(l)),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-lab-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-lab-function/dist/index.mjs b/plugins/postcss-lab-function/dist/index.mjs index 52bb2dd53..c0b696dd1 100644 --- a/plugins/postcss-lab-function/dist/index.mjs +++ b/plugins/postcss-lab-function/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-lab-function",Declaration:b=>{if(hasFallback(b))return;if(hasSupportsAtRuleAncestor(b))return;const d=b.value;if(!f.test(d.toLowerCase()))return;const g=e({css:d}),y=l(i(g),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return a(e)}})),P=c(y);if(P===d)return;let h=P;null!=s&&s.subFeatures.displayP3&&(h=c(l(i(r(g)),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return n(e)?a(e):u(e)}})))),b.cloneBefore({value:P}),null!=s&&s.subFeatures.displayP3&&h!==P&&b.cloneBefore({value:h}),null!=s&&s.preserve||b.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-lab-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-lab-function",Declaration:b=>{const d=b.value;if(!f.test(d.toLowerCase()))return;if(hasFallback(b))return;if(hasSupportsAtRuleAncestor(b))return;const g=e({css:d}),y=l(i(g),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return a(e)}})),P=c(y);if(P===d)return;let h=P;null!=s&&s.subFeatures.displayP3&&(h=c(l(i(r(g)),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return n(e)?a(e):u(e)}})))),b.cloneBefore({value:P}),null!=s&&s.subFeatures.displayP3&&h!==P&&b.cloneBefore({value:h}),null!=s&&s.preserve||b.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-lab-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-lab-function/src/index.ts b/plugins/postcss-lab-function/src/index.ts index 5496ac474..dd690476d 100644 --- a/plugins/postcss-lab-function/src/index.ts +++ b/plugins/postcss-lab-function/src/index.ts @@ -22,16 +22,16 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return { postcssPlugin: 'postcss-lab-function', Declaration: (decl: Declaration) => { - if (hasFallback(decl)) { + const originalValue = decl.value; + if (!(lab_lch_functionRegex.test(originalValue.toLowerCase()))) { return; } - if (hasSupportsAtRuleAncestor(decl)) { + if (hasFallback(decl)) { return; } - const originalValue = decl.value; - if (!(lab_lch_functionRegex.test(originalValue.toLowerCase()))) { + if (hasSupportsAtRuleAncestor(decl)) { return; } diff --git a/plugins/postcss-oklab-function/dist/index.cjs b/plugins/postcss-oklab-function/dist/index.cjs index 3c9630e8c..b5ba02518 100644 --- a/plugins/postcss-oklab-function/dist/index.cjs +++ b/plugins/postcss-oklab-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-oklab-function",Declaration:n=>{if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const i=n.value;if(!o.test(i.toLowerCase()))return;const l=s.tokenize({css:i}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(l),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),c=t.stringify(u);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(l)),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-oklab-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-oklab-function",Declaration:n=>{const i=n.value;if(!o.test(i.toLowerCase()))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const l=s.tokenize({css:i}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(l),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),c=t.stringify(u);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(l)),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-oklab-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-oklab-function/dist/index.mjs b/plugins/postcss-oklab-function/dist/index.mjs index 386a1bdd8..f0fdbcb02 100644 --- a/plugins/postcss-oklab-function/dist/index.mjs +++ b/plugins/postcss-oklab-function/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-oklab-function",Declaration:b=>{if(hasFallback(b))return;if(hasSupportsAtRuleAncestor(b))return;const d=b.value;if(!f.test(d.toLowerCase()))return;const g=e({css:d}),k=l(i(g),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return a(e)}})),y=c(k);if(y===d)return;let P=y;null!=s&&s.subFeatures.displayP3&&(P=c(l(i(r(g)),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return n(e)?a(e):u(e)}})))),b.cloneBefore({value:y}),null!=s&&s.subFeatures.displayP3&&P!==y&&b.cloneBefore({value:P}),null!=s&&s.preserve||b.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-oklab-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-oklab-function",Declaration:b=>{const d=b.value;if(!f.test(d.toLowerCase()))return;if(hasFallback(b))return;if(hasSupportsAtRuleAncestor(b))return;const g=e({css:d}),k=l(i(g),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return a(e)}})),y=c(k);if(y===d)return;let P=y;null!=s&&s.subFeatures.displayP3&&(P=c(l(i(r(g)),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return n(e)?a(e):u(e)}})))),b.cloneBefore({value:y}),null!=s&&s.subFeatures.displayP3&&P!==y&&b.cloneBefore({value:P}),null!=s&&s.preserve||b.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-oklab-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-oklab-function/src/index.ts b/plugins/postcss-oklab-function/src/index.ts index 82f68bb47..ff47fcab1 100644 --- a/plugins/postcss-oklab-function/src/index.ts +++ b/plugins/postcss-oklab-function/src/index.ts @@ -22,16 +22,16 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return { postcssPlugin: 'postcss-oklab-function', Declaration: (decl: Declaration) => { - if (hasFallback(decl)) { + const originalValue = decl.value; + if (!(oklab_oklch_functionRegex.test(originalValue.toLowerCase()))) { return; } - if (hasSupportsAtRuleAncestor(decl)) { + if (hasFallback(decl)) { return; } - const originalValue = decl.value; - if (!(oklab_oklch_functionRegex.test(originalValue.toLowerCase()))) { + if (hasSupportsAtRuleAncestor(decl)) { return; }