From 18e1a68f7886b32ff2d9a40679e26b5dd770f4bb Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 24 Mar 2023 00:13:50 +0100 Subject: [PATCH 1/4] wip --- .../dist/color-mix.d.ts | 1 + .../dist/color-stop-list.d.ts | 11 +- .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../dist/is-gradient.d.ts | 4 +- .../package.json | 3 + .../src/color-mix.ts | 24 ++ .../src/color-stop-list.ts | 141 +++---- .../src/has-supports-at-rule-ancestor.ts | 4 +- .../src/index.ts | 385 ++++++++++-------- .../src/is-gradient.ts | 25 +- .../test/basic.css | 21 +- .../test/basic.expect.css | 58 +-- .../test/basic.preserve-false.expect.css | 33 +- ...preserve-true.progressive-false.expect.css | 29 +- .../test/examples/example.expect.css | 4 +- .../examples/example.preserve-true.expect.css | 4 +- ...preserve-true.progressive-false.expect.css | 4 +- 18 files changed, 402 insertions(+), 353 deletions(-) create mode 100644 plugins/postcss-gradients-interpolation-method/dist/color-mix.d.ts create mode 100644 plugins/postcss-gradients-interpolation-method/src/color-mix.ts diff --git a/plugins/postcss-gradients-interpolation-method/dist/color-mix.d.ts b/plugins/postcss-gradients-interpolation-method/dist/color-mix.d.ts new file mode 100644 index 000000000..b8730b829 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/dist/color-mix.d.ts @@ -0,0 +1 @@ +export declare function colorMix(x: string): string; 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..9b4a284f1 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,7 @@ -import type { Node } from 'postcss-value-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; + 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/index.cjs b/plugins/postcss-gradients-interpolation-method/dist/index.cjs index 77889339d..519c2d0a5 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-color-parser"),n=require("@csstools/css-parser-algorithms"),i=require("@csstools/css-tokenizer");function interpolateColorsInColorStopsList(e,s,t){const r=[];for(let l=0;l({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(u){if(!s.test(u.value))return;if(hasSupportsAtRuleAncestor(u))return;const d=i.tokenize({css:u.value}),T=n.stringify(n.replaceComponentValues(n.parseCommaSeparatedListOfComponentValues(d),(e=>{if(!n.isFunctionNode(e))return;const s=e.getName();if(!t.test(s))return;let u="srgb",d=null,T=null,v=null,h=null,k=null,m=[];{let o=0,s=e.value[o];for(;!n.isTokenNode(s)||s.value[0]!==i.TokenType.Ident||!p.test(s.value[4].value);){if(n.isTokenNode(s)&&s.value[0]===i.TokenType.Comma)return;o++,s=e.value[o]}for(d=s,o++,s=e.value[o];n.isCommentNode(s)||n.isWhitespaceNode(s);)o++,s=e.value[o];if(n.isTokenNode(s)&&s.value[0]===i.TokenType.Ident&&r.test(s.value[4].value)){if(T)return;T=s,u=s.value[4].value,o++,s=e.value[o]}for(;n.isCommentNode(s)||n.isWhitespaceNode(s);)o++,s=e.value[o];if(n.isTokenNode(s)&&s.value[0]===i.TokenType.Ident&&a.test(s.value[4].value)&&l.test(u)){if(v||!T)return;v=s,o++,s=e.value[o]}for(;n.isCommentNode(s)||n.isWhitespaceNode(s);)o++,s=e.value[o];if(n.isTokenNode(s)&&s.value[0]===i.TokenType.Ident&&c.test(s.value[4].value)){if(h||!T||!v)return;h=s,o++,s=e.value[o]}for(;!n.isTokenNode(s)||s.value[0]!==i.TokenType.Comma;)o++,s=e.value[o];k=s,m=e.value.slice(o+1)}if(!T)return;if(v&&!h)return;if(h&&!v)return;const f=[];let N={};for(let e=0;e0&&g.some((e=>!n.isCommentNode(e)&&!n.isWhitespaceNode(e)))&&g.push(new n.TokenNode([i.TokenType.Comma,",",-1,-1,void 0])),e.value=[...g,...y]})));T!==u.value&&(u.cloneBefore({value:T}),null!=e&&e.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=o=>{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; diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.mjs b/plugins/postcss-gradients-interpolation-method/dist/index.mjs index 18103efe0..9e98095f7 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 e from"@csstools/postcss-progressive-custom-properties";import{color as o,serializeRGB as t}from"@csstools/css-color-parser";import{WhitespaceNode as s,TokenNode as i,FunctionNode as n,stringify as r,replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as a,isFunctionNode as u,isTokenNode as c,isCommentNode as p,isWhitespaceNode as v}from"@csstools/css-parser-algorithms";import{TokenType as f,tokenize as h}from"@csstools/css-tokenizer";function interpolateColorsInColorStopsList(e,r,l){const a=[];for(let u=0;u({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(t){if(!d.test(t.value))return;if(hasSupportsAtRuleAncestor(t))return;const s=h({css:t.value}),n=r(l(a(s),(e=>{if(!u(e))return;const t=e.getName();if(!m.test(t))return;let s="srgb",n=null,r=null,l=null,a=null,h=null,d=[];{let o=0,t=e.value[o];for(;!c(t)||t.value[0]!==f.Ident||!A.test(t.value[4].value);){if(c(t)&&t.value[0]===f.Comma)return;o++,t=e.value[o]}for(n=t,o++,t=e.value[o];p(t)||v(t);)o++,t=e.value[o];if(c(t)&&t.value[0]===f.Ident&&g.test(t.value[4].value)){if(r)return;r=t,s=t.value[4].value,o++,t=e.value[o]}for(;p(t)||v(t);)o++,t=e.value[o];if(c(t)&&t.value[0]===f.Ident&&C.test(t.value[4].value)&&w.test(s)){if(l||!r)return;l=t,o++,t=e.value[o]}for(;p(t)||v(t);)o++,t=e.value[o];if(c(t)&&t.value[0]===f.Ident&&W.test(t.value[4].value)){if(a||!r||!l)return;a=t,o++,t=e.value[o]}for(;!c(t)||t.value[0]!==f.Comma;)o++,t=e.value[o];h=t,d=e.value.slice(o+1)}if(!r)return;if(l&&!a)return;if(a&&!l)return;const b=[];let x={};for(let e=0;e0&&I.some((e=>!p(e)&&!v(e)))&&I.push(new i([f.Comma,",",-1,-1,void 0])),e.value=[...I,...P]})));n!==t.value&&(t.cloneBefore({value:n}),null!=e&&e.preserve||t.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;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/package.json b/plugins/postcss-gradients-interpolation-method/package.json index 14d206483..47f33d33b 100644 --- a/plugins/postcss-gradients-interpolation-method/package.json +++ b/plugins/postcss-gradients-interpolation-method/package.json @@ -29,6 +29,9 @@ "dist" ], "dependencies": { + "@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", "postcss-value-parser": "^4.2.0" }, diff --git a/plugins/postcss-gradients-interpolation-method/src/color-mix.ts b/plugins/postcss-gradients-interpolation-method/src/color-mix.ts new file mode 100644 index 000000000..d9208de53 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/src/color-mix.ts @@ -0,0 +1,24 @@ +import { color } from '@csstools/css-color-parser'; +import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; +import { serializeRGB } from '@csstools/css-color-parser'; +import { tokenize } from '@csstools/css-tokenizer'; + +const colorMixNameRegex = /^color-mix$/i; + +export function colorMix(x: string) { + const replaced = replaceComponentValues( + parseCommaSeparatedListOfComponentValues(tokenize({ css: x })), + (componentValue) => { + if (isFunctionNode(componentValue) && colorMixNameRegex.test(componentValue.getName())) { + const colorData = color(componentValue); + if (!colorData) { + return; + } + + return serializeRGB(colorData); + } + }, + ); + + return stringify(replaced); +} 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..2e8b2a66b 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,83 @@ -import type { Node } from 'postcss-value-parser'; -import valueParser from 'postcss-value-parser'; +import { color, serializeRGB } 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'; export type ColorStop = { - color: string; - colorStopLength: string; - colorHintBetween: Array; - nodes: Array; + color: ComponentValue, + 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 = []; - 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; - } + result.push( + colorStop.color, + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + colorStop.position, + new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + ); - currentStop.nodes.push(node); - } + for (let j = 1; j <= 9; j++) { + const multiplier = j * 10; - stops.push(currentStop); + 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' }]), + ]; + } - // Assign values and handle double position gradients. - const formattedStops : Array = []; - for (let i = 0; i < stops.length; i++) { - const stop = stops[i]; + 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 }]), + ], + ); - switch (stop.nodes.length) { - case 0: - break; - case 1: + const mixedColor = color(colorMix); + if (!mixedColor) { 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], - ], - }); - - formattedStops.push({ - color: valueParser.stringify(stop.nodes[0]), - colorStopLength: valueParser.stringify(stop.nodes[2]), - colorHintBetween: [], - nodes: [ - stop.nodes[0], - stop.nodes[2], - ], - }); + } - break; - - default: - break; + const rgbColor = serializeRGB(mixedColor); + result.push( + rgbColor, + new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + ); } - } - 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], - ]; + if (i === (colorStops.length - 2)) { + result.push( + nextColorStop.color, + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), + nextColorStop.position, + ); } } - return formattedStops; + return result; } 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..6b0ce28b5 100644 --- a/plugins/postcss-gradients-interpolation-method/src/index.ts +++ b/plugins/postcss-gradients-interpolation-method/src/index.ts @@ -1,18 +1,19 @@ import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; +import type { ComponentValue } from '@csstools/css-parser-algorithms'; 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 { ColorStop, interpolateColorsInColorStopsList } from './color-stop-list'; +import { color } from '@csstools/css-color-parser'; +import { gradientFunctionRegex, gradientNameRegex } from './is-gradient'; import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; -import { includesGradientsFunction, isGradientsFunctions } from './is-gradient'; +import { isCommentNode, isTokenNode, isWhitespaceNode, TokenNode } from '@csstools/css-parser-algorithms'; +import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; +import { tokenize, TokenType } from '@csstools/css-tokenizer'; -const interpolationMethods = [ - 'shorter', - 'longer', - 'increasing', - 'decreasing', - 'specified', -]; +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; /** * Transform double-position gradients in CSS. @@ -22,8 +23,8 @@ const interpolationMethods = [ const basePlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve?: boolean }) => { return { postcssPlugin: 'postcss-gradients-interpolation-method', - Declaration(decl, { result }) { - if (!includesGradientsFunction(decl.value)) { + Declaration(decl) { + if (!gradientFunctionRegex.test(decl.value)) { return; } @@ -31,197 +32,231 @@ const basePlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve?: bo return; } - let valueAST; + const tokens = tokenize({ + css: decl.value, + }); - 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.`, - ); - } + const modified = stringify(replaceComponentValues( + parseCommaSeparatedListOfComponentValues(tokens), + (componentValue) => { + if (!isFunctionNode(componentValue)) { + return; + } - if (typeof valueAST === 'undefined') { - // Bail if there's an error - return; - } + const functionName = componentValue.getName(); + if (!gradientNameRegex.test(functionName)) { + return; + } + + 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 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; + { + let i = 0; + let node = componentValue.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; + } + + i++; + node = componentValue.value[i]; + } + + inKeyword = node; + i++; + node = componentValue.value[i]; } - if (interpolationArguments) { - // If there are no interpolation arguments we do not emit warnings. - hasUnparseableGradients = true; + while (isCommentNode(node) || isWhitespaceNode(node)) { + i++; + node = componentValue.value[i]; } - break; - } - if (node.type === 'word' && node.value === 'in' && nodes[i + 1]) { - gradient.interpolationArguments.push(nodes[i + 1]); - i++; + // color space + if ( + isTokenNode(node) && + node.value[0] === TokenType.Ident && + colorSpaceRegex.test(node.value[4].value) + ) { + if (colorSpace) { + return; + } + + colorSpace = node; + colorSpaceName = node.value[4].value; - if (nodes[i + 1] && nodes[i + 1].type === 'word' && interpolationMethods.includes(nodes[i + 1].value)) { - gradient.interpolationArguments.push(nodes[i + 1]); i++; - continue; + node = componentValue.value[i]; } - continue; - } + while (isCommentNode(node) || isWhitespaceNode(node)) { + i++; + node = componentValue.value[i]; + } - 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, - ); + // hue interpolation method + if ( + isTokenNode(node) && + node.value[0] === TokenType.Ident && + hueInterpolationMethodRegex.test(node.value[4].value) && + polarColorSpaceRegex.test(colorSpaceName) + ) { + if (hueInterpolationMethod || !colorSpace) { + return; + } - continue; - } + hueInterpolationMethod = node; - // 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, - }, - ); + i++; + node = componentValue.value[i]; + } + + while (isCommentNode(node) || isWhitespaceNode(node)) { + i++; + node = componentValue.value[i]; + } + + // "hue" keyword + if ( + isTokenNode(node) && + node.value[0] === TokenType.Ident && + hueKeywordRegex.test(node.value[4].value) + ) { + if (hueKeyword || !colorSpace || !hueInterpolationMethod) { + return; + } + + hueKeyword = node; + + i++; + node = componentValue.value[i]; + } + + // Find first comma + while (!isTokenNode(node) || node.value[0] !== TokenType.Comma) { + i++; + node = componentValue.value[i]; + } - continue; + firstComma = node; + remainder = componentValue.value.slice(i + 1); } - // 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, - }, - ); + if (!colorSpace) { + return; + } else if (hueInterpolationMethod && !hueKeyword) { + return; + } else if (hueKeyword && !hueInterpolationMethod) { + return; + } + + + const colorStops: Array = []; + + let currentColorStop: { + color?: ComponentValue, + positionA?: ComponentValue, + positionB?: ComponentValue, + } = {}; + + for (let i = 0; i < remainder.length; i++) { + const node = remainder[i]; + if (isCommentNode(node) || isWhitespaceNode(node)) { + continue; + } + + if (isTokenNode(node) && node.value[0] === TokenType.Comma) { + if (currentColorStop.color && currentColorStop.positionA) { + colorStops.push({ color: currentColorStop.color, position: currentColorStop.positionA }); + + if (currentColorStop.positionB) { + colorStops.push({ color: currentColorStop.color, position: currentColorStop.positionB }); + } + + currentColorStop = {}; + continue; + } + + return; + } + + const colorData = color(node); + if (colorData && currentColorStop.color) { + return; + } + + if (colorData) { + currentColorStop.color = node; + continue; + } + if (!currentColorStop.positionA) { + currentColorStop.positionA = node; 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 (currentColorStop.positionA && !currentColorStop.positionB) { + currentColorStop.positionB = node; + } + + return; + } + + if (!currentColorStop.color || !currentColorStop.positionA) { + return; + } + + colorStops.push({ color: currentColorStop.color, position: currentColorStop.positionA }); + + if (currentColorStop.positionB) { + colorStops.push({ color: currentColorStop.color, position: currentColorStop.positionB }); + } + + const modifiedColorStops = interpolateColorsInColorStopsList(colorStops, colorSpace, hueInterpolationMethod); + if (!modifiedColorStops) { + return; + } + + const beforeColorStops = [ + ...componentValue.value.slice(0, componentValue.value.indexOf(inKeyword)), + ...componentValue.value.slice(componentValue.value.indexOf(hueKeyword || colorSpace) + 1, componentValue.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]), ); } - } - }); - if (hasUnparseableGradients) { - decl.warn( - result, - `Failed to parse value '${decl.value}' as a CSS gradient with interpolation. Leaving the original value intact.`, - ); + componentValue.value = [ + ...beforeColorStops, + ...modifiedColorStops, + ]; + }, + )); + 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(); } }, }; 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/test/basic.css b/plugins/postcss-gradients-interpolation-method/test/basic.css index 89b791fd5..2683d13a2 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.css @@ -1,19 +1,34 @@ -.test-linear-gradient { +.test-1 { --perc-50: 50%; background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-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%); +} - background-image: linear-gradient(in oklch shorter 90deg, black 25% 50%, blue 70% 75%); +.test-2-2 { + background-image: linear-gradient(in hsl longer hue 90deg, 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-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); diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css index bf0dc5fc4..51e5da51e 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css @@ -1,61 +1,43 @@ -.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(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%); +} + +.test-2-0 { + 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(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(in hsl longer hue 90deg, 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%); -} - -@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); -} -} - -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { -:root { + --gradient-prop-1: conic-gradient(cyan 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), gold 45deg, rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), gold 50deg, rgb(255, 199, 0), rgb(255, 183, 0), rgb(255, 168, 0), rgb(255, 154, 0), rgb(255, 138, 28), rgb(255, 120, 42), rgb(255, 101, 55), rgb(255, 76, 68), rgb(255, 42, 83), #f06 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), blue 100%); --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%); -} + --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); } -@supports (background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px)) { +@supports (background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg)) { :root { - --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); + --gradient-prop-1: conic-gradient(in oklch, cyan 0deg, gold 45deg, gold 50deg, #f06 180deg, blue 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..f388f2cdd 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,37 @@ -.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(in oklch 90deg, black 20% var(--perc-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%); +} - 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-2 { + background-image: linear-gradient(in hsl longer hue 90deg, 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%); + --gradient-prop-1: conic-gradient(cyan 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), gold 45deg, rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), gold 50deg, rgb(255, 199, 0), rgb(255, 183, 0), rgb(255, 168, 0), rgb(255, 154, 0), rgb(255, 138, 28), rgb(255, 120, 42), rgb(255, 101, 55), rgb(255, 76, 68), rgb(255, 42, 83), #f06 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), 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/basic.preserve-true.progressive-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-true.progressive-false.expect.css index b4c915411..42a4f2598 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,38 @@ -.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(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(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(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-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-1: conic-gradient(cyan 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), gold 45deg, rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), gold 50deg, rgb(255, 199, 0), rgb(255, 183, 0), rgb(255, 168, 0), rgb(255, 154, 0), rgb(255, 138, 28), rgb(255, 120, 42), rgb(255, 101, 55), rgb(255, 76, 68), rgb(255, 42, 83), #f06 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), blue 100%); + --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(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%); } 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..91855d4b6 100644 --- a/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css @@ -1,10 +1,10 @@ .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( 90deg,black 25%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), blue 75%); background: linear-gradient(in oklch 90deg, black 25% , blue 75%); } :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( 90deg,black 25%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), blue 75%); } @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { 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..91855d4b6 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,10 +1,10 @@ .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( 90deg,black 25%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), blue 75%); background: linear-gradient(in oklch 90deg, black 25% , blue 75%); } :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( 90deg,black 25%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), blue 75%); } @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { 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..7e09aad0c 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( 90deg,black 25%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), blue 75%); background: linear-gradient(in oklch 90deg, black 25% , blue 75%); } :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( 90deg,black 25%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), blue 75%); --background: linear-gradient(in oklch 90deg, black 25%, blue 75%); } From 69e80898497aa108c3c2850c9435e562504bc0b6 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 24 Mar 2023 12:23:10 +0100 Subject: [PATCH 2/4] finish --- plugins/postcss-color-function/dist/index.cjs | 2 +- plugins/postcss-color-function/dist/index.mjs | 2 +- plugins/postcss-color-function/src/index.ts | 8 +- .../postcss-color-mix-function/dist/index.cjs | 2 +- .../postcss-color-mix-function/dist/index.mjs | 2 +- .../postcss-color-mix-function/src/index.ts | 8 +- .../.tape.mjs | 23 +- .../CHANGELOG.md | 4 + .../README.md | 101 +++-- .../dist/color-mix.d.ts | 1 - .../dist/color-stop-list.d.ts | 2 + .../dist/has-fallback-decl.d.ts | 2 + .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../dist/parse-color-stops.d.ts | 3 + .../docs/README.md | 31 +- .../src/color-mix.ts | 24 -- .../src/color-stop-list.ts | 132 ++++--- .../src/has-fallback-decl.ts | 20 + .../src/index.ts | 73 +--- .../src/parse-color-stops.ts | 79 ++++ .../test/basic.css | 260 ++++++++++++- .../test/basic.expect.css | 328 +++++++++++++++- .../test/basic.preserve-false.expect.css | 268 ++++++++++++- ...preserve-true.progressive-false.expect.css | 329 +++++++++++++++- .../test/basic.with-cloned-rules.expect.css | 356 ++++++++++++++++++ .../test/examples/example.css | 8 +- .../test/examples/example.expect.css | 17 +- .../examples/example.preserve-true.expect.css | 17 +- ...preserve-true.progressive-false.expect.css | 12 +- .../test/variables.css | 8 + .../test/variables.expect.css | 44 +++ .../test/variables.preserve-false.expect.css | 8 + plugins/postcss-lab-function/dist/index.cjs | 2 +- plugins/postcss-lab-function/dist/index.mjs | 2 +- plugins/postcss-lab-function/src/index.ts | 8 +- plugins/postcss-oklab-function/dist/index.cjs | 2 +- plugins/postcss-oklab-function/dist/index.mjs | 2 +- plugins/postcss-oklab-function/src/index.ts | 8 +- 39 files changed, 1905 insertions(+), 297 deletions(-) delete mode 100644 plugins/postcss-gradients-interpolation-method/dist/color-mix.d.ts create mode 100644 plugins/postcss-gradients-interpolation-method/dist/has-fallback-decl.d.ts create mode 100644 plugins/postcss-gradients-interpolation-method/dist/parse-color-stops.d.ts delete mode 100644 plugins/postcss-gradients-interpolation-method/src/color-mix.ts create mode 100644 plugins/postcss-gradients-interpolation-method/src/has-fallback-decl.ts create mode 100644 plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts create mode 100644 plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css create mode 100644 plugins/postcss-gradients-interpolation-method/test/variables.css create mode 100644 plugins/postcss-gradients-interpolation-method/test/variables.expect.css create mode 100644 plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css 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..31c0b1bc1 100644 --- a/plugins/postcss-gradients-interpolation-method/README.md +++ b/plugins/postcss-gradients-interpolation-method/README.md @@ -5,49 +5,53 @@ [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,24 +129,24 @@ 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%); } ``` diff --git a/plugins/postcss-gradients-interpolation-method/dist/color-mix.d.ts b/plugins/postcss-gradients-interpolation-method/dist/color-mix.d.ts deleted file mode 100644 index b8730b829..000000000 --- a/plugins/postcss-gradients-interpolation-method/dist/color-mix.d.ts +++ /dev/null @@ -1 +0,0 @@ -export declare function colorMix(x: string): string; 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 9b4a284f1..e8a978ccc 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,7 +1,9 @@ +import { 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: ComponentValue; + colorData: ColorData; position: ComponentValue; }; 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 519c2d0a5..dfcb3c75a 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("@csstools/css-color-parser"),n=require("@csstools/css-parser-algorithms"),i=require("@csstools/css-tokenizer");function interpolateColorsInColorStopsList(e,s,t){const r=[];for(let l=0;l({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(u){if(!s.test(u.value))return;if(hasSupportsAtRuleAncestor(u))return;const d=i.tokenize({css:u.value}),T=n.stringify(n.replaceComponentValues(n.parseCommaSeparatedListOfComponentValues(d),(e=>{if(!n.isFunctionNode(e))return;const s=e.getName();if(!t.test(s))return;let u="srgb",d=null,T=null,v=null,h=null,k=null,m=[];{let o=0,s=e.value[o];for(;!n.isTokenNode(s)||s.value[0]!==i.TokenType.Ident||!p.test(s.value[4].value);){if(n.isTokenNode(s)&&s.value[0]===i.TokenType.Comma)return;o++,s=e.value[o]}for(d=s,o++,s=e.value[o];n.isCommentNode(s)||n.isWhitespaceNode(s);)o++,s=e.value[o];if(n.isTokenNode(s)&&s.value[0]===i.TokenType.Ident&&r.test(s.value[4].value)){if(T)return;T=s,u=s.value[4].value,o++,s=e.value[o]}for(;n.isCommentNode(s)||n.isWhitespaceNode(s);)o++,s=e.value[o];if(n.isTokenNode(s)&&s.value[0]===i.TokenType.Ident&&a.test(s.value[4].value)&&l.test(u)){if(v||!T)return;v=s,o++,s=e.value[o]}for(;n.isCommentNode(s)||n.isWhitespaceNode(s);)o++,s=e.value[o];if(n.isTokenNode(s)&&s.value[0]===i.TokenType.Ident&&c.test(s.value[4].value)){if(h||!T||!v)return;h=s,o++,s=e.value[o]}for(;!n.isTokenNode(s)||s.value[0]!==i.TokenType.Comma;)o++,s=e.value[o];k=s,m=e.value.slice(o+1)}if(!T)return;if(v&&!h)return;if(h&&!v)return;const f=[];let N={};for(let e=0;e0&&g.some((e=>!n.isCommentNode(e)&&!n.isWhitespaceNode(e)))&&g.push(new n.TokenNode([i.TokenType.Comma,",",-1,-1,void 0])),e.value=[...g,...y]})));T!==u.value&&(u.cloneBefore({value:T}),null!=e&&e.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=o=>{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-color-parser"),n=require("@csstools/css-tokenizer");const s=/(repeating-)?(linear|radial|conic)-gradient\(/i,i=/^(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;e({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(t){if(!s.test(t.value))return;if(hasFallback(t))return;if(hasSupportsAtRuleAncestor(t))return;const u=n.tokenize({css:t.value}),d=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(u),(e=>{if(!o.isFunctionNode(e))return;const t=e.getName();if(!i.test(t))return;let s="srgb",u=null,d=null,T=null,v=null,h=null,f=[];{let t=0,i=e.value[t];for(;!o.isTokenNode(i)||i.value[0]!==n.TokenType.Ident||!p.test(i.value[4].value);){if(o.isTokenNode(i)&&i.value[0]===n.TokenType.Comma)return;t++,i=e.value[t]}for(u=i,t++,i=e.value[t];o.isCommentNode(i)||o.isWhitespaceNode(i);)t++,i=e.value[t];if(o.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&r.test(i.value[4].value)){if(d)return;d=i,s=i.value[4].value,t++,i=e.value[t]}for(;o.isCommentNode(i)||o.isWhitespaceNode(i);)t++,i=e.value[t];if(o.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&l.test(i.value[4].value)&&a.test(s)){if(T||!d)return;T=i,t++,i=e.value[t]}for(;o.isCommentNode(i)||o.isWhitespaceNode(i);)t++,i=e.value[t];if(o.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&c.test(i.value[4].value)){if(v||!d||!T)return;v=i,t++,i=e.value[t]}for(;!o.isTokenNode(i)||i.value[0]!==n.TokenType.Comma;)t++,i=e.value[t];h=i,f=e.value.slice(t+1)}if(!d)return;if(T&&!v)return;if(v&&!T)return;const k=parseColorStops(f);if(!k)return;const m=interpolateColorsInColorStopsList(k,d,T);if(!m)return;const N=[...e.value.slice(0,e.value.indexOf(u)),...e.value.slice(e.value.indexOf(v||d)+1,e.value.indexOf(h))];N.length>0&&N.some((e=>!o.isCommentNode(e)&&!o.isWhitespaceNode(e)))&&N.push(new o.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]])),e.value=[...N,...m]})));d!==t.value&&(t.cloneBefore({value:d}),null!=e&&e.preserve||t.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.mjs b/plugins/postcss-gradients-interpolation-method/dist/index.mjs index 9e98095f7..f1638c0fe 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{color as o,serializeRGB as t}from"@csstools/css-color-parser";import{WhitespaceNode as s,TokenNode as i,FunctionNode as n,stringify as r,replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as a,isFunctionNode as u,isTokenNode as c,isCommentNode as p,isWhitespaceNode as v}from"@csstools/css-parser-algorithms";import{TokenType as f,tokenize as h}from"@csstools/css-tokenizer";function interpolateColorsInColorStopsList(e,r,l){const a=[];for(let u=0;u({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(t){if(!d.test(t.value))return;if(hasSupportsAtRuleAncestor(t))return;const s=h({css:t.value}),n=r(l(a(s),(e=>{if(!u(e))return;const t=e.getName();if(!m.test(t))return;let s="srgb",n=null,r=null,l=null,a=null,h=null,d=[];{let o=0,t=e.value[o];for(;!c(t)||t.value[0]!==f.Ident||!A.test(t.value[4].value);){if(c(t)&&t.value[0]===f.Comma)return;o++,t=e.value[o]}for(n=t,o++,t=e.value[o];p(t)||v(t);)o++,t=e.value[o];if(c(t)&&t.value[0]===f.Ident&&g.test(t.value[4].value)){if(r)return;r=t,s=t.value[4].value,o++,t=e.value[o]}for(;p(t)||v(t);)o++,t=e.value[o];if(c(t)&&t.value[0]===f.Ident&&C.test(t.value[4].value)&&w.test(s)){if(l||!r)return;l=t,o++,t=e.value[o]}for(;p(t)||v(t);)o++,t=e.value[o];if(c(t)&&t.value[0]===f.Ident&&W.test(t.value[4].value)){if(a||!r||!l)return;a=t,o++,t=e.value[o]}for(;!c(t)||t.value[0]!==f.Comma;)o++,t=e.value[o];h=t,d=e.value.slice(o+1)}if(!r)return;if(l&&!a)return;if(a&&!l)return;const b=[];let x={};for(let e=0;e0&&I.some((e=>!p(e)&&!v(e)))&&I.push(new i([f.Comma,",",-1,-1,void 0])),e.value=[...I,...P]})));n!==t.value&&(t.cloneBefore({value:n}),null!=e&&e.preserve||t.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;export{postcssPlugin as default}; +import o from"@csstools/postcss-progressive-custom-properties";import{WhitespaceNode as e,TokenNode as t,FunctionNode as r,isCommentNode as s,isWhitespaceNode as n,isTokenNode as i,stringify as l,replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as u}from"@csstools/css-parser-algorithms";import{serializeP3 as p,color as v,colorDataFitsRGB_Gamut as f,serializeRGB as h}from"@csstools/css-color-parser";import{TokenType as d,tokenize as g}from"@csstools/css-tokenizer";const m=/(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;o({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(r){if(!m.test(r.value))return;if(hasFallback(r))return;if(hasSupportsAtRuleAncestor(r))return;const p=g({css:r.value}),v=l(a(c(p),(o=>{if(!u(o))return;const r=o.getName();if(!w.test(r))return;let l="srgb",a=null,c=null,p=null,v=null,f=null,h=[];{let e=0,t=o.value[e];for(;!i(t)||t.value[0]!==d.Ident||!A.test(t.value[4].value);){if(i(t)&&t.value[0]===d.Comma)return;e++,t=o.value[e]}for(a=t,e++,t=o.value[e];s(t)||n(t);)e++,t=o.value[e];if(i(t)&&t.value[0]===d.Ident&&C.test(t.value[4].value)){if(c)return;c=t,l=t.value[4].value,e++,t=o.value[e]}for(;s(t)||n(t);)e++,t=o.value[e];if(i(t)&&t.value[0]===d.Ident&&b.test(t.value[4].value)&&D.test(l)){if(p||!c)return;p=t,e++,t=o.value[e]}for(;s(t)||n(t);)e++,t=o.value[e];if(i(t)&&t.value[0]===d.Ident&&x.test(t.value[4].value)){if(v||!c||!p)return;v=t,e++,t=o.value[e]}for(;!i(t)||t.value[0]!==d.Comma;)e++,t=o.value[e];f=t,h=o.value.slice(e+1)}if(!c)return;if(p&&!v)return;if(v&&!p)return;const g=parseColorStops(h);if(!g)return;const m=interpolateColorsInColorStopsList(g,c,p);if(!m)return;const S=[...o.value.slice(0,o.value.indexOf(a)),...o.value.slice(o.value.indexOf(v||c)+1,o.value.indexOf(f))];S.length>0&&S.some((o=>!s(o)&&!n(o)))&&S.push(new t([d.Comma,",",-1,-1,void 0]),new e([[d.Whitespace," ",-1,-1,void 0]])),o.value=[...S,...m]})));v!==r.value&&(r.cloneBefore({value:v}),null!=o&&o.preserve||r.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/parse-color-stops.d.ts b/plugins/postcss-gradients-interpolation-method/dist/parse-color-stops.d.ts new file mode 100644 index 000000000..8b92df797 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/dist/parse-color-stops.d.ts @@ -0,0 +1,3 @@ +import { ComponentValue } from '@csstools/css-parser-algorithms'; +import type { ColorStop } from './color-stop-list'; +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/src/color-mix.ts b/plugins/postcss-gradients-interpolation-method/src/color-mix.ts deleted file mode 100644 index d9208de53..000000000 --- a/plugins/postcss-gradients-interpolation-method/src/color-mix.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { color } from '@csstools/css-color-parser'; -import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; -import { serializeRGB } from '@csstools/css-color-parser'; -import { tokenize } from '@csstools/css-tokenizer'; - -const colorMixNameRegex = /^color-mix$/i; - -export function colorMix(x: string) { - const replaced = replaceComponentValues( - parseCommaSeparatedListOfComponentValues(tokenize({ css: x })), - (componentValue) => { - if (isFunctionNode(componentValue) && colorMixNameRegex.test(componentValue.getName())) { - const colorData = color(componentValue); - if (!colorData) { - return; - } - - return serializeRGB(colorData); - } - }, - ); - - return stringify(replaced); -} 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 2e8b2a66b..5c4895e8f 100644 --- a/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts +++ b/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts @@ -1,83 +1,115 @@ -import { color, serializeRGB } from '@csstools/css-color-parser'; +import { color, ColorData, colorDataFitsRGB_Gamut, serializeP3, serializeRGB } 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'; export type ColorStop = { color: ComponentValue, + colorData: ColorData, position: ComponentValue, } 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 < (colorStops.length - 1); i++) { const colorStop = colorStops[i]; const nextColorStop = colorStops[i + 1]; - result.push( - colorStop.color, - new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), - colorStop.position, - new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), - new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), - ); - - for (let j = 1; j <= 9; j++) { - const multiplier = j * 10; - - 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' }]), - ]; - } + interpolatedColorStops.push(colorStop); - 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 }]), - ], - ); + 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; + + 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' }]), + ]; + } + + 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 }]), + ], + ); + + const mixedColor = color(colorMix); + if (!mixedColor) { + return false; + } - const mixedColor = color(colorMix); - if (!mixedColor) { - return false; + interpolatedColorStops.push({ + colorData: mixedColor, + }); } + } + + if (i === (colorStops.length - 2)) { + interpolatedColorStops.push(nextColorStop); + } + } - const rgbColor = serializeRGB(mixedColor); + 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 < interpolatedColorStops.length; i++) { + const colorStop = interpolatedColorStops[i]; + if (colorStop.position) { result.push( - rgbColor, - new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), + // 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 === (colorStops.length - 2)) { + if (i !== (interpolatedColorStops.length - 1)) { result.push( - nextColorStop.color, + new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), - nextColorStop.position, ); } } 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/index.ts b/plugins/postcss-gradients-interpolation-method/src/index.ts index 6b0ce28b5..e965c9519 100644 --- a/plugins/postcss-gradients-interpolation-method/src/index.ts +++ b/plugins/postcss-gradients-interpolation-method/src/index.ts @@ -1,12 +1,13 @@ import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; -import type { ComponentValue } from '@csstools/css-parser-algorithms'; import type { PluginCreator } from 'postcss'; -import { ColorStop, interpolateColorsInColorStopsList } from './color-stop-list'; -import { color } from '@csstools/css-color-parser'; +import { ComponentValue, WhitespaceNode } from '@csstools/css-parser-algorithms'; import { gradientFunctionRegex, gradientNameRegex } from './is-gradient'; +import { hasFallback } from './has-fallback-decl'; import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; +import { interpolateColorsInColorStopsList } from './color-stop-list'; import { isCommentNode, isTokenNode, isWhitespaceNode, TokenNode } from '@csstools/css-parser-algorithms'; import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; +import { parseColorStops } from './parse-color-stops'; import { tokenize, TokenType } from '@csstools/css-tokenizer'; const colorSpaceRegex = /^(srgb|srgb-linear|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch)$/i; @@ -28,6 +29,10 @@ const basePlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve?: bo return; } + if (hasFallback(decl)) { + return; + } + if (hasSupportsAtRuleAncestor(decl)) { return; } @@ -162,68 +167,11 @@ const basePlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve?: bo return; } - - const colorStops: Array = []; - - let currentColorStop: { - color?: ComponentValue, - positionA?: ComponentValue, - positionB?: ComponentValue, - } = {}; - - for (let i = 0; i < remainder.length; i++) { - const node = remainder[i]; - if (isCommentNode(node) || isWhitespaceNode(node)) { - continue; - } - - if (isTokenNode(node) && node.value[0] === TokenType.Comma) { - if (currentColorStop.color && currentColorStop.positionA) { - colorStops.push({ color: currentColorStop.color, position: currentColorStop.positionA }); - - if (currentColorStop.positionB) { - colorStops.push({ color: currentColorStop.color, position: currentColorStop.positionB }); - } - - currentColorStop = {}; - continue; - } - - return; - } - - const colorData = color(node); - if (colorData && currentColorStop.color) { - return; - } - - if (colorData) { - currentColorStop.color = node; - continue; - } - - if (!currentColorStop.positionA) { - currentColorStop.positionA = node; - continue; - } - - if (currentColorStop.positionA && !currentColorStop.positionB) { - currentColorStop.positionB = node; - } - - return; - } - - if (!currentColorStop.color || !currentColorStop.positionA) { + const colorStops = parseColorStops(remainder); + if (!colorStops) { return; } - colorStops.push({ color: currentColorStop.color, position: currentColorStop.positionA }); - - if (currentColorStop.positionB) { - colorStops.push({ color: currentColorStop.color, position: currentColorStop.positionB }); - } - const modifiedColorStops = interpolateColorsInColorStopsList(colorStops, colorSpace, hueInterpolationMethod); if (!modifiedColorStops) { return; @@ -237,6 +185,7 @@ const basePlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve?: bo if (hasMeaningfulPrefix) { beforeColorStops.push( new TokenNode([TokenType.Comma, ',', -1, -1, undefined]), + new WhitespaceNode([[TokenType.Whitespace, ' ', -1, -1, undefined]]), ); } 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..1432ac53f --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts @@ -0,0 +1,79 @@ +import { color, ColorData } from '@csstools/css-color-parser'; +import { ComponentValue, isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms'; +import { isCommentNode } from '@csstools/css-parser-algorithms'; +import { TokenType } from '@csstools/css-tokenizer'; +import type { ColorStop } from './color-stop-list'; + +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 2683d13a2..2f6de8abb 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.css @@ -15,6 +15,10 @@ 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 */ @@ -27,11 +31,253 @@ background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); } -: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%); +.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 51e5da51e..5ee652057 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css @@ -1,20 +1,29 @@ .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 */ @@ -27,17 +36,316 @@ background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); } -:root { - --gradient-prop-1: conic-gradient(cyan 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), gold 45deg, rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), gold 50deg, rgb(255, 199, 0), rgb(255, 183, 0), rgb(255, 168, 0), rgb(255, 154, 0), rgb(255, 138, 28), rgb(255, 120, 42), rgb(255, 101, 55), rgb(255, 76, 68), rgb(255, 42, 83), #f06 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), 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%); +.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%); } -@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%); +.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.preserve-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css index f388f2cdd..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,18 +1,22 @@ .test-1 { --perc-50: 50%; - background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 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%); } .test-2-0 { - background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%); + 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(in oklab 90deg, red 25% 50%, blue 70% 75%); + 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(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%); + 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 { @@ -27,11 +31,253 @@ background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); } -:root { - --gradient-prop-1: conic-gradient(cyan 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), gold 45deg, rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), gold 50deg, rgb(255, 199, 0), rgb(255, 183, 0), rgb(255, 168, 0), rgb(255, 154, 0), rgb(255, 138, 28), rgb(255, 120, 42), rgb(255, 101, 55), rgb(255, 76, 68), rgb(255, 42, 83), #f06 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), 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%); +.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 42a4f2598..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,20 +1,29 @@ .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 */ @@ -27,12 +36,316 @@ background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); } -:root { - --gradient-prop-1: conic-gradient(cyan 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), gold 45deg, rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), rgb(255, 215, 0), gold 50deg, rgb(255, 199, 0), rgb(255, 183, 0), rgb(255, 168, 0), rgb(255, 154, 0), rgb(255, 138, 28), rgb(255, 120, 42), rgb(255, 101, 55), rgb(255, 76, 68), rgb(255, 42, 83), #f06 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), blue 100%); - --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%); +.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 91855d4b6..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%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), 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%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), 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 91855d4b6..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%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), 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%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), 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 7e09aad0c..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%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), 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%, rgb(0, 0, 8), rgb(1, 0, 30), rgb(1, 0, 54), rgb(1, 0, 81), rgb(2, 0, 109), rgb(3, 0, 138), rgb(3, 0, 169), rgb(4, 0, 201), rgb(5, 0, 233), 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; } From fa3d9e8af24aa120ba732595cdb7a291cfd7936b Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 24 Mar 2023 12:35:28 +0100 Subject: [PATCH 3/4] cleanup --- .../dist/color-stop-list.d.ts | 2 +- .../dist/index.cjs | 2 +- .../dist/index.d.ts | 2 +- .../dist/index.mjs | 2 +- .../modify-gradient-component-values.d.ts | 2 + .../dist/parse-color-stops.d.ts | 2 +- .../package.json | 3 +- .../src/color-stop-list.ts | 4 +- .../src/index.ts | 186 ++---------------- .../src/modify-gradient-component-values.ts | 160 +++++++++++++++ .../src/parse-color-stops.ts | 7 +- 11 files changed, 190 insertions(+), 182 deletions(-) create mode 100644 plugins/postcss-gradients-interpolation-method/dist/modify-gradient-component-values.d.ts create mode 100644 plugins/postcss-gradients-interpolation-method/src/modify-gradient-component-values.ts 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 e8a978ccc..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,4 +1,4 @@ -import { ColorData } from '@csstools/css-color-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 = { diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.cjs b/plugins/postcss-gradients-interpolation-method/dist/index.cjs index dfcb3c75a..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("@csstools/css-parser-algorithms"),t=require("@csstools/css-color-parser"),n=require("@csstools/css-tokenizer");const s=/(repeating-)?(linear|radial|conic)-gradient\(/i,i=/^(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;e({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(t){if(!s.test(t.value))return;if(hasFallback(t))return;if(hasSupportsAtRuleAncestor(t))return;const u=n.tokenize({css:t.value}),d=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(u),(e=>{if(!o.isFunctionNode(e))return;const t=e.getName();if(!i.test(t))return;let s="srgb",u=null,d=null,T=null,v=null,h=null,f=[];{let t=0,i=e.value[t];for(;!o.isTokenNode(i)||i.value[0]!==n.TokenType.Ident||!p.test(i.value[4].value);){if(o.isTokenNode(i)&&i.value[0]===n.TokenType.Comma)return;t++,i=e.value[t]}for(u=i,t++,i=e.value[t];o.isCommentNode(i)||o.isWhitespaceNode(i);)t++,i=e.value[t];if(o.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&r.test(i.value[4].value)){if(d)return;d=i,s=i.value[4].value,t++,i=e.value[t]}for(;o.isCommentNode(i)||o.isWhitespaceNode(i);)t++,i=e.value[t];if(o.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&l.test(i.value[4].value)&&a.test(s)){if(T||!d)return;T=i,t++,i=e.value[t]}for(;o.isCommentNode(i)||o.isWhitespaceNode(i);)t++,i=e.value[t];if(o.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&c.test(i.value[4].value)){if(v||!d||!T)return;v=i,t++,i=e.value[t]}for(;!o.isTokenNode(i)||i.value[0]!==n.TokenType.Comma;)t++,i=e.value[t];h=i,f=e.value.slice(t+1)}if(!d)return;if(T&&!v)return;if(v&&!T)return;const k=parseColorStops(f);if(!k)return;const m=interpolateColorsInColorStopsList(k,d,T);if(!m)return;const N=[...e.value.slice(0,e.value.indexOf(u)),...e.value.slice(e.value.indexOf(v||d)+1,e.value.indexOf(h))];N.length>0&&N.some((e=>!o.isCommentNode(e)&&!o.isWhitespaceNode(e)))&&N.push(new o.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]])),e.value=[...N,...m]})));d!==t.value&&(t.cloneBefore({value:d}),null!=e&&e.preserve||t.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; +"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 f1638c0fe..4996b5262 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/index.mjs +++ b/plugins/postcss-gradients-interpolation-method/dist/index.mjs @@ -1 +1 @@ -import o from"@csstools/postcss-progressive-custom-properties";import{WhitespaceNode as e,TokenNode as t,FunctionNode as r,isCommentNode as s,isWhitespaceNode as n,isTokenNode as i,stringify as l,replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as u}from"@csstools/css-parser-algorithms";import{serializeP3 as p,color as v,colorDataFitsRGB_Gamut as f,serializeRGB as h}from"@csstools/css-color-parser";import{TokenType as d,tokenize as g}from"@csstools/css-tokenizer";const m=/(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;o({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(r){if(!m.test(r.value))return;if(hasFallback(r))return;if(hasSupportsAtRuleAncestor(r))return;const p=g({css:r.value}),v=l(a(c(p),(o=>{if(!u(o))return;const r=o.getName();if(!w.test(r))return;let l="srgb",a=null,c=null,p=null,v=null,f=null,h=[];{let e=0,t=o.value[e];for(;!i(t)||t.value[0]!==d.Ident||!A.test(t.value[4].value);){if(i(t)&&t.value[0]===d.Comma)return;e++,t=o.value[e]}for(a=t,e++,t=o.value[e];s(t)||n(t);)e++,t=o.value[e];if(i(t)&&t.value[0]===d.Ident&&C.test(t.value[4].value)){if(c)return;c=t,l=t.value[4].value,e++,t=o.value[e]}for(;s(t)||n(t);)e++,t=o.value[e];if(i(t)&&t.value[0]===d.Ident&&b.test(t.value[4].value)&&D.test(l)){if(p||!c)return;p=t,e++,t=o.value[e]}for(;s(t)||n(t);)e++,t=o.value[e];if(i(t)&&t.value[0]===d.Ident&&x.test(t.value[4].value)){if(v||!c||!p)return;v=t,e++,t=o.value[e]}for(;!i(t)||t.value[0]!==d.Comma;)e++,t=o.value[e];f=t,h=o.value.slice(e+1)}if(!c)return;if(p&&!v)return;if(v&&!p)return;const g=parseColorStops(h);if(!g)return;const m=interpolateColorsInColorStopsList(g,c,p);if(!m)return;const S=[...o.value.slice(0,o.value.indexOf(a)),...o.value.slice(o.value.indexOf(v||c)+1,o.value.indexOf(f))];S.length>0&&S.some((o=>!s(o)&&!n(o)))&&S.push(new t([d.Comma,",",-1,-1,void 0]),new e([[d.Whitespace," ",-1,-1,void 0]])),o.value=[...S,...m]})));v!==r.value&&(r.cloneBefore({value:v}),null!=o&&o.preserve||r.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}; +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/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 index 8b92df797..0342da5c6 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/parse-color-stops.d.ts +++ b/plugins/postcss-gradients-interpolation-method/dist/parse-color-stops.d.ts @@ -1,3 +1,3 @@ -import { ComponentValue } from '@csstools/css-parser-algorithms'; 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/package.json b/plugins/postcss-gradients-interpolation-method/package.json index 47f33d33b..ccedca0be 100644 --- a/plugins/postcss-gradients-interpolation-method/package.json +++ b/plugins/postcss-gradients-interpolation-method/package.json @@ -32,8 +32,7 @@ "@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", - "postcss-value-parser": "^4.2.0" + "@csstools/postcss-progressive-custom-properties": "^2.0.0" }, "peerDependencies": { "postcss": "^8.4" 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 5c4895e8f..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,7 +1,8 @@ -import { color, ColorData, colorDataFitsRGB_Gamut, serializeP3, serializeRGB } from '@csstools/css-color-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: ComponentValue, @@ -112,4 +113,3 @@ export function interpolateColorsInColorStopsList(colorStops: Array, return result; } - diff --git a/plugins/postcss-gradients-interpolation-method/src/index.ts b/plugins/postcss-gradients-interpolation-method/src/index.ts index e965c9519..a9bb0598e 100644 --- a/plugins/postcss-gradients-interpolation-method/src/index.ts +++ b/plugins/postcss-gradients-interpolation-method/src/index.ts @@ -1,27 +1,18 @@ import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; import type { PluginCreator } from 'postcss'; -import { ComponentValue, WhitespaceNode } from '@csstools/css-parser-algorithms'; -import { gradientFunctionRegex, gradientNameRegex } from './is-gradient'; +import { gradientFunctionRegex } from './is-gradient'; import { hasFallback } from './has-fallback-decl'; import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; -import { interpolateColorsInColorStopsList } from './color-stop-list'; -import { isCommentNode, isTokenNode, isWhitespaceNode, TokenNode } from '@csstools/css-parser-algorithms'; import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; -import { parseColorStops } from './parse-color-stops'; -import { tokenize, 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; - -/** - * Transform double-position gradients in CSS. - * @param {{preserve?: boolean}} opts - * @returns {import('postcss').Plugin} - */ -const basePlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve?: boolean }) => { +import { modifyGradientFunctionComponentValues } from './modify-gradient-component-values'; +import { tokenize } from '@csstools/css-tokenizer'; + +type basePluginOptions = { + preserve: boolean, +}; + +/* Transform gradients with interpolation methods in CSS. */ +const basePlugin: PluginCreator = (opts?: basePluginOptions) => { return { postcssPlugin: 'postcss-gradients-interpolation-method', Declaration(decl) { @@ -37,162 +28,17 @@ const basePlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve?: bo return; } - const tokens = tokenize({ - css: decl.value, - }); - const modified = stringify(replaceComponentValues( - parseCommaSeparatedListOfComponentValues(tokens), + parseCommaSeparatedListOfComponentValues(tokenize({ css: decl.value })), (componentValue) => { if (!isFunctionNode(componentValue)) { return; } - const functionName = componentValue.getName(); - if (!gradientNameRegex.test(functionName)) { - return; - } - - 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 = componentValue.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; - } - - i++; - node = componentValue.value[i]; - } - - inKeyword = node; - i++; - node = componentValue.value[i]; - } - - while (isCommentNode(node) || isWhitespaceNode(node)) { - i++; - node = componentValue.value[i]; - } - - // color space - if ( - isTokenNode(node) && - node.value[0] === TokenType.Ident && - colorSpaceRegex.test(node.value[4].value) - ) { - if (colorSpace) { - return; - } - - colorSpace = node; - colorSpaceName = node.value[4].value; - - i++; - node = componentValue.value[i]; - } - - while (isCommentNode(node) || isWhitespaceNode(node)) { - i++; - node = componentValue.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; - } - - hueInterpolationMethod = node; - - i++; - node = componentValue.value[i]; - } - - while (isCommentNode(node) || isWhitespaceNode(node)) { - i++; - node = componentValue.value[i]; - } - - // "hue" keyword - if ( - isTokenNode(node) && - node.value[0] === TokenType.Ident && - hueKeywordRegex.test(node.value[4].value) - ) { - if (hueKeyword || !colorSpace || !hueInterpolationMethod) { - return; - } - - hueKeyword = node; - - i++; - node = componentValue.value[i]; - } - - // Find first comma - while (!isTokenNode(node) || node.value[0] !== TokenType.Comma) { - i++; - node = componentValue.value[i]; - } - - firstComma = node; - remainder = componentValue.value.slice(i + 1); - } - - if (!colorSpace) { - return; - } else if (hueInterpolationMethod && !hueKeyword) { - return; - } else if (hueKeyword && !hueInterpolationMethod) { - return; - } - - const colorStops = parseColorStops(remainder); - if (!colorStops) { - return; + const modifiedComponentValues = modifyGradientFunctionComponentValues(componentValue); + if (modifiedComponentValues) { + componentValue.value = modifiedComponentValues; } - - const modifiedColorStops = interpolateColorsInColorStopsList(colorStops, colorSpace, hueInterpolationMethod); - if (!modifiedColorStops) { - return; - } - - const beforeColorStops = [ - ...componentValue.value.slice(0, componentValue.value.indexOf(inKeyword)), - ...componentValue.value.slice(componentValue.value.indexOf(hueKeyword || colorSpace) + 1, componentValue.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]]), - ); - } - - componentValue.value = [ - ...beforeColorStops, - ...modifiedColorStops, - ]; }, )); @@ -215,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/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 index 1432ac53f..9039aa401 100644 --- a/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts +++ b/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts @@ -1,8 +1,9 @@ +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 { ComponentValue, isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms'; import { isCommentNode } from '@csstools/css-parser-algorithms'; -import { TokenType } from '@csstools/css-tokenizer'; -import type { ColorStop } from './color-stop-list'; +import { isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms'; export function parseColorStops(componentValues: Array): Array | false { const colorStops: Array = []; From 270ddd3f7826ba981272f3f91f47fb1e8dd27981 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 24 Mar 2023 12:45:24 +0100 Subject: [PATCH 4/4] add cssdb id --- plugins/postcss-gradients-interpolation-method/README.md | 4 ++-- plugins/postcss-gradients-interpolation-method/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/postcss-gradients-interpolation-method/README.md b/plugins/postcss-gradients-interpolation-method/README.md index 31c0b1bc1..60bbad4ef 100644 --- a/plugins/postcss-gradients-interpolation-method/README.md +++ b/plugins/postcss-gradients-interpolation-method/README.md @@ -1,6 +1,6 @@ # 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]. @@ -153,7 +153,7 @@ postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false } _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/package.json b/plugins/postcss-gradients-interpolation-method/package.json index ccedca0be..d17b6c558 100644 --- a/plugins/postcss-gradients-interpolation-method/package.json +++ b/plugins/postcss-gradients-interpolation-method/package.json @@ -69,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"