diff --git a/package-lock.json b/package-lock.json
index 391ea8407..fdb063d4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8323,6 +8323,7 @@
 				"postcss-value-parser": "^4.2.0"
 			},
 			"devDependencies": {
+				"@csstools/postcss-debug-logger": "1.0.0",
 				"@csstools/postcss-tape": "*",
 				"@webref/css": "^6.5.1",
 				"postcss-simple-vars": "^7.0.1"
@@ -8540,6 +8541,7 @@
 			],
 			"license": "CC0-1.0",
 			"dependencies": {
+				"@csstools/postcss-progressive-custom-properties": "^2.2.0",
 				"postcss-value-parser": "^4.2.0"
 			},
 			"devDependencies": {
diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs
index f1f760ed9..4dc6cd8a8 100644
--- a/plugin-packs/postcss-preset-env/dist/index.cjs
+++ b/plugin-packs/postcss-preset-env/dist/index.cjs
@@ -1 +1 @@
-"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),i=require("postcss-initial"),a=require("postcss-pseudo-class-any-link"),r=require("css-blank-pseudo"),c=require("postcss-page-break"),n=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("@csstools/postcss-color-mix-function"),g=require("postcss-custom-media"),f=require("postcss-custom-properties"),b=require("postcss-custom-selectors"),h=require("postcss-dir-pseudo-class"),N=require("@csstools/postcss-normalize-display-values"),v=require("postcss-double-position-gradients"),y=require("@csstools/postcss-logical-float-and-clear"),k=require("postcss-focus-visible"),w=require("postcss-focus-within"),q=require("@csstools/postcss-font-format-keywords"),F=require("postcss-font-variant"),x=require("postcss-gap-properties"),S=require("@csstools/postcss-gradients-interpolation-method"),$=require("css-has-pseudo"),O=require("postcss-color-hex-alpha"),P=require("@csstools/postcss-hwb-function"),C=require("@csstools/postcss-ic-unit"),I=require("postcss-image-set-function"),U=require("@csstools/postcss-is-pseudo-class"),_=require("postcss-lab-function"),E=require("postcss-logical"),L=require("@csstools/postcss-logical-resize"),B=require("@csstools/postcss-logical-viewport-units"),A=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),j=require("@csstools/postcss-media-minmax"),M=require("@csstools/postcss-nested-calc"),z=require("postcss-nesting"),D=require("postcss-selector-not"),R=require("@csstools/postcss-oklab-function"),V=require("postcss-opacity-percentage"),T=require("postcss-overflow-shorthand"),H=require("postcss-replace-overflow-wrap"),W=require("postcss-place"),G=require("css-prefers-color-scheme"),K=require("postcss-color-rebeccapurple"),Z=require("@csstools/postcss-relative-color-syntax"),Q=require("@csstools/postcss-scope-pseudo-class"),J=require("@csstools/postcss-stepped-value-functions"),X=require("@csstools/postcss-text-decoration-shorthand"),Y=require("@csstools/postcss-trigonometric-functions"),ss=require("@csstools/postcss-unset-value");const es={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},os=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push("  autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(`  ${s.id} (injected via options)`):i.push(`  ${s.id}`),void 0!==es[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${es[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const ts=2,is=5;function stageFromOptions(s,e){let o=ts;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=is;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,is)}return o===is?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const as=Symbol("insertBefore"),rs=Symbol("insertAfter"),cs=Symbol("insertOrder"),ns=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?as:rs,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;s<a.length;s++)i.push({id:o,[ns]:a[s],[cs]:s,[t]:!0})}return i}var ps=["custom-media-queries","custom-properties","environment-variables","image-set-function","media-query-ranges","media-queries-aspect-ratio-number-values","prefers-color-scheme-query","nesting-rules","custom-selectors","any-link-pseudo-class","case-insensitive-attributes","focus-visible-pseudo-class","focus-within-pseudo-class","not-pseudo-class","logical-properties-and-values","float-clear-logical-values","logical-resize","logical-viewport-units","dir-pseudo-class","all-property","gradients-interpolation-method","color-mix","relative-color-syntax","lab-function","oklab-function","color-function","hwb-function","color-functional-notation","rebeccapurple-color","hexadecimal-alpha-notation","double-position-gradients","blank-pseudo-class","break-properties","font-variant-property","is-pseudo-class","scope-pseudo-class","has-pseudo-class","gap-properties","overflow-property","overflow-wrap-property","place-properties","system-ui-font-family","font-format-keywords","display-two-values","ic-unit","opacity-percentage","text-decoration-shorthand","unset-value","stepped-value-functions","trigonometric-functions","clamp","nested-calc","cascade-layers"];function featureIsLess(s,e){return s.id===e.id?s[as]&&e[as]||s[rs]&&e[rs]?clamp(-1,s[cs]-e[cs],1):s[as]||e[rs]?-1:s[rs]||e[as]?1:0:clamp(-1,ps.indexOf(s.id)-ps.indexOf(e.id),1)}function postcssSystemUiFont(){return{postcssPlugin:"postcss-system-ui-font",Declaration(s){ls.test(s.prop)&&(s.value.includes(ms.join(", "))||(s.value=s.value.replace(ds,gs)))}}}postcssSystemUiFont.postcss=!0;const ls=/(?:^(?:-|\\002d){2})|(?:^font(?:-family)?$)/i,us="[\\f\\n\\r\\x09\\x20]",ms=["system-ui","-apple-system","Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans","sans-serif"],ds=new RegExp(`(^|,|${us}+)(?:system-ui${us}*)(?:,${us}*(?:${ms.join("|")})${us}*)?(,|$)`,"i"),gs=`$1${ms.join(", ")}$2`,fs=new Map([["all-property",i],["any-link-pseudo-class",a],["blank-pseudo-class",r],["break-properties",c],["cascade-layers",n],["case-insensitive-attributes",p],["clamp",l],["color-function",u],["color-functional-notation",m],["color-mix",d],["custom-media-queries",g],["custom-properties",f],["custom-selectors",b],["dir-pseudo-class",h],["display-two-values",N],["double-position-gradients",v],["float-clear-logical-values",y],["focus-visible-pseudo-class",k],["focus-within-pseudo-class",w],["font-format-keywords",q],["font-variant-property",F],["gap-properties",x],["gradients-interpolation-method",S],["has-pseudo-class",$],["hexadecimal-alpha-notation",O],["hwb-function",P],["ic-unit",C],["image-set-function",I],["is-pseudo-class",U],["lab-function",_],["logical-properties-and-values",E],["logical-resize",L],["logical-viewport-units",B],["media-queries-aspect-ratio-number-values",A],["media-query-ranges",j],["nested-calc",M],["nesting-rules",z],["not-pseudo-class",D],["oklab-function",R],["opacity-percentage",V],["overflow-property",T],["overflow-wrap-property",H],["place-properties",W],["prefers-color-scheme-query",G],["rebeccapurple-color",K],["relative-color-syntax",Z],["scope-pseudo-class",Q],["stepped-value-functions",J],["system-ui-font-family",postcssSystemUiFont],["text-decoration-shorthand",X],["trigonometric-functions",Y],["unset-value",ss]]);function featureIsInsertedOrHasAPlugin(s){return!!s[as]||(!!s[rs]||!!fs.has(s.id))}function prepareFeaturesList(s,e,o){return s.concat(getTransformedInsertions(s,e,"insertBefore"),getTransformedInsertions(s,o,"insertAfter")).filter((s=>featureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const bs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return bs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,a){const r=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),r))return a.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(r.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return a.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[as]||s[rs]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ns],id:o,stage:is+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:fs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in c&&(c.replace=c.preserve),"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const u=stageFromOptions(e,i),m=prepareFeaturesList(s,c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[as]&&!s[rs])||(l<=s.vendors_implementations||(a[s.id]?(i.log(`  ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(`  ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=u,o=r||!os.includes(s.id),t=!1===a[s.id],c=a[s.id]?a[s.id]:e&&o;return t?i.log(`  ${s.id} has been disabled by options`):e?o||i.log(`  ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(`  ${s.id} does not meet the required stage but has been enabled by options`):i.log(`  ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,p,a,t,o,e,i))),d=t(p,{ignoreUnknownVersions:!0});return m.filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var hs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return hs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=hs.map((s=>s.id)),i=hs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=mostSimilar(s,t),c=mostSimilar(s,i);Math.min(r.distance,c.distance)>10?e.warn(o,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):r.distance<c.distance?e.warn(o,`Unknown feature: "${s}", did you mean: "${r.mostSimilar}"`):e.warn(o,`Unknown feature: "${s}", did you mean: "${a[c.mostSimilar]}"`)}))}function mostSimilar(s,e){let o="unknown",t=1/0;for(let i=0;i<e.length;i++){const a=levenshteinDistance(s,e[i]);a<t&&(t=a,o=e[i])}return{mostSimilar:o,distance:t}}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),c=a.browsers,n=initializeSharedOptions(a),p=listFeatures(e,a,n,i),l=p.map((s=>s.plugin));!1!==a.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:c},a.autoprefixer))),l.push(o()),logFeaturesList(p,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0,module.exports=creator;
+"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),i=require("postcss-initial"),a=require("postcss-pseudo-class-any-link"),r=require("css-blank-pseudo"),c=require("postcss-page-break"),n=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("@csstools/postcss-color-mix-function"),g=require("postcss-custom-media"),f=require("postcss-custom-properties"),b=require("postcss-custom-selectors"),h=require("postcss-dir-pseudo-class"),N=require("@csstools/postcss-normalize-display-values"),v=require("postcss-double-position-gradients"),y=require("@csstools/postcss-logical-float-and-clear"),k=require("postcss-focus-visible"),w=require("postcss-focus-within"),q=require("@csstools/postcss-font-format-keywords"),F=require("postcss-font-variant"),x=require("postcss-gap-properties"),S=require("@csstools/postcss-gradients-interpolation-method"),$=require("css-has-pseudo"),O=require("postcss-color-hex-alpha"),P=require("@csstools/postcss-hwb-function"),C=require("@csstools/postcss-ic-unit"),I=require("postcss-image-set-function"),U=require("@csstools/postcss-is-pseudo-class"),_=require("postcss-lab-function"),E=require("postcss-logical"),L=require("@csstools/postcss-logical-resize"),B=require("@csstools/postcss-logical-viewport-units"),A=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),j=require("@csstools/postcss-media-minmax"),M=require("@csstools/postcss-nested-calc"),z=require("postcss-nesting"),D=require("postcss-selector-not"),R=require("@csstools/postcss-oklab-function"),V=require("postcss-opacity-percentage"),T=require("postcss-overflow-shorthand"),H=require("postcss-replace-overflow-wrap"),W=require("postcss-place"),G=require("css-prefers-color-scheme"),K=require("postcss-color-rebeccapurple"),Z=require("@csstools/postcss-relative-color-syntax"),Q=require("@csstools/postcss-scope-pseudo-class"),J=require("@csstools/postcss-stepped-value-functions"),X=require("@csstools/postcss-text-decoration-shorthand"),Y=require("@csstools/postcss-trigonometric-functions"),ss=require("@csstools/postcss-unset-value");const es={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},os=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push("  autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(`  ${s.id} (injected via options)`):i.push(`  ${s.id}`),void 0!==es[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${es[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const ts=2,is=5;function stageFromOptions(s,e){let o=ts;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=is;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,is)}return o===is?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const as=Symbol("insertBefore"),rs=Symbol("insertAfter"),cs=Symbol("insertOrder"),ns=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?as:rs,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;s<a.length;s++)i.push({id:o,[ns]:a[s],[cs]:s,[t]:!0})}return i}var ps=["custom-media-queries","environment-variables","image-set-function","media-query-ranges","media-queries-aspect-ratio-number-values","prefers-color-scheme-query","nesting-rules","custom-selectors","any-link-pseudo-class","case-insensitive-attributes","focus-visible-pseudo-class","focus-within-pseudo-class","not-pseudo-class","logical-properties-and-values","float-clear-logical-values","logical-resize","logical-viewport-units","dir-pseudo-class","all-property","gradients-interpolation-method","color-mix","relative-color-syntax","lab-function","oklab-function","color-function","hwb-function","color-functional-notation","rebeccapurple-color","hexadecimal-alpha-notation","double-position-gradients","blank-pseudo-class","break-properties","font-variant-property","is-pseudo-class","scope-pseudo-class","has-pseudo-class","gap-properties","overflow-property","overflow-wrap-property","place-properties","system-ui-font-family","font-format-keywords","display-two-values","ic-unit","opacity-percentage","text-decoration-shorthand","unset-value","stepped-value-functions","trigonometric-functions","clamp","nested-calc","custom-properties","cascade-layers"];function featureIsLess(s,e){return s.id===e.id?s[as]&&e[as]||s[rs]&&e[rs]?clamp(-1,s[cs]-e[cs],1):s[as]||e[rs]?-1:s[rs]||e[as]?1:0:clamp(-1,ps.indexOf(s.id)-ps.indexOf(e.id),1)}function postcssSystemUiFont(){return{postcssPlugin:"postcss-system-ui-font",Declaration(s){ls.test(s.prop)&&(s.value.includes(ms.join(", "))||(s.value=s.value.replace(ds,gs)))}}}postcssSystemUiFont.postcss=!0;const ls=/(?:^(?:-|\\002d){2})|(?:^font(?:-family)?$)/i,us="[\\f\\n\\r\\x09\\x20]",ms=["system-ui","-apple-system","Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans","sans-serif"],ds=new RegExp(`(^|,|${us}+)(?:system-ui${us}*)(?:,${us}*(?:${ms.join("|")})${us}*)?(,|$)`,"i"),gs=`$1${ms.join(", ")}$2`,fs=new Map([["all-property",i],["any-link-pseudo-class",a],["blank-pseudo-class",r],["break-properties",c],["cascade-layers",n],["case-insensitive-attributes",p],["clamp",l],["color-function",u],["color-functional-notation",m],["color-mix",d],["custom-media-queries",g],["custom-properties",f],["custom-selectors",b],["dir-pseudo-class",h],["display-two-values",N],["double-position-gradients",v],["float-clear-logical-values",y],["focus-visible-pseudo-class",k],["focus-within-pseudo-class",w],["font-format-keywords",q],["font-variant-property",F],["gap-properties",x],["gradients-interpolation-method",S],["has-pseudo-class",$],["hexadecimal-alpha-notation",O],["hwb-function",P],["ic-unit",C],["image-set-function",I],["is-pseudo-class",U],["lab-function",_],["logical-properties-and-values",E],["logical-resize",L],["logical-viewport-units",B],["media-queries-aspect-ratio-number-values",A],["media-query-ranges",j],["nested-calc",M],["nesting-rules",z],["not-pseudo-class",D],["oklab-function",R],["opacity-percentage",V],["overflow-property",T],["overflow-wrap-property",H],["place-properties",W],["prefers-color-scheme-query",G],["rebeccapurple-color",K],["relative-color-syntax",Z],["scope-pseudo-class",Q],["stepped-value-functions",J],["system-ui-font-family",postcssSystemUiFont],["text-decoration-shorthand",X],["trigonometric-functions",Y],["unset-value",ss]]);function featureIsInsertedOrHasAPlugin(s){return!!s[as]||(!!s[rs]||!!fs.has(s.id))}function prepareFeaturesList(s,e,o){return s.concat(getTransformedInsertions(s,e,"insertBefore"),getTransformedInsertions(s,o,"insertAfter")).filter((s=>featureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const bs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return bs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,a){const r=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),r))return a.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(r.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return a.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[as]||s[rs]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ns],id:o,stage:is+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:fs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in c&&(c.replace=c.preserve),"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const u=stageFromOptions(e,i),m=prepareFeaturesList(s,c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[as]&&!s[rs])||(l<=s.vendors_implementations||(a[s.id]?(i.log(`  ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(`  ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=u,o=r||!os.includes(s.id),t=!1===a[s.id],c=a[s.id]?a[s.id]:e&&o;return t?i.log(`  ${s.id} has been disabled by options`):e?o||i.log(`  ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(`  ${s.id} does not meet the required stage but has been enabled by options`):i.log(`  ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,p,a,t,o,e,i))),d=t(p,{ignoreUnknownVersions:!0});return m.filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var hs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return hs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=hs.map((s=>s.id)),i=hs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=mostSimilar(s,t),c=mostSimilar(s,i);Math.min(r.distance,c.distance)>10?e.warn(o,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):r.distance<c.distance?e.warn(o,`Unknown feature: "${s}", did you mean: "${r.mostSimilar}"`):e.warn(o,`Unknown feature: "${s}", did you mean: "${a[c.mostSimilar]}"`)}))}function mostSimilar(s,e){let o="unknown",t=1/0;for(let i=0;i<e.length;i++){const a=levenshteinDistance(s,e[i]);a<t&&(t=a,o=e[i])}return{mostSimilar:o,distance:t}}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),c=a.browsers,n=initializeSharedOptions(a),p=listFeatures(e,a,n,i),l=p.map((s=>s.plugin));!1!==a.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:c},a.autoprefixer))),l.push(o()),logFeaturesList(p,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0,module.exports=creator;
diff --git a/plugin-packs/postcss-preset-env/dist/index.mjs b/plugin-packs/postcss-preset-env/dist/index.mjs
index 361b70c84..ad5a04dc6 100644
--- a/plugin-packs/postcss-preset-env/dist/index.mjs
+++ b/plugin-packs/postcss-preset-env/dist/index.mjs
@@ -1 +1 @@
-import s from"autoprefixer";import e from"cssdb";import o from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import i from"postcss-initial";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import c from"postcss-page-break";import p from"@csstools/postcss-cascade-layers";import n from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"@csstools/postcss-color-mix-function";import f from"postcss-custom-media";import g from"postcss-custom-properties";import b from"postcss-custom-selectors";import h from"postcss-dir-pseudo-class";import N from"@csstools/postcss-normalize-display-values";import v from"postcss-double-position-gradients";import y from"@csstools/postcss-logical-float-and-clear";import k from"postcss-focus-visible";import w from"postcss-focus-within";import F from"@csstools/postcss-font-format-keywords";import x from"postcss-font-variant";import S from"postcss-gap-properties";import $ from"@csstools/postcss-gradients-interpolation-method";import O from"css-has-pseudo";import P from"postcss-color-hex-alpha";import C from"@csstools/postcss-hwb-function";import I from"@csstools/postcss-ic-unit";import U from"postcss-image-set-function";import _ from"@csstools/postcss-is-pseudo-class";import E from"postcss-lab-function";import L from"postcss-logical";import q from"@csstools/postcss-logical-resize";import B from"@csstools/postcss-logical-viewport-units";import A from"@csstools/postcss-media-queries-aspect-ratio-number-values";import j from"@csstools/postcss-media-minmax";import M from"@csstools/postcss-nested-calc";import z from"postcss-nesting";import D from"postcss-selector-not";import R from"@csstools/postcss-oklab-function";import V from"postcss-opacity-percentage";import T from"postcss-overflow-shorthand";import H from"postcss-replace-overflow-wrap";import W from"postcss-place";import G from"css-prefers-color-scheme";import K from"postcss-color-rebeccapurple";import Z from"@csstools/postcss-relative-color-syntax";import Q from"@csstools/postcss-scope-pseudo-class";import J from"@csstools/postcss-stepped-value-functions";import X from"@csstools/postcss-text-decoration-shorthand";import Y from"@csstools/postcss-trigonometric-functions";import ss from"@csstools/postcss-unset-value";const es={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},os=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push("  autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(`  ${s.id} (injected via options)`):i.push(`  ${s.id}`),void 0!==es[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${es[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const ts=2,is=5;function stageFromOptions(s,e){let o=ts;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=is;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,is)}return o===is?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const as=Symbol("insertBefore"),rs=Symbol("insertAfter"),cs=Symbol("insertOrder"),ps=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?as:rs,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;s<a.length;s++)i.push({id:o,[ps]:a[s],[cs]:s,[t]:!0})}return i}var ns=["custom-media-queries","custom-properties","environment-variables","image-set-function","media-query-ranges","media-queries-aspect-ratio-number-values","prefers-color-scheme-query","nesting-rules","custom-selectors","any-link-pseudo-class","case-insensitive-attributes","focus-visible-pseudo-class","focus-within-pseudo-class","not-pseudo-class","logical-properties-and-values","float-clear-logical-values","logical-resize","logical-viewport-units","dir-pseudo-class","all-property","gradients-interpolation-method","color-mix","relative-color-syntax","lab-function","oklab-function","color-function","hwb-function","color-functional-notation","rebeccapurple-color","hexadecimal-alpha-notation","double-position-gradients","blank-pseudo-class","break-properties","font-variant-property","is-pseudo-class","scope-pseudo-class","has-pseudo-class","gap-properties","overflow-property","overflow-wrap-property","place-properties","system-ui-font-family","font-format-keywords","display-two-values","ic-unit","opacity-percentage","text-decoration-shorthand","unset-value","stepped-value-functions","trigonometric-functions","clamp","nested-calc","cascade-layers"];function featureIsLess(s,e){return s.id===e.id?s[as]&&e[as]||s[rs]&&e[rs]?clamp(-1,s[cs]-e[cs],1):s[as]||e[rs]?-1:s[rs]||e[as]?1:0:clamp(-1,ns.indexOf(s.id)-ns.indexOf(e.id),1)}function postcssSystemUiFont(){return{postcssPlugin:"postcss-system-ui-font",Declaration(s){ls.test(s.prop)&&(s.value.includes(us.join(", "))||(s.value=s.value.replace(ds,fs)))}}}postcssSystemUiFont.postcss=!0;const ls=/(?:^(?:-|\\002d){2})|(?:^font(?:-family)?$)/i,ms="[\\f\\n\\r\\x09\\x20]",us=["system-ui","-apple-system","Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans","sans-serif"],ds=new RegExp(`(^|,|${ms}+)(?:system-ui${ms}*)(?:,${ms}*(?:${us.join("|")})${ms}*)?(,|$)`,"i"),fs=`$1${us.join(", ")}$2`,gs=new Map([["all-property",i],["any-link-pseudo-class",a],["blank-pseudo-class",r],["break-properties",c],["cascade-layers",p],["case-insensitive-attributes",n],["clamp",l],["color-function",m],["color-functional-notation",u],["color-mix",d],["custom-media-queries",f],["custom-properties",g],["custom-selectors",b],["dir-pseudo-class",h],["display-two-values",N],["double-position-gradients",v],["float-clear-logical-values",y],["focus-visible-pseudo-class",k],["focus-within-pseudo-class",w],["font-format-keywords",F],["font-variant-property",x],["gap-properties",S],["gradients-interpolation-method",$],["has-pseudo-class",O],["hexadecimal-alpha-notation",P],["hwb-function",C],["ic-unit",I],["image-set-function",U],["is-pseudo-class",_],["lab-function",E],["logical-properties-and-values",L],["logical-resize",q],["logical-viewport-units",B],["media-queries-aspect-ratio-number-values",A],["media-query-ranges",j],["nested-calc",M],["nesting-rules",z],["not-pseudo-class",D],["oklab-function",R],["opacity-percentage",V],["overflow-property",T],["overflow-wrap-property",H],["place-properties",W],["prefers-color-scheme-query",G],["rebeccapurple-color",K],["relative-color-syntax",Z],["scope-pseudo-class",Q],["stepped-value-functions",J],["system-ui-font-family",postcssSystemUiFont],["text-decoration-shorthand",X],["trigonometric-functions",Y],["unset-value",ss]]);function featureIsInsertedOrHasAPlugin(s){return!!s[as]||(!!s[rs]||!!gs.has(s.id))}function prepareFeaturesList(s,e,o){return s.concat(getTransformedInsertions(s,e,"insertBefore"),getTransformedInsertions(s,o,"insertAfter")).filter((s=>featureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const bs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return bs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,a){const r=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),r))return a.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(r.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return a.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[as]||s[rs]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ps],id:o,stage:is+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:gs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let c,p;return c=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in c&&(c.replace=c.preserve),"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),p=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:p,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),p=Object(e.insertAfter),n=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const m=stageFromOptions(e,i),u=prepareFeaturesList(s,c,p).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[as]&&!s[rs])||(l<=s.vendors_implementations||(a[s.id]?(i.log(`  ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(`  ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=m,o=r||!os.includes(s.id),t=!1===a[s.id],c=a[s.id]?a[s.id]:e&&o;return t?i.log(`  ${s.id} has been disabled by options`):e?o||i.log(`  ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(`  ${s.id} does not meet the required stage but has been enabled by options`):i.log(`  ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,n,a,t,o,e,i))),d=t(n,{ignoreUnknownVersions:!0});return u.filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var hs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return hs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=hs.map((s=>s.id)),i=hs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=mostSimilar(s,t),c=mostSimilar(s,i);Math.min(r.distance,c.distance)>10?e.warn(o,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):r.distance<c.distance?e.warn(o,`Unknown feature: "${s}", did you mean: "${r.mostSimilar}"`):e.warn(o,`Unknown feature: "${s}", did you mean: "${a[c.mostSimilar]}"`)}))}function mostSimilar(s,e){let o="unknown",t=1/0;for(let i=0;i<e.length;i++){const a=levenshteinDistance(s,e[i]);a<t&&(t=a,o=e[i])}return{mostSimilar:o,distance:t}}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),c=a.browsers,p=initializeSharedOptions(a),n=listFeatures(e,a,p,i),l=n.map((s=>s.plugin));!1!==a.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:c},a.autoprefixer))),l.push(o()),logFeaturesList(n,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0;export{creator as default};
+import s from"autoprefixer";import e from"cssdb";import o from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import i from"postcss-initial";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import c from"postcss-page-break";import p from"@csstools/postcss-cascade-layers";import n from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"@csstools/postcss-color-mix-function";import f from"postcss-custom-media";import g from"postcss-custom-properties";import b from"postcss-custom-selectors";import h from"postcss-dir-pseudo-class";import N from"@csstools/postcss-normalize-display-values";import v from"postcss-double-position-gradients";import y from"@csstools/postcss-logical-float-and-clear";import k from"postcss-focus-visible";import w from"postcss-focus-within";import F from"@csstools/postcss-font-format-keywords";import x from"postcss-font-variant";import S from"postcss-gap-properties";import $ from"@csstools/postcss-gradients-interpolation-method";import O from"css-has-pseudo";import P from"postcss-color-hex-alpha";import C from"@csstools/postcss-hwb-function";import I from"@csstools/postcss-ic-unit";import U from"postcss-image-set-function";import _ from"@csstools/postcss-is-pseudo-class";import E from"postcss-lab-function";import L from"postcss-logical";import q from"@csstools/postcss-logical-resize";import B from"@csstools/postcss-logical-viewport-units";import A from"@csstools/postcss-media-queries-aspect-ratio-number-values";import j from"@csstools/postcss-media-minmax";import M from"@csstools/postcss-nested-calc";import z from"postcss-nesting";import D from"postcss-selector-not";import R from"@csstools/postcss-oklab-function";import V from"postcss-opacity-percentage";import T from"postcss-overflow-shorthand";import H from"postcss-replace-overflow-wrap";import W from"postcss-place";import G from"css-prefers-color-scheme";import K from"postcss-color-rebeccapurple";import Z from"@csstools/postcss-relative-color-syntax";import Q from"@csstools/postcss-scope-pseudo-class";import J from"@csstools/postcss-stepped-value-functions";import X from"@csstools/postcss-text-decoration-shorthand";import Y from"@csstools/postcss-trigonometric-functions";import ss from"@csstools/postcss-unset-value";const es={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},os=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push("  autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(`  ${s.id} (injected via options)`):i.push(`  ${s.id}`),void 0!==es[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${es[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const ts=2,is=5;function stageFromOptions(s,e){let o=ts;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=is;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,is)}return o===is?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const as=Symbol("insertBefore"),rs=Symbol("insertAfter"),cs=Symbol("insertOrder"),ps=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?as:rs,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;s<a.length;s++)i.push({id:o,[ps]:a[s],[cs]:s,[t]:!0})}return i}var ns=["custom-media-queries","environment-variables","image-set-function","media-query-ranges","media-queries-aspect-ratio-number-values","prefers-color-scheme-query","nesting-rules","custom-selectors","any-link-pseudo-class","case-insensitive-attributes","focus-visible-pseudo-class","focus-within-pseudo-class","not-pseudo-class","logical-properties-and-values","float-clear-logical-values","logical-resize","logical-viewport-units","dir-pseudo-class","all-property","gradients-interpolation-method","color-mix","relative-color-syntax","lab-function","oklab-function","color-function","hwb-function","color-functional-notation","rebeccapurple-color","hexadecimal-alpha-notation","double-position-gradients","blank-pseudo-class","break-properties","font-variant-property","is-pseudo-class","scope-pseudo-class","has-pseudo-class","gap-properties","overflow-property","overflow-wrap-property","place-properties","system-ui-font-family","font-format-keywords","display-two-values","ic-unit","opacity-percentage","text-decoration-shorthand","unset-value","stepped-value-functions","trigonometric-functions","clamp","nested-calc","custom-properties","cascade-layers"];function featureIsLess(s,e){return s.id===e.id?s[as]&&e[as]||s[rs]&&e[rs]?clamp(-1,s[cs]-e[cs],1):s[as]||e[rs]?-1:s[rs]||e[as]?1:0:clamp(-1,ns.indexOf(s.id)-ns.indexOf(e.id),1)}function postcssSystemUiFont(){return{postcssPlugin:"postcss-system-ui-font",Declaration(s){ls.test(s.prop)&&(s.value.includes(us.join(", "))||(s.value=s.value.replace(ds,fs)))}}}postcssSystemUiFont.postcss=!0;const ls=/(?:^(?:-|\\002d){2})|(?:^font(?:-family)?$)/i,ms="[\\f\\n\\r\\x09\\x20]",us=["system-ui","-apple-system","Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans","sans-serif"],ds=new RegExp(`(^|,|${ms}+)(?:system-ui${ms}*)(?:,${ms}*(?:${us.join("|")})${ms}*)?(,|$)`,"i"),fs=`$1${us.join(", ")}$2`,gs=new Map([["all-property",i],["any-link-pseudo-class",a],["blank-pseudo-class",r],["break-properties",c],["cascade-layers",p],["case-insensitive-attributes",n],["clamp",l],["color-function",m],["color-functional-notation",u],["color-mix",d],["custom-media-queries",f],["custom-properties",g],["custom-selectors",b],["dir-pseudo-class",h],["display-two-values",N],["double-position-gradients",v],["float-clear-logical-values",y],["focus-visible-pseudo-class",k],["focus-within-pseudo-class",w],["font-format-keywords",F],["font-variant-property",x],["gap-properties",S],["gradients-interpolation-method",$],["has-pseudo-class",O],["hexadecimal-alpha-notation",P],["hwb-function",C],["ic-unit",I],["image-set-function",U],["is-pseudo-class",_],["lab-function",E],["logical-properties-and-values",L],["logical-resize",q],["logical-viewport-units",B],["media-queries-aspect-ratio-number-values",A],["media-query-ranges",j],["nested-calc",M],["nesting-rules",z],["not-pseudo-class",D],["oklab-function",R],["opacity-percentage",V],["overflow-property",T],["overflow-wrap-property",H],["place-properties",W],["prefers-color-scheme-query",G],["rebeccapurple-color",K],["relative-color-syntax",Z],["scope-pseudo-class",Q],["stepped-value-functions",J],["system-ui-font-family",postcssSystemUiFont],["text-decoration-shorthand",X],["trigonometric-functions",Y],["unset-value",ss]]);function featureIsInsertedOrHasAPlugin(s){return!!s[as]||(!!s[rs]||!!gs.has(s.id))}function prepareFeaturesList(s,e,o){return s.concat(getTransformedInsertions(s,e,"insertBefore"),getTransformedInsertions(s,o,"insertAfter")).filter((s=>featureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const bs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return bs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,a){const r=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),r))return a.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(r.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return a.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[as]||s[rs]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ps],id:o,stage:is+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:gs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let c,p;return c=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in c&&(c.replace=c.preserve),"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),p=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:p,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),p=Object(e.insertAfter),n=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const m=stageFromOptions(e,i),u=prepareFeaturesList(s,c,p).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[as]&&!s[rs])||(l<=s.vendors_implementations||(a[s.id]?(i.log(`  ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(`  ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=m,o=r||!os.includes(s.id),t=!1===a[s.id],c=a[s.id]?a[s.id]:e&&o;return t?i.log(`  ${s.id} has been disabled by options`):e?o||i.log(`  ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(`  ${s.id} does not meet the required stage but has been enabled by options`):i.log(`  ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,n,a,t,o,e,i))),d=t(n,{ignoreUnknownVersions:!0});return u.filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var hs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return hs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=hs.map((s=>s.id)),i=hs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=mostSimilar(s,t),c=mostSimilar(s,i);Math.min(r.distance,c.distance)>10?e.warn(o,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):r.distance<c.distance?e.warn(o,`Unknown feature: "${s}", did you mean: "${r.mostSimilar}"`):e.warn(o,`Unknown feature: "${s}", did you mean: "${a[c.mostSimilar]}"`)}))}function mostSimilar(s,e){let o="unknown",t=1/0;for(let i=0;i<e.length;i++){const a=levenshteinDistance(s,e[i]);a<t&&(t=a,o=e[i])}return{mostSimilar:o,distance:t}}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),c=a.browsers,p=initializeSharedOptions(a),n=listFeatures(e,a,p,i),l=n.map((s=>s.plugin));!1!==a.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:c},a.autoprefixer))),l.push(o()),logFeaturesList(n,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0;export{creator as default};
diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json
index 46e495589..37fe1b99b 100644
--- a/plugin-packs/postcss-preset-env/package.json
+++ b/plugin-packs/postcss-preset-env/package.json
@@ -110,6 +110,7 @@
 		"postcss": "^8.4"
 	},
 	"devDependencies": {
+		"@csstools/postcss-debug-logger": "1.0.0",
 		"@csstools/postcss-tape": "*",
 		"@webref/css": "^6.5.1",
 		"postcss-simple-vars": "^7.0.1"
diff --git a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs
index e657fd0f6..2529ad42d 100644
--- a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs
+++ b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs
@@ -1,7 +1,6 @@
 // ids ordered by required execution, then alphabetically
 export default [
 	'custom-media-queries',
-	'custom-properties',
 	'environment-variables', // run environment-variables here to access transpiled custom media params and properties
 	'image-set-function', // run images-set-function before nesting-rules so that it may fix nested media
 	'media-query-ranges', // run media-query-range
@@ -56,5 +55,8 @@ export default [
 	'nested-calc',
 	// Math functions.
 
+	// must be after all value related rules
+	'custom-properties',
+
 	'cascade-layers',
 ];
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
index 9af6eef9a..4a6844d2f 100644
--- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
@@ -457,7 +457,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -593,7 +593,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -610,3 +610,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css
index 9af6eef9a..4a6844d2f 100644
--- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css
@@ -457,7 +457,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -593,7 +593,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -610,3 +610,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
index 3c3704620..1b3c93bda 100644
--- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
@@ -368,7 +368,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -503,7 +503,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -520,3 +520,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css
index e2e63a79b..1621f73b1 100644
--- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css
@@ -501,7 +501,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -518,3 +518,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css
index c84708d81..5d1153866 100644
--- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css
@@ -512,3 +512,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87 107 149 / var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css
index c84708d81..5d1153866 100644
--- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css
@@ -512,3 +512,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87 107 149 / var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css
index 27a475b89..b9320a51d 100644
--- a/plugin-packs/postcss-preset-env/test/basic.css
+++ b/plugin-packs/postcss-preset-env/test/basic.css
@@ -465,3 +465,8 @@
 	color-8: oklab(from oklab(40% 0.566 0.39) l a b);
 	color-9: oklch(from oklch(40% 0.566 39deg) l c h);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87 107 149 / var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css
index 25ec1b19c..bd3513c0b 100644
--- a/plugin-packs/postcss-preset-env/test/basic.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.expect.css
@@ -474,7 +474,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -612,7 +612,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -629,3 +629,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css
index 4a98bcf2b..cfb502309 100644
--- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css
@@ -504,7 +504,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -521,3 +521,8 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css
index 326687d62..c6614e9db 100644
--- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css
@@ -516,3 +516,8 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87 107 149 / var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css
index b6af4a75b..82271d731 100644
--- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css
@@ -472,7 +472,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -608,7 +608,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -625,3 +625,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css
index 21f23bbbf..eec8364bc 100644
--- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css
@@ -491,7 +491,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -629,7 +629,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -646,3 +646,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css
index bcd82298e..d8778c0fa 100644
--- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css
@@ -472,7 +472,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -610,7 +610,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -627,3 +627,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css
index 754da77b0..6d1493c0a 100644
--- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css
@@ -471,3 +471,8 @@
 	color-8: oklab(from oklab(40% 0.566 0.39) l a b);
 	color-9: oklch(from oklch(40% 0.566 39deg) l c h);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87 107 149 / var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css
index 10d1d2580..ad55dca99 100644
--- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css
@@ -456,7 +456,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -590,7 +590,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -607,3 +607,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css
index 4fce6ad87..6515940fe 100644
--- a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css
@@ -788,3 +788,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css
index 9555d2de7..89e60e6dd 100644
--- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css
@@ -812,8 +812,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	text-indent: 2ic;
 	content: var(--value-2ic);
 	left: 2em;
+	left: var(--non-existing, 2em);
 	left: 2ic;
-	left: var(--non-existing, 2ic);
 	width: -webkit-calc(8em + 20px);
 	width: -moz-calc(8em + 20px);
 	width: calc(8em + 20px);
@@ -826,6 +826,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	padding: 2    ic;
 }
 
+@supports (font-size: 1ic) and (top: var(--f)) {
+.ic-unit {
+	left: var(--non-existing, 2ic);
+}
+}
+
 .unset {
 	clip: unset;
 }
@@ -1047,14 +1053,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 }
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
-.gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
-}
-@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {
 .gradients-interpolation-method {
 	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
-	}
 }
 
 .test-css-color-5-interop {
@@ -1079,3 +1080,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: color(display-p3 0.48896 0.1211 0);
 	color-9: oklch(from oklch(40% 0.566 39deg) l c h);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+	color: rgba(87 107 149 / 1);
+}
+
+@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) {
+.test-property-with-var {
+	color: rgba(87 107 149 / var(--opacity));
+}
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css
index 358e57796..3da2664c1 100644
--- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css
@@ -499,3 +499,8 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87 107 149 / var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css
index dcc738948..01de54768 100644
--- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css
@@ -500,7 +500,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -517,3 +517,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css
index 8f8b2aba9..73edd9897 100644
--- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css
@@ -512,3 +512,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87 107 149 / var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
index a561ae331..eead4c3f7 100644
--- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
@@ -472,7 +472,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -608,7 +608,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -625,3 +625,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css
index be05f13b9..cc1b87217 100644
--- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css
@@ -478,7 +478,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -618,7 +618,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -635,3 +635,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css
index 2cf523600..35d9a937f 100644
--- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css
@@ -478,7 +478,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -618,7 +618,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -635,3 +635,9 @@
 	color-9: oklch(from rgb(130, 31, 0) l c h);
 	color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css
index f901e3c8b..68f420b7b 100644
--- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css
@@ -450,7 +450,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -589,3 +589,9 @@
 	color-9: oklch(from rgb(130, 31, 0) l c h);
 	color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
index acddbdd79..7b4cf315c 100644
--- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
+++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
@@ -665,7 +665,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	content: 'something';
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: -webkit-calc(8em + 20px);
 	width: -moz-calc(8em + 20px);
 	width: calc(8em + 20px);
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
index 1939f5be4..126643568 100644
--- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
+++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
@@ -812,8 +812,8 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	content: 'something';
 	content: var(--value-2ic);
 	left: 2em;
+	left: var(--non-existing, 2em);
 	left: 2ic;
-	left: var(--non-existing, 2ic);
 	width: -webkit-calc(8em + 20px);
 	width: -moz-calc(8em + 20px);
 	width: calc(8em + 20px);
@@ -826,6 +826,12 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	padding: 2    ic;
 }
 
+@supports (font-size: 1ic) and (top: var(--f)){
+.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+	left: var(--non-existing, 2ic);
+}
+}
+
 .unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 	clip: unset;
 }
diff --git a/plugins/postcss-color-function/test/basic.preserve-true.expect.css b/plugins/postcss-color-function/test/basic.preserve-true.expect.css
index ba57e0e34..e114f7ccb 100644
--- a/plugins/postcss-color-function/test/basic.preserve-true.expect.css
+++ b/plugins/postcss-color-function/test/basic.preserve-true.expect.css
@@ -13,8 +13,13 @@
 	color-3: rgb(0, 0, 0);
 	color-3: color(display-P3 0 0 0 / CALC(1 + 1));
 	color-4: rgba(255, 255, 255, VAR(--ALPHA));
+}
+
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-case {
 	color-4: color(Display-P3 1 1 1 / VAR(--ALPHA));
 }
+}
 
 .test-color-none {
 	color-1: color(display-p3 none);
@@ -127,10 +132,15 @@
 	color-3: rgb(7, 3, 1);
 	color-3: color(display-p3 0.02472 0.01150 0.00574 / calc(20% * 5));
 	color-4: rgba(7, 3, 1, var(--foo));
-	color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo));
 	color-5: color(display-p3 0.02472 0.01150 0.00574 /);
 }
 
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-alpha {
+	color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo));
+}
+}
+
 
 .test-ignore {
 	prop-1: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
diff --git a/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css
index a9125302e..28f5138c9 100644
--- a/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css
+++ b/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css
@@ -13,8 +13,13 @@
 	color-3: rgb(0, 0, 0);
 	color-3: color(display-P3 0 0 0 / CALC(1 + 1));
 	color-4: rgba(255, 255, 255, VAR(--ALPHA));
+}
+
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-case {
 	color-4: color(Display-P3 1 1 1 / VAR(--ALPHA));
 }
+}
 
 .test-color-none {
 	color-1: color(display-p3 none);
@@ -127,10 +132,15 @@
 	color-3: rgb(7, 3, 1);
 	color-3: color(display-p3 0.02472 0.01150 0.00574 / calc(20% * 5));
 	color-4: rgba(7, 3, 1, var(--foo));
-	color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo));
 	color-5: color(display-p3 0.02472 0.01150 0.00574 /);
 }
 
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-alpha {
+	color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo));
+}
+}
+
 
 .test-ignore {
 	prop-1: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
diff --git a/plugins/postcss-color-function/test/variables.preserve-true.expect.css b/plugins/postcss-color-function/test/variables.preserve-true.expect.css
index c0c5cfb33..43af77185 100644
--- a/plugins/postcss-color-function/test/variables.preserve-true.expect.css
+++ b/plugins/postcss-color-function/test/variables.preserve-true.expect.css
@@ -13,6 +13,11 @@
 :root {
 	--one: color(srgb 0.64331 0.19245 0.16771);
 	--one-a50: color(srgb 0.64331 0.19245 0.16771 / 50);
+}
+}
+
+@supports (color: color(srgb 0 0 0)) and (top: var(--f)) {
+:root {
 	--one-a50-var: color(srgb 0.64331 0.19245 0.16771 / var(--opacity-50));
 }
 }
diff --git a/plugins/postcss-color-functional-notation/CHANGELOG.md b/plugins/postcss-color-functional-notation/CHANGELOG.md
index a8addc31d..5df8dcdf0 100644
--- a/plugins/postcss-color-functional-notation/CHANGELOG.md
+++ b/plugins/postcss-color-functional-notation/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to PostCSS Color Functional Notation
 
+### Unreleased (minor)
+
+- Added `@csstools/postcss-progressive-custom-properties` for improved support of custom properties.
+
 ### 5.0.2 (February 6, 2023)
 
 - Reduce the amount of duplicate fallback CSS.
diff --git a/plugins/postcss-color-functional-notation/README.md b/plugins/postcss-color-functional-notation/README.md
index 8feeb3af3..702ffd4a5 100644
--- a/plugins/postcss-color-functional-notation/README.md
+++ b/plugins/postcss-color-functional-notation/README.md
@@ -58,7 +58,7 @@ The `preserve` option determines whether the original functional color notation
 is preserved. By default, it is not preserved.
 
 ```js
-postcssImageSetFunction({ preserve: true })
+postcssColorFunctionalNotation({ preserve: true })
 ```
 
 ```pcss
@@ -83,6 +83,17 @@ postcssImageSetFunction({ preserve: true })
 }
 ```
 
+### enableProgressiveCustomProperties
+
+The `enableProgressiveCustomProperties` option determines whether the original notation
+is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
+
+⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+
+```js
+postcssColorFunctionalNotation({ enableProgressiveCustomProperties: false })
+```
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#color-functional-notation
 [discord]: https://discord.gg/bUadyRwkJS
diff --git a/plugins/postcss-color-functional-notation/dist/index.cjs b/plugins/postcss-color-functional-notation/dist/index.cjs
index 57c9ad33b..a0bbd404a 100644
--- a/plugins/postcss-color-functional-notation/dist/index.cjs
+++ b/plugins/postcss-color-functional-notation/dist/index.cjs
@@ -1 +1 @@
-"use strict";var e=require("postcss-value-parser");function onCSSFunction(e){const r=e.value.toLowerCase();if(!needsConversion("rgb"===r||"rgba"===r,e.nodes))return;const n=convertOldSyntaxToNewSyntaxBeforeTransform(e.nodes).slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let t=null;if("hsl"===r||"hsla"===r?t=hslFunctionContents(n):"rgb"!==r&&"rgba"!==r||(t=rgbFunctionContents(n)),!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;transformAlpha(e,t.slash,t.alpha);const[o,u]=channelNodes(t);e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(u)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""})}function isNumericNode(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);return!!n&&!!n.number}function isNumericNodeHueLike(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);if(!n)return!1;const t=n.unit.toLowerCase();return!!n.number&&("deg"===t||"grad"===t||"rad"===t||"turn"===t||""===n.unit)}function isNumericNodePercentageOrNumber(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);return!!n&&("%"===n.unit||""===n.unit)}function isCalcNode(e){return e&&"function"===e.type&&"calc"===e.value.toLowerCase()}function isVarNode(e){return e&&"function"===e.type&&"var"===e.value.toLowerCase()}function isSlashNode(e){return e&&"div"===e.type&&"/"===e.value}function hslFunctionContents(r){if(!isNumericNodeHueLike(r[0]))return null;if(!isNumericNodePercentageOrNumber(r[1]))return null;if(!isNumericNodePercentageOrNumber(r[2]))return null;const n={h:e.unit(r[0].value),hNode:r[0],s:e.unit(r[1].value),sNode:r[1],l:e.unit(r[2].value),lNode:r[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(n.hNode.value=n.h.number,isSlashNode(r[3])&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n)}function rgbFunctionContents(r){if(!isNumericNodePercentageOrNumber(r[0]))return null;if(!isNumericNodePercentageOrNumber(r[1]))return null;if(!isNumericNodePercentageOrNumber(r[2]))return null;const n={r:e.unit(r[0].value),rNode:r[0],g:e.unit(r[1].value),gNode:r[1],b:e.unit(r[2].value),bNode:r[2]};return"%"===n.r.unit&&(n.r.number=String(Math.floor(Number(n.r.number)/100*255)),n.rNode.value=n.r.number),"%"===n.g.unit&&(n.g.number=String(Math.floor(Number(n.g.number)/100*255)),n.gNode.value=n.g.number),"%"===n.b.unit&&(n.b.number=String(Math.floor(Number(n.b.number)/100*255)),n.bNode.value=n.b.number),isSlashNode(r[3])&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n}function isRgb(e){return void 0!==e.r}function channelNodes(e){return isRgb(e)?[e.rNode,e.gNode,e.bNode]:[e.hNode,e.sNode,e.lNode]}function transformAlpha(r,n,t){if("hsl"===r.value.toLowerCase()||"hsla"===r.value.toLowerCase()?r.value="hsl":"rgb"!==r.value.toLowerCase()&&"rgba"!==r.value.toLowerCase()||(r.value="rgb"),!n||!t)return;if("hsl"===r.value.toLowerCase()?r.value="hsla":r.value="rgba",n.value=",",n.before="",!isNumericNode(t))return;const o=e.unit(t.value);o&&"%"===o.unit&&(o.number=String(parseFloat(o.number)/100),t.value=String(o.number))}function normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=Math.round(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=Math.round(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=Math.round(360*parseFloat(e.number)).toString())}}function canParseAsUnit(r){if(!r||!r.value)return!1;try{return!1!==e.unit(r.value)}catch(e){return!1}}function convertOldSyntaxToNewSyntaxBeforeTransform(e){let r=0;for(let n=0;n<e.length;n++){const t=e[n];if("div"===t.type&&","===t.value){if(r<2&&(t.value=" ",t.type="space"),2===r&&(t.value="/"),r>2)return[];r++}}return e}function needsConversion(e,r){let n=!1,t=!1,o=!1;const u=r.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));for(let a=0;a<u.length;a++){const s=u[a];if("word"===s.type&&"from"===s.value.toLowerCase())return!1;"div"!==s.type||","!==s.value?e&&"word"===s.type&&s.value.endsWith("%")?o=!0:a===r.length-1&&"word"===s.type&&s.value.endsWith("%")&&(t=!0):n=!0}return!(!n||!t&&!o)||!n}function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&-1!==r.params.toLowerCase().indexOf("(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))"))return!0;r=r.parent}else r=r.parent;return!1}function hasFallback(e){const r=e.parent;if(!r)return!1;const n=e.prop.toLowerCase(),t=r.index(e);for(let e=0;e<t;e++){const t=r.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===n)return!0}return!1}const postcssPlugin=r=>{const n="preserve"in Object(r)&&Boolean(null==r?void 0:r.preserve);return{postcssPlugin:"postcss-color-functional-notation",Declaration:(r,{result:t,postcss:o})=>{const u=r.value,a=u.toLowerCase();if(!(a.includes("rgb")||a.includes("rgba")||a.includes("hsl")||a.includes("hsla")))return;if(hasFallback(r))return;if(hasSupportsAtRuleAncestor(r))return;let s;try{s=e(u)}catch(e){r.warn(t,`Failed to parse value '${u}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===s)return;s.walk((e=>{if(!e.type||"function"!==e.type)return;const r=e.value.toLowerCase();"hsl"!==r&&"hsla"!==r&&"rgb"!==r&&"rgba"!==r||onCSSFunction(e)}));const i=String(s);if(i!==u)if(n&&r.variable&&r.parent){const e=r.parent,n="(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))",t=o.atRule({name:"supports",params:n,source:r.source}),u=e.clone();u.removeAll(),u.append(r.clone()),t.append(u);let a=e,s=e.next();for(;a&&s&&"atrule"===s.type&&"supports"===s.name&&s.params===n;)a=s,s=s.next();a.after(t),r.replaceWith(r.clone({value:i}))}else n?r.cloneBefore({value:i}):r.replaceWith(r.clone({value:i}))}}};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),r=require("postcss-value-parser");function onCSSFunction(e){const r=e.value.toLowerCase();if(!needsConversion("rgb"===r||"rgba"===r,e.nodes))return;const n=convertOldSyntaxToNewSyntaxBeforeTransform(e.nodes).slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let t=null;if("hsl"===r||"hsla"===r?t=hslFunctionContents(n):"rgb"!==r&&"rgba"!==r||(t=rgbFunctionContents(n)),!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;transformAlpha(e,t.slash,t.alpha);const[o,u]=channelNodes(t);e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(u)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""})}function isNumericNode(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);return!!n&&!!n.number}function isNumericNodeHueLike(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);if(!n)return!1;const t=n.unit.toLowerCase();return!!n.number&&("deg"===t||"grad"===t||"rad"===t||"turn"===t||""===n.unit)}function isNumericNodePercentageOrNumber(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);return!!n&&("%"===n.unit||""===n.unit)}function isCalcNode(e){return e&&"function"===e.type&&"calc"===e.value.toLowerCase()}function isVarNode(e){return e&&"function"===e.type&&"var"===e.value.toLowerCase()}function isSlashNode(e){return e&&"div"===e.type&&"/"===e.value}function hslFunctionContents(e){if(!isNumericNodeHueLike(e[0]))return null;if(!isNumericNodePercentageOrNumber(e[1]))return null;if(!isNumericNodePercentageOrNumber(e[2]))return null;const n={h:r.unit(e[0].value),hNode:e[0],s:r.unit(e[1].value),sNode:e[1],l:r.unit(e[2].value),lNode:e[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(n.hNode.value=n.h.number,isSlashNode(e[3])&&(n.slash=e[3]),(isNumericNodePercentageOrNumber(e[4])||isCalcNode(e[4])||isVarNode(e[4]))&&(n.alpha=e[4]),n)}function rgbFunctionContents(e){if(!isNumericNodePercentageOrNumber(e[0]))return null;if(!isNumericNodePercentageOrNumber(e[1]))return null;if(!isNumericNodePercentageOrNumber(e[2]))return null;const n={r:r.unit(e[0].value),rNode:e[0],g:r.unit(e[1].value),gNode:e[1],b:r.unit(e[2].value),bNode:e[2]};return"%"===n.r.unit&&(n.r.number=String(Math.floor(Number(n.r.number)/100*255)),n.rNode.value=n.r.number),"%"===n.g.unit&&(n.g.number=String(Math.floor(Number(n.g.number)/100*255)),n.gNode.value=n.g.number),"%"===n.b.unit&&(n.b.number=String(Math.floor(Number(n.b.number)/100*255)),n.bNode.value=n.b.number),isSlashNode(e[3])&&(n.slash=e[3]),(isNumericNodePercentageOrNumber(e[4])||isCalcNode(e[4])||isVarNode(e[4]))&&(n.alpha=e[4]),n}function isRgb(e){return void 0!==e.r}function channelNodes(e){return isRgb(e)?[e.rNode,e.gNode,e.bNode]:[e.hNode,e.sNode,e.lNode]}function transformAlpha(e,n,t){if("hsl"===e.value.toLowerCase()||"hsla"===e.value.toLowerCase()?e.value="hsl":"rgb"!==e.value.toLowerCase()&&"rgba"!==e.value.toLowerCase()||(e.value="rgb"),!n||!t)return;if("hsl"===e.value.toLowerCase()?e.value="hsla":e.value="rgba",n.value=",",n.before="",!isNumericNode(t))return;const o=r.unit(t.value);o&&"%"===o.unit&&(o.number=String(parseFloat(o.number)/100),t.value=String(o.number))}function normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=Math.round(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=Math.round(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=Math.round(360*parseFloat(e.number)).toString())}}function canParseAsUnit(e){if(!e||!e.value)return!1;try{return!1!==r.unit(e.value)}catch(e){return!1}}function convertOldSyntaxToNewSyntaxBeforeTransform(e){let r=0;for(let n=0;n<e.length;n++){const t=e[n];if("div"===t.type&&","===t.value){if(r<2&&(t.value=" ",t.type="space"),2===r&&(t.value="/"),r>2)return[];r++}}return e}function needsConversion(e,r){let n=!1,t=!1,o=!1;const u=r.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));for(let s=0;s<u.length;s++){const a=u[s];if("word"===a.type&&"from"===a.value.toLowerCase())return!1;"div"!==a.type||","!==a.value?e&&"word"===a.type&&a.value.endsWith("%")?o=!0:s===r.length-1&&"word"===a.type&&a.value.endsWith("%")&&(t=!0):n=!0}return!(!n||!t&&!o)||!n}const n=/(\(color: rgb(a?)\(0 0 0 \/ 0)|(\(color: hsl(a?)\(0 0% 0% \/ 0)/i;function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&n.test(r.params))return!0;r=r.parent}else r=r.parent;return!1}function hasFallback(e){const r=e.parent;if(!r)return!1;const n=e.prop.toLowerCase(),t=r.index(e);for(let e=0;e<t;e++){const t=r.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===n)return!0}return!1}const basePlugin=e=>({postcssPlugin:"postcss-color-function",Declaration:(n,{result:t})=>{const o=n.value,u=o.toLowerCase();if(!(u.includes("rgb")||u.includes("rgba")||u.includes("hsl")||u.includes("hsla")))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;let s;try{s=r(o)}catch(e){n.warn(t,`Failed to parse value '${o}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===s)return;s.walk((e=>{if(!e.type||"function"!==e.type)return;const r=e.value.toLowerCase();"hsl"!==r&&"hsla"!==r&&"rgb"!==r&&"rgba"!==r||onCSSFunction(e)}));const a=String(s);a!==o&&(n.cloneBefore({value:a}),null!=e&&e.preserve||n.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const n=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return n.enableProgressiveCustomProperties&&n.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(n)]}:basePlugin(n)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
diff --git a/plugins/postcss-color-functional-notation/dist/index.d.ts b/plugins/postcss-color-functional-notation/dist/index.d.ts
index 7bb7b32b8..7ed2f388e 100644
--- a/plugins/postcss-color-functional-notation/dist/index.d.ts
+++ b/plugins/postcss-color-functional-notation/dist/index.d.ts
@@ -3,7 +3,8 @@ import type { PluginCreator } from 'postcss';
 export type pluginOptions = {
     /** Preserve the original notation. default: false */
     preserve?: boolean;
+    /** Enable "@csstools/postcss-progressive-custom-properties". default: true */
+    enableProgressiveCustomProperties?: boolean;
 };
-/** Transform lab() and lch() functions in CSS. */
 declare const postcssPlugin: PluginCreator<pluginOptions>;
 export default postcssPlugin;
diff --git a/plugins/postcss-color-functional-notation/dist/index.mjs b/plugins/postcss-color-functional-notation/dist/index.mjs
index c545318c5..e8e83e992 100644
--- a/plugins/postcss-color-functional-notation/dist/index.mjs
+++ b/plugins/postcss-color-functional-notation/dist/index.mjs
@@ -1 +1 @@
-import e from"postcss-value-parser";function onCSSFunction(e){const r=e.value.toLowerCase();if(!needsConversion("rgb"===r||"rgba"===r,e.nodes))return;const n=convertOldSyntaxToNewSyntaxBeforeTransform(e.nodes).slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let t=null;if("hsl"===r||"hsla"===r?t=hslFunctionContents(n):"rgb"!==r&&"rgba"!==r||(t=rgbFunctionContents(n)),!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;transformAlpha(e,t.slash,t.alpha);const[o,u]=channelNodes(t);e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(u)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""})}function isNumericNode(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);return!!n&&!!n.number}function isNumericNodeHueLike(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);if(!n)return!1;const t=n.unit.toLowerCase();return!!n.number&&("deg"===t||"grad"===t||"rad"===t||"turn"===t||""===n.unit)}function isNumericNodePercentageOrNumber(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);return!!n&&("%"===n.unit||""===n.unit)}function isCalcNode(e){return e&&"function"===e.type&&"calc"===e.value.toLowerCase()}function isVarNode(e){return e&&"function"===e.type&&"var"===e.value.toLowerCase()}function isSlashNode(e){return e&&"div"===e.type&&"/"===e.value}function hslFunctionContents(r){if(!isNumericNodeHueLike(r[0]))return null;if(!isNumericNodePercentageOrNumber(r[1]))return null;if(!isNumericNodePercentageOrNumber(r[2]))return null;const n={h:e.unit(r[0].value),hNode:r[0],s:e.unit(r[1].value),sNode:r[1],l:e.unit(r[2].value),lNode:r[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(n.hNode.value=n.h.number,isSlashNode(r[3])&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n)}function rgbFunctionContents(r){if(!isNumericNodePercentageOrNumber(r[0]))return null;if(!isNumericNodePercentageOrNumber(r[1]))return null;if(!isNumericNodePercentageOrNumber(r[2]))return null;const n={r:e.unit(r[0].value),rNode:r[0],g:e.unit(r[1].value),gNode:r[1],b:e.unit(r[2].value),bNode:r[2]};return"%"===n.r.unit&&(n.r.number=String(Math.floor(Number(n.r.number)/100*255)),n.rNode.value=n.r.number),"%"===n.g.unit&&(n.g.number=String(Math.floor(Number(n.g.number)/100*255)),n.gNode.value=n.g.number),"%"===n.b.unit&&(n.b.number=String(Math.floor(Number(n.b.number)/100*255)),n.bNode.value=n.b.number),isSlashNode(r[3])&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n}function isRgb(e){return void 0!==e.r}function channelNodes(e){return isRgb(e)?[e.rNode,e.gNode,e.bNode]:[e.hNode,e.sNode,e.lNode]}function transformAlpha(r,n,t){if("hsl"===r.value.toLowerCase()||"hsla"===r.value.toLowerCase()?r.value="hsl":"rgb"!==r.value.toLowerCase()&&"rgba"!==r.value.toLowerCase()||(r.value="rgb"),!n||!t)return;if("hsl"===r.value.toLowerCase()?r.value="hsla":r.value="rgba",n.value=",",n.before="",!isNumericNode(t))return;const o=e.unit(t.value);o&&"%"===o.unit&&(o.number=String(parseFloat(o.number)/100),t.value=String(o.number))}function normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=Math.round(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=Math.round(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=Math.round(360*parseFloat(e.number)).toString())}}function canParseAsUnit(r){if(!r||!r.value)return!1;try{return!1!==e.unit(r.value)}catch(e){return!1}}function convertOldSyntaxToNewSyntaxBeforeTransform(e){let r=0;for(let n=0;n<e.length;n++){const t=e[n];if("div"===t.type&&","===t.value){if(r<2&&(t.value=" ",t.type="space"),2===r&&(t.value="/"),r>2)return[];r++}}return e}function needsConversion(e,r){let n=!1,t=!1,o=!1;const u=r.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));for(let a=0;a<u.length;a++){const s=u[a];if("word"===s.type&&"from"===s.value.toLowerCase())return!1;"div"!==s.type||","!==s.value?e&&"word"===s.type&&s.value.endsWith("%")?o=!0:a===r.length-1&&"word"===s.type&&s.value.endsWith("%")&&(t=!0):n=!0}return!(!n||!t&&!o)||!n}function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&-1!==r.params.toLowerCase().indexOf("(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))"))return!0;r=r.parent}else r=r.parent;return!1}function hasFallback(e){const r=e.parent;if(!r)return!1;const n=e.prop.toLowerCase(),t=r.index(e);for(let e=0;e<t;e++){const t=r.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===n)return!0}return!1}const postcssPlugin=r=>{const n="preserve"in Object(r)&&Boolean(null==r?void 0:r.preserve);return{postcssPlugin:"postcss-color-functional-notation",Declaration:(r,{result:t,postcss:o})=>{const u=r.value,a=u.toLowerCase();if(!(a.includes("rgb")||a.includes("rgba")||a.includes("hsl")||a.includes("hsla")))return;if(hasFallback(r))return;if(hasSupportsAtRuleAncestor(r))return;let s;try{s=e(u)}catch(e){r.warn(t,`Failed to parse value '${u}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===s)return;s.walk((e=>{if(!e.type||"function"!==e.type)return;const r=e.value.toLowerCase();"hsl"!==r&&"hsla"!==r&&"rgb"!==r&&"rgba"!==r||onCSSFunction(e)}));const i=String(s);if(i!==u)if(n&&r.variable&&r.parent){const e=r.parent,n="(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))",t=o.atRule({name:"supports",params:n,source:r.source}),u=e.clone();u.removeAll(),u.append(r.clone()),t.append(u);let a=e,s=e.next();for(;a&&s&&"atrule"===s.type&&"supports"===s.name&&s.params===n;)a=s,s=s.next();a.after(t),r.replaceWith(r.clone({value:i}))}else n?r.cloneBefore({value:i}):r.replaceWith(r.clone({value:i}))}}};postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import e from"@csstools/postcss-progressive-custom-properties";import r from"postcss-value-parser";function onCSSFunction(e){const r=e.value.toLowerCase();if(!needsConversion("rgb"===r||"rgba"===r,e.nodes))return;const n=convertOldSyntaxToNewSyntaxBeforeTransform(e.nodes).slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let t=null;if("hsl"===r||"hsla"===r?t=hslFunctionContents(n):"rgb"!==r&&"rgba"!==r||(t=rgbFunctionContents(n)),!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;transformAlpha(e,t.slash,t.alpha);const[o,u]=channelNodes(t);e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(u)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""})}function isNumericNode(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);return!!n&&!!n.number}function isNumericNodeHueLike(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);if(!n)return!1;const t=n.unit.toLowerCase();return!!n.number&&("deg"===t||"grad"===t||"rad"===t||"turn"===t||""===n.unit)}function isNumericNodePercentageOrNumber(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);return!!n&&("%"===n.unit||""===n.unit)}function isCalcNode(e){return e&&"function"===e.type&&"calc"===e.value.toLowerCase()}function isVarNode(e){return e&&"function"===e.type&&"var"===e.value.toLowerCase()}function isSlashNode(e){return e&&"div"===e.type&&"/"===e.value}function hslFunctionContents(e){if(!isNumericNodeHueLike(e[0]))return null;if(!isNumericNodePercentageOrNumber(e[1]))return null;if(!isNumericNodePercentageOrNumber(e[2]))return null;const n={h:r.unit(e[0].value),hNode:e[0],s:r.unit(e[1].value),sNode:e[1],l:r.unit(e[2].value),lNode:e[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(n.hNode.value=n.h.number,isSlashNode(e[3])&&(n.slash=e[3]),(isNumericNodePercentageOrNumber(e[4])||isCalcNode(e[4])||isVarNode(e[4]))&&(n.alpha=e[4]),n)}function rgbFunctionContents(e){if(!isNumericNodePercentageOrNumber(e[0]))return null;if(!isNumericNodePercentageOrNumber(e[1]))return null;if(!isNumericNodePercentageOrNumber(e[2]))return null;const n={r:r.unit(e[0].value),rNode:e[0],g:r.unit(e[1].value),gNode:e[1],b:r.unit(e[2].value),bNode:e[2]};return"%"===n.r.unit&&(n.r.number=String(Math.floor(Number(n.r.number)/100*255)),n.rNode.value=n.r.number),"%"===n.g.unit&&(n.g.number=String(Math.floor(Number(n.g.number)/100*255)),n.gNode.value=n.g.number),"%"===n.b.unit&&(n.b.number=String(Math.floor(Number(n.b.number)/100*255)),n.bNode.value=n.b.number),isSlashNode(e[3])&&(n.slash=e[3]),(isNumericNodePercentageOrNumber(e[4])||isCalcNode(e[4])||isVarNode(e[4]))&&(n.alpha=e[4]),n}function isRgb(e){return void 0!==e.r}function channelNodes(e){return isRgb(e)?[e.rNode,e.gNode,e.bNode]:[e.hNode,e.sNode,e.lNode]}function transformAlpha(e,n,t){if("hsl"===e.value.toLowerCase()||"hsla"===e.value.toLowerCase()?e.value="hsl":"rgb"!==e.value.toLowerCase()&&"rgba"!==e.value.toLowerCase()||(e.value="rgb"),!n||!t)return;if("hsl"===e.value.toLowerCase()?e.value="hsla":e.value="rgba",n.value=",",n.before="",!isNumericNode(t))return;const o=r.unit(t.value);o&&"%"===o.unit&&(o.number=String(parseFloat(o.number)/100),t.value=String(o.number))}function normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=Math.round(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=Math.round(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=Math.round(360*parseFloat(e.number)).toString())}}function canParseAsUnit(e){if(!e||!e.value)return!1;try{return!1!==r.unit(e.value)}catch(e){return!1}}function convertOldSyntaxToNewSyntaxBeforeTransform(e){let r=0;for(let n=0;n<e.length;n++){const t=e[n];if("div"===t.type&&","===t.value){if(r<2&&(t.value=" ",t.type="space"),2===r&&(t.value="/"),r>2)return[];r++}}return e}function needsConversion(e,r){let n=!1,t=!1,o=!1;const u=r.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));for(let s=0;s<u.length;s++){const a=u[s];if("word"===a.type&&"from"===a.value.toLowerCase())return!1;"div"!==a.type||","!==a.value?e&&"word"===a.type&&a.value.endsWith("%")?o=!0:s===r.length-1&&"word"===a.type&&a.value.endsWith("%")&&(t=!0):n=!0}return!(!n||!t&&!o)||!n}const n=/(\(color: rgb(a?)\(0 0 0 \/ 0)|(\(color: hsl(a?)\(0 0% 0% \/ 0)/i;function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&n.test(r.params))return!0;r=r.parent}else r=r.parent;return!1}function hasFallback(e){const r=e.parent;if(!r)return!1;const n=e.prop.toLowerCase(),t=r.index(e);for(let e=0;e<t;e++){const t=r.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===n)return!0}return!1}const basePlugin=e=>({postcssPlugin:"postcss-color-function",Declaration:(n,{result:t})=>{const o=n.value,u=o.toLowerCase();if(!(u.includes("rgb")||u.includes("rgba")||u.includes("hsl")||u.includes("hsla")))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;let s;try{s=r(o)}catch(e){n.warn(t,`Failed to parse value '${o}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===s)return;s.walk((e=>{if(!e.type||"function"!==e.type)return;const r=e.value.toLowerCase();"hsl"!==r&&"hsla"!==r&&"rgb"!==r&&"rgba"!==r||onCSSFunction(e)}));const a=String(s);a!==o&&(n.cloneBefore({value:a}),null!=e&&e.preserve||n.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const n=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return n.enableProgressiveCustomProperties&&n.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(n)]}:basePlugin(n)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
diff --git a/plugins/postcss-color-functional-notation/package.json b/plugins/postcss-color-functional-notation/package.json
index aeddd7b52..d86cf0d13 100644
--- a/plugins/postcss-color-functional-notation/package.json
+++ b/plugins/postcss-color-functional-notation/package.json
@@ -35,6 +35,7 @@
 		"dist"
 	],
 	"dependencies": {
+		"@csstools/postcss-progressive-custom-properties": "^2.2.0",
 		"postcss-value-parser": "^4.2.0"
 	},
 	"peerDependencies": {
diff --git a/plugins/postcss-color-functional-notation/src/has-supports-at-rule-ancestor.ts b/plugins/postcss-color-functional-notation/src/has-supports-at-rule-ancestor.ts
index 214ba0227..13a709045 100644
--- a/plugins/postcss-color-functional-notation/src/has-supports-at-rule-ancestor.ts
+++ b/plugins/postcss-color-functional-notation/src/has-supports-at-rule-ancestor.ts
@@ -1,5 +1,7 @@
 import type { Node, AtRule } from 'postcss';
 
+const supportsCheck = /(\(color: rgb(a?)\(0 0 0 \/ 0)|(\(color: hsl(a?)\(0 0% 0% \/ 0)/i;
+
 export function hasSupportsAtRuleAncestor(node: Node): boolean {
 	let parent = node.parent;
 	while (parent) {
@@ -8,7 +10,7 @@ export function hasSupportsAtRuleAncestor(node: Node): boolean {
 			continue;
 		}
 
-		if ((parent as AtRule).name === 'supports' && (parent as AtRule).params.toLowerCase().indexOf('(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))') !== -1) {
+		if ((parent as AtRule).name === 'supports' && supportsCheck.test((parent as AtRule).params)) {
 			return true;
 		}
 
diff --git a/plugins/postcss-color-functional-notation/src/index.ts b/plugins/postcss-color-functional-notation/src/index.ts
index 2bc442a83..954aeac58 100644
--- a/plugins/postcss-color-functional-notation/src/index.ts
+++ b/plugins/postcss-color-functional-notation/src/index.ts
@@ -1,25 +1,22 @@
+import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
 import valueParser from 'postcss-value-parser';
 import type { ParsedValue, FunctionNode } from 'postcss-value-parser';
-import type { Declaration, Postcss, Result } from 'postcss';
+import type { Declaration, Result } from 'postcss';
 import onCSSFunction from './on-css-function';
 
 import type { PluginCreator } from 'postcss';
 import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor';
 import { hasFallback } from './has-fallback-decl';
 
-/** postcss-color-functional-notation plugin options */
-export type pluginOptions = {
-	/** Preserve the original notation. default: false */
-	preserve?: boolean,
-};
-
-/** Transform lab() and lch() functions in CSS. */
-const postcssPlugin: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
-	const preserve = 'preserve' in Object(opts) ? Boolean(opts?.preserve) : false;
+type basePluginOptions = {
+	preserve: boolean,
+}
 
+/* Transform the color functional notation in CSS. */
+const basePlugin: PluginCreator<basePluginOptions> = (opts?: basePluginOptions) => {
 	return {
-		postcssPlugin: 'postcss-color-functional-notation',
-		Declaration: (decl: Declaration, { result, postcss }: { result: Result, postcss: Postcss }) => {
+		postcssPlugin: 'postcss-color-function',
+		Declaration: (decl: Declaration, { result }: { result: Result }) => {
 			const originalValue = decl.value;
 			const lowerCaseValue = originalValue.toLowerCase();
 			if (
@@ -39,7 +36,7 @@ const postcssPlugin: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				return;
 			}
 
-			let valueAST: ParsedValue|undefined;
+			let valueAST: ParsedValue | undefined;
 
 			try {
 				valueAST = valueParser(originalValue);
@@ -78,44 +75,45 @@ const postcssPlugin: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				return;
 			}
 
-			if (preserve && decl.variable && decl.parent) {
-				const parent = decl.parent;
-				const atSupportsParams = '(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))';
-				const atSupports = postcss.atRule({ name: 'supports', params: atSupportsParams, source: decl.source });
-
-				const parentClone = parent.clone();
-				parentClone.removeAll();
-
-				parentClone.append(decl.clone());
-				atSupports.append(parentClone);
-
-				// Ensure correct order of @supports rules
-				// Find the last one created by us or the current parent and insert after.
-				let insertAfter = parent;
-				let nextInsertAfter = parent.next();
-				while (
-					insertAfter &&
-					nextInsertAfter &&
-					nextInsertAfter.type === 'atrule' &&
-					nextInsertAfter.name === 'supports' &&
-					nextInsertAfter.params === atSupportsParams
-				) {
-					insertAfter = nextInsertAfter;
-					nextInsertAfter = nextInsertAfter.next();
-				}
-
-				insertAfter.after(atSupports);
+			decl.cloneBefore({ value: modifiedValue });
 
-				decl.replaceWith(decl.clone({ value: modifiedValue }));
-			} else if (preserve) {
-				decl.cloneBefore({ value: modifiedValue });
-			} else {
-				decl.replaceWith(decl.clone({ value: modifiedValue }));
+			if (!opts?.preserve) {
+				decl.remove();
 			}
 		},
 	};
 };
 
+basePlugin.postcss = true;
+
+/** postcss-color-functional-notation plugin options */
+export type pluginOptions = {
+	/** Preserve the original notation. default: false */
+	preserve?: boolean,
+	/** Enable "@csstools/postcss-progressive-custom-properties". default: true */
+	enableProgressiveCustomProperties?: boolean,
+};
+
+/* Transform the color() function in CSS. */
+const postcssPlugin: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
+	const options = Object.assign({
+		preserve: false,
+		enableProgressiveCustomProperties: true,
+	}, opts);
+
+	if (options.enableProgressiveCustomProperties && options.preserve) {
+		return {
+			postcssPlugin: 'postcss-color-function',
+			plugins: [
+				postcssProgressiveCustomProperties(),
+				basePlugin(options),
+			],
+		};
+	}
+
+	return basePlugin(options);
+};
+
 postcssPlugin.postcss = true;
 
 export default postcssPlugin;
diff --git a/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css b/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css
index 1cd009654..1443e7c4d 100644
--- a/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css
+++ b/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css
@@ -10,11 +10,16 @@
 	color-5: rgba(178, 34, 34, 0.5);
 	color-5: rgb(178 34 34 / 50%);
 	color-6: rgba(178, 34, 34, var(--alpha-50));
-	color-6: rgb(178 34 34 / var(--alpha-50));
 	color-7: rgba(178, 34, 34, calc(1 / 2));
 	color-7: rgb(178 34 34 / calc(1 / 2));
 }
 
+@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) {
+.test-rgb {
+	color-6: rgb(178 34 34 / var(--alpha-50));
+}
+}
+
 .test-rgba {
 	color-1: rgb(178, 34, 34);
 	color-1: rgba(178 34 34);
@@ -23,11 +28,16 @@
 	color-3: rgba(178, 34, 34, .5);
 	color-3: rgba(178 34 34 / .5);
 	color-4: rgba(178, 34, 34, VaR(--alpha-50));
-	color-4: rgba(178 34 34 / VaR(--alpha-50));
 	color-5: rgba(178, 34, 34, CaLC(1 / 2));
 	color-5: rgba(178 34 34 / CaLC(1 / 2));
 }
 
+@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) {
+.test-rgba {
+	color-4: rgba(178 34 34 / VaR(--alpha-50));
+}
+}
+
 .test-rgb-percentages {
 	color-1: rgb(178, 34, 34);
 	color-1: rgba(70% 13.5% 13.5%);
@@ -63,11 +73,16 @@
 	color-11: hsl(180, 100%, 50%);
 	color-11: hsl(3.14159rad 100% 50%);
 	color-12: hsla(180, 100%, 50, var(--alpha-50));
-	color-12: hsl(3.14159rad 100% 50 / var(--alpha-50));
 	color-13: hsla(180, 100%, 50, calc(1 / 2));
 	color-13: hsl(3.14159rad 100% 50 / calc(1 / 2));
 }
 
+@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
+.test-hsl {
+	color-12: hsl(3.14159rad 100% 50 / var(--alpha-50));
+}
+}
+
 .test-hsla {
 	color-1: hsl(120, 100%, 50%);
 	color-1: hsla(120 100% 50%);
@@ -80,11 +95,16 @@
 	color-5: hsla(120, 100%, 50%, 0.5);
 	color-5: hsla(120 100% 50% / 50%);
 	color-6: hsla(120, 100%, 50%, var(--alpha-50));
-	color-6: hsla(120 100% 50% / var(--alpha-50));
 	color-7: hsla(120, 100%, 50%, calc(1 / 2));
 	color-7: hsla(120 100% 50% / calc(1 / 2));
 }
 
+@supports (color: hsla(0 0% 0% / 0)) and (top: var(--f)) {
+.test-hsla {
+	color-6: hsla(120 100% 50% / var(--alpha-50));
+}
+}
+
 .test-hwb {
 	color-1: hwb(0deg 0% 0%);
 	color-2: hwb(0 0% 0%);
diff --git a/plugins/postcss-color-functional-notation/test/basic.with-cloned-rules.expect.css b/plugins/postcss-color-functional-notation/test/basic.with-cloned-rules.expect.css
index 8f090f68a..272d92f88 100644
--- a/plugins/postcss-color-functional-notation/test/basic.with-cloned-rules.expect.css
+++ b/plugins/postcss-color-functional-notation/test/basic.with-cloned-rules.expect.css
@@ -10,11 +10,16 @@
 	color-5: rgba(178, 34, 34, 0.5);
 	color-5: rgb(178 34 34 / 50%);
 	color-6: rgba(178, 34, 34, var(--alpha-50));
-	color-6: rgb(178 34 34 / var(--alpha-50));
 	color-7: rgba(178, 34, 34, calc(1 / 2));
 	color-7: rgb(178 34 34 / calc(1 / 2));
 }
 
+@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) {
+.test-rgb {
+	color-6: rgb(178 34 34 / var(--alpha-50));
+}
+}
+
 .test-rgba {
 	color-1: rgb(178, 34, 34);
 	color-1: rgba(178 34 34);
@@ -23,11 +28,16 @@
 	color-3: rgba(178, 34, 34, .5);
 	color-3: rgba(178 34 34 / .5);
 	color-4: rgba(178, 34, 34, VaR(--alpha-50));
-	color-4: rgba(178 34 34 / VaR(--alpha-50));
 	color-5: rgba(178, 34, 34, CaLC(1 / 2));
 	color-5: rgba(178 34 34 / CaLC(1 / 2));
 }
 
+@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) {
+.test-rgba {
+	color-4: rgba(178 34 34 / VaR(--alpha-50));
+}
+}
+
 .test-rgb-percentages {
 	color-1: rgb(178, 34, 34);
 	color-1: rgba(70% 13.5% 13.5%);
@@ -63,11 +73,16 @@
 	color-11: hsl(180, 100%, 50%);
 	color-11: hsl(3.14159rad 100% 50%);
 	color-12: hsla(180, 100%, 50, var(--alpha-50));
-	color-12: hsl(3.14159rad 100% 50 / var(--alpha-50));
 	color-13: hsla(180, 100%, 50, calc(1 / 2));
 	color-13: hsl(3.14159rad 100% 50 / calc(1 / 2));
 }
 
+@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
+.test-hsl {
+	color-12: hsl(3.14159rad 100% 50 / var(--alpha-50));
+}
+}
+
 .test-hsla {
 	color-1: hsl(120, 100%, 50%);
 	color-1: hsla(120 100% 50%);
@@ -80,11 +95,16 @@
 	color-5: hsla(120, 100%, 50%, 0.5);
 	color-5: hsla(120 100% 50% / 50%);
 	color-6: hsla(120, 100%, 50%, var(--alpha-50));
-	color-6: hsla(120 100% 50% / var(--alpha-50));
 	color-7: hsla(120, 100%, 50%, calc(1 / 2));
 	color-7: hsla(120 100% 50% / calc(1 / 2));
 }
 
+@supports (color: hsla(0 0% 0% / 0)) and (top: var(--f)) {
+.test-hsla {
+	color-6: hsla(120 100% 50% / var(--alpha-50));
+}
+}
+
 .test-hwb {
 	color-1: hwb(0deg 0% 0%);
 	color-2: hwb(0 0% 0%);
diff --git a/plugins/postcss-color-functional-notation/test/generated-value-cases.preserve.expect.css b/plugins/postcss-color-functional-notation/test/generated-value-cases.preserve.expect.css
index b3d06a3b2..81ff16b00 100644
--- a/plugins/postcss-color-functional-notation/test/generated-value-cases.preserve.expect.css
+++ b/plugins/postcss-color-functional-notation/test/generated-value-cases.preserve.expect.css
@@ -5,18 +5,33 @@
 
 .order-1 {
 	order: var(1, rgba(178, 34, 34, 1));
+}
+
+@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) {
+.order-1 {
 	order: var(1, rgba(178 34 34 / 1));
 }
+}
 
 .order-2 {
 	order: var(rgba(178, 34, 34, 1), 1);
+}
+
+@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) {
+.order-2 {
 	order: var(rgba(178 34 34 / 1), 1);
 }
+}
 
 .order-3 {
 	order: var(rgba(178, 34, 34, 1), rgba(178, 34, 34, 1));
+}
+
+@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) {
+.order-3 {
 	order: var(rgba(178 34 34 / 1), rgba(178 34 34 / 1));
 }
+}
 
 .order-4 {
 	order: prergba(178 34 34 / 1);
@@ -53,8 +68,7 @@
 	--some-var: rgba(178, 34, 34, 1);
 }
 
-@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {
-
+@supports (color: rgba(0 0 0 / 0)) {
 :root {
 	--some-var: rgba(178 34 34 / 1);
 }
@@ -78,18 +92,33 @@
 
 .order-1 {
 	order: var(1, hsla(120, 100%, 50%, 1));
+}
+
+@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
+.order-1 {
 	order: var(1, hsl(120 100% 50% / 1));
 }
+}
 
 .order-2 {
 	order: var(hsla(120, 100%, 50%, 1), 1);
+}
+
+@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
+.order-2 {
 	order: var(hsl(120 100% 50% / 1), 1);
 }
+}
 
 .order-3 {
 	order: var(hsla(120, 100%, 50%, 1), hsla(120, 100%, 50%, 1));
+}
+
+@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
+.order-3 {
 	order: var(hsl(120 100% 50% / 1), hsl(120 100% 50% / 1));
 }
+}
 
 .order-4 {
 	order: prehsl(120 100% 50% / 1);
@@ -126,8 +155,7 @@
 	--some-var: hsla(120, 100%, 50%, 1);
 }
 
-@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {
-
+@supports (color: hsl(0 0% 0% / 0)) {
 :root {
 	--some-var: hsl(120 100% 50% / 1);
 }
diff --git a/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css b/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css
index 2277048b3..d21465074 100644
--- a/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css
+++ b/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css
@@ -8,16 +8,23 @@
 
 	--fifty: 50%;
 	--firebrick-var: hsl(40 var(--fifty) 34.5% / var(--opacity-50));
-}@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {:root {
-	--firebrick: rgb(40% 56.6 39);
 }
-}@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {:root {
+
+@supports (color: rgb(0 0 0 / 0)) {
+:root {
+	--firebrick: rgb(40% 56.6 39);
 	--firebrick-a50: rgb(40% 68.8 34.5 / 50%);
 }
-}@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {:root {
+}
+
+@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
+:root {
 	--firebrick-a50-var: hsl(40 68.8% 34.5% / var(--opacity-50));
 }
-}@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {:root {
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) {
+:root {
 	--firebrick-rgb-a50-var: rgb(40% 68.8 34.5 / var(--opacity-50));
 }
 }
@@ -25,21 +32,9 @@
 :root {
 	/* Not expected to be handled here at the moment, but might be needed in the future */
 	--rgba-functional-notation-percentage-alpha: rgba(0, 0, 0, 1);
-
-	--hsla-functional-notation-percentage-alpha: hsla(0, 0%, 0%, 1);
-}
-
-@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {
-
-:root {
 	--rgba-functional-notation-percentage-alpha: rgba(0, 0, 0, 100%);
-}
-}
-
-@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {
 
-:root {
+	--hsla-functional-notation-percentage-alpha: hsla(0, 0%, 0%, 1);
 
 	--hsla-functional-notation-percentage-alpha: hsla(0, 0%, 0%, 100%);
 }
-}
diff --git a/plugins/postcss-custom-properties/CHANGELOG.md b/plugins/postcss-custom-properties/CHANGELOG.md
index cc9e1374e..0928a7352 100644
--- a/plugins/postcss-custom-properties/CHANGELOG.md
+++ b/plugins/postcss-custom-properties/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to PostCSS Custom Properties
 
+### Unreleased (minor)
+
+- Do not generate fallback values when the rule is wrapped in `@supports (top: var(--f))`.
+
 ### 13.1.5 (April 10, 2023)
 
 - Updated `@csstools/css-tokenizer` to `2.1.1` (patch)
diff --git a/plugins/postcss-custom-properties/dist/has-supports-at-rule-ancestor.d.ts b/plugins/postcss-custom-properties/dist/has-supports-at-rule-ancestor.d.ts
new file mode 100644
index 000000000..a46009ecc
--- /dev/null
+++ b/plugins/postcss-custom-properties/dist/has-supports-at-rule-ancestor.d.ts
@@ -0,0 +1,2 @@
+import type { Node } from 'postcss';
+export declare function hasSupportsAtRuleAncestor(node: Node): boolean;
diff --git a/plugins/postcss-custom-properties/dist/index.cjs b/plugins/postcss-custom-properties/dist/index.cjs
index 06dec709d..65dcd0953 100644
--- a/plugins/postcss-custom-properties/dist/index.cjs
+++ b/plugins/postcss-custom-properties/dist/index.cjs
@@ -1 +1 @@
-"use strict";var e=require("postcss-value-parser"),r=require("@csstools/cascade-layer-name-parser");const t=r.parse("csstools-implicit-layer")[0];function collectCascadeLayerOrder(e){const o=new Map,n=new Map,s=[];e.walkAtRules((e=>{var a;if("layer"!==e.name.toLowerCase())return;{let r=e.parent;for(;r;){if("atrule"!==r.type||"layer"!==r.name.toLowerCase()){if(r===e.root())break;return}r=r.parent}}let l;if(e.nodes)l=normalizeLayerName(e.params,1);else{if(!e.params.trim())return;l=e.params}let i=r.parse(l);if(null!=(a=i)&&a.length){{let r=e.parent;for(;r&&"atrule"===r.type&&"layer"===r.name.toLowerCase();){const e=n.get(r);e?(i=i.map((r=>e.concat(r))),r=r.parent):r=r.parent}}if(r.addLayerToModel(s,i),e.nodes){const r=i[0].concat(t);o.set(e,r),n.set(e,i[0])}}}));for(const e of o.values())r.addLayerToModel(s,[e]);const a=new WeakMap;for(const[e,r]of o)a.set(e,s.findIndex((e=>r.equal(e))));return a}function cascadeLayerNumberForNode(e,r){return e.parent&&"atrule"===e.parent.type&&"layer"===e.parent.name.toLowerCase()?r.has(e.parent)?r.get(e.parent):-1:1/0}function normalizeLayerName(e,r){return e.trim()?e:"csstools-anon-layer--"+r++}const o=/(!\s*)?postcss-custom-properties:\s*off\b/i,n=new WeakMap;function isBlockIgnored(e){if(!e||!e.nodes)return!1;if(n.has(e))return n.get(e);const r=e.some((e=>isIgnoreComment(e,o)));return n.set(e,r),r}const s=/(!\s*)?postcss-custom-properties:\s*ignore\s+next\b/i;function isDeclarationIgnored(e){return!!e&&(!!isBlockIgnored(e.parent)||isIgnoreComment(e.prev(),s))}function isIgnoreComment(e,r){return!!e&&"comment"===e.type&&r.test(e.text)}const a=new Set(["layer"]);function isProcessableRule(e){if(!isHtmlRule(e)&&!isRootRule(e))return!1;let r=e.parent;for(;r;){if("atrule"===r.type&&!a.has(r.name.toLowerCase()))return!1;r=r.parent}return!0}const l=/^html$/i,i=/^:root$/i;function isHtmlRule(e){return e.selectors.some((e=>l.test(e)))&&e.nodes&&e.nodes.length}function isRootRule(e){return e.selectors.some((e=>i.test(e)))&&e.nodes&&e.nodes.length}const c=/^var$/i;function isVarFunction(e){return"function"===e.type&&c.test(e.value)&&Object(e.nodes).length>0}function removeCyclicReferences(e,r){const t=new Set;let o=r;for(;e.size>0;)try{toposort(Array.from(e.keys()),o);break}catch(r){if(!r._graphNode)throw r;e.delete(r._graphNode),t.add(r._graphNode),o=o.filter((e=>-1===e.indexOf(r._graphNode)))}return t}function toposort(e,r){let t=e.length;const o=new Array(t),n={};let s=t;const a=makeOutgoingEdges(r),l=makeNodesHash(e);for(;s--;)n[s]||visit(e[s],s,new Set);return o;function visit(e,r,s){if(s.has(e)){const r=new Error("Cyclic dependency"+JSON.stringify(e));throw r._graphNode=e,r}if(!l.has(e))return;if(n[r])return;n[r]=!0;let i=a.get(e)||new Set;if(i=Array.from(i),r=i.length){s.add(e);do{const e=i[--r];visit(e,l.get(e),s)}while(r);s.delete(e)}o[--t]=e}}function makeOutgoingEdges(e){const r=new Map;for(let t=0,o=e.length;t<o;t++){const o=e[t];r.has(o[0])||r.set(o[0],new Set),r.has(o[1])||r.set(o[1],new Set),r.get(o[0]).add(o[1])}return r}function makeNodesHash(e){const r=new Map;for(let t=0,o=e.length;t<o;t++)r.set(e[t],t);return r}function getCustomPropertiesFromRoot(r){const t=new Map,o=new Map,n=new Map,s=new Map,a=new Map,l=collectCascadeLayerOrder(r);r.walkRules((e=>{isProcessableRule(e)&&(isBlockIgnored(e)||(isHtmlRule(e)?e.each((e=>{if("decl"!==e.type)return;if(!e.variable||isDeclarationIgnored(e))return;if("initial"===e.value.toLowerCase().trim())return;const r=cascadeLayerNumberForNode(e,l),o=s.get(e.prop)??-1;r&&r>=o&&(s.set(e.prop,r),t.set(e.prop,e.value))})):isRootRule(e)&&e.each((e=>{if("decl"!==e.type)return;if(!e.variable||isDeclarationIgnored(e))return;if("initial"===e.value.toLowerCase().trim())return;const r=cascadeLayerNumberForNode(e,l),t=a.get(e.prop)??-1;r&&r>=t&&(a.set(e.prop,r),o.set(e.prop,e.value))}))))}));for(const[e,r]of t.entries())n.set(e,r);for(const[e,r]of o.entries())n.set(e,r);const i=[],c=new Map;for(const[r,t]of n.entries()){const o=e(t);e.walk(o.nodes,(e=>{if(isVarFunction(e)){const[t]=e.nodes.filter((e=>"word"===e.type));i.push([t.value,r])}})),c.set(r,e(t))}return removeCyclicReferences(c,i),c}function transformValueAST(r,t){if(r.nodes&&r.nodes.length){const o=new Map;r.nodes.forEach((e=>{o.set(e,r)})),e.walk(r.nodes,(e=>{"nodes"in e&&e.nodes.length&&e.nodes.forEach((r=>{o.set(r,e)}))})),e.walk(r.nodes,(r=>{if(!isVarFunction(r))return;const[n,...s]=r.nodes.filter((e=>"div"!==e.type)),{value:a}=n,l=o.get(r);if(!l)return;const i=l.nodes.indexOf(r);if(-1===i)return;let c=!1;s&&e.walk(s,(e=>{if(isVarFunction(e)){const[r]=e.nodes.filter((e=>"word"===e.type));if(t.has(r.value))return;return c=!0,!1}}));let u=[];if(t.has(a)){var p;u=(null==(p=t.get(a))?void 0:p.nodes)??[]}else{if(!s.length||c)return;u=r.nodes.slice(r.nodes.indexOf(s[0]))}u.length?(l.nodes.splice(i,1,...u),l.nodes.forEach((e=>o.set(e,l)))):(l.nodes.splice(i,1,{type:"comment",value:"",sourceIndex:r.sourceIndex,sourceEndIndex:r.sourceEndIndex}),l.nodes.forEach((e=>o.set(e,l))))}),!0)}return r.toString()}var transformProperties=(r,t,o)=>{if(isTransformableDecl(r)&&!isDeclarationIgnored(r)){const a=r.value;let l=transformValueAST(e(a),t);const i=new Set;for(;l.includes("--")&&l.toLowerCase().includes("var(")&&!i.has(l);){i.add(l);l=transformValueAST(e(l),t)}if(l!==a){if(parentHasExactFallback(r,l))return void(o.preserve||r.remove());if(o.preserve){var n;const e=r.cloneBefore({value:l});hasTrailingComment(e)&&null!=(n=e.raws)&&n.value&&(e.raws.value.value=e.value.replace(u,"$1"),e.raws.value.raw=e.raws.value.value+e.raws.value.raw.replace(u,"$2"))}else{var s;r.value=l,hasTrailingComment(r)&&null!=(s=r.raws)&&s.value&&(r.raws.value.value=r.value.replace(u,"$1"),r.raws.value.raw=r.raws.value.value+r.raws.value.raw.replace(u,"$2"))}}}};const isTransformableDecl=e=>!e.variable&&e.value.includes("--")&&e.value.toLowerCase().includes("var("),hasTrailingComment=e=>{var r,t;return"value"in Object(Object(e.raws).value)&&"raw"in((null==(r=e.raws)?void 0:r.value)??{})&&u.test((null==(t=e.raws.value)?void 0:t.raw)??"")},u=/^([\W\w]+)(\s*\/\*[\W\w]+?\*\/)$/;function parentHasExactFallback(e,r){if(!e||!e.parent)return!1;let t=!1;const o=e.parent.index(e);return e.parent.each(((n,s)=>n!==e&&(!(s>=o)&&void("decl"===n.type&&n.prop.toLowerCase()===e.prop.toLowerCase()&&n.value===r&&(t=!0))))),t}const creator=r=>{const t=!("preserve"in Object(r))||Boolean(null==r?void 0:r.preserve);if("importFrom"in Object(r))throw new Error('[postcss-custom-properties] "importFrom" is no longer supported');if("exportTo"in Object(r))throw new Error('[postcss-custom-properties] "exportTo" is no longer supported');return{postcssPlugin:"postcss-custom-properties",prepare:()=>{let r=new Map;return{Once:e=>{r=getCustomPropertiesFromRoot(e)},Declaration:o=>{let n=r;if(t&&o.parent){let t=!1;o.parent.each((s=>{o!==s&&"decl"===s.type&&s.variable&&!isDeclarationIgnored(s)&&(t||(n=new Map(r),t=!0),"initial"!==s.value.toLowerCase().trim()?n.set(s.prop,e(s.value)):n.delete(s.prop))}))}transformProperties(o,n,{preserve:t})}}}}};creator.postcss=!0,module.exports=creator;
+"use strict";var e=require("postcss-value-parser"),r=require("@csstools/cascade-layer-name-parser");const t=r.parse("csstools-implicit-layer")[0];function collectCascadeLayerOrder(e){const n=new Map,o=new Map,s=[];e.walkAtRules((e=>{var a;if("layer"!==e.name.toLowerCase())return;{let r=e.parent;for(;r;){if("atrule"!==r.type||"layer"!==r.name.toLowerCase()){if(r===e.root())break;return}r=r.parent}}let l;if(e.nodes)l=normalizeLayerName(e.params,1);else{if(!e.params.trim())return;l=e.params}let i=r.parse(l);if(null!=(a=i)&&a.length){{let r=e.parent;for(;r&&"atrule"===r.type&&"layer"===r.name.toLowerCase();){const e=o.get(r);e?(i=i.map((r=>e.concat(r))),r=r.parent):r=r.parent}}if(r.addLayerToModel(s,i),e.nodes){const r=i[0].concat(t);n.set(e,r),o.set(e,i[0])}}}));for(const e of n.values())r.addLayerToModel(s,[e]);const a=new WeakMap;for(const[e,r]of n)a.set(e,s.findIndex((e=>r.equal(e))));return a}function cascadeLayerNumberForNode(e,r){return e.parent&&"atrule"===e.parent.type&&"layer"===e.parent.name.toLowerCase()?r.has(e.parent)?r.get(e.parent):-1:1/0}function normalizeLayerName(e,r){return e.trim()?e:"csstools-anon-layer--"+r++}const n=/(!\s*)?postcss-custom-properties:\s*off\b/i,o=new WeakMap;function isBlockIgnored(e){if(!e||!e.nodes)return!1;if(o.has(e))return o.get(e);const r=e.some((e=>isIgnoreComment(e,n)));return o.set(e,r),r}const s=/(!\s*)?postcss-custom-properties:\s*ignore\s+next\b/i;function isDeclarationIgnored(e){return!!e&&(!!isBlockIgnored(e.parent)||isIgnoreComment(e.prev(),s))}function isIgnoreComment(e,r){return!!e&&"comment"===e.type&&r.test(e.text)}const a=new Set(["layer"]);function isProcessableRule(e){if(!isHtmlRule(e)&&!isRootRule(e))return!1;let r=e.parent;for(;r;){if("atrule"===r.type&&!a.has(r.name.toLowerCase()))return!1;r=r.parent}return!0}const l=/^html$/i,i=/^:root$/i;function isHtmlRule(e){return e.selectors.some((e=>l.test(e)))&&e.nodes&&e.nodes.length}function isRootRule(e){return e.selectors.some((e=>i.test(e)))&&e.nodes&&e.nodes.length}const c=/^var$/i;function isVarFunction(e){return"function"===e.type&&c.test(e.value)&&Object(e.nodes).length>0}function removeCyclicReferences(e,r){const t=new Set;let n=r;for(;e.size>0;)try{toposort(Array.from(e.keys()),n);break}catch(r){if(!r._graphNode)throw r;e.delete(r._graphNode),t.add(r._graphNode),n=n.filter((e=>-1===e.indexOf(r._graphNode)))}return t}function toposort(e,r){let t=e.length;const n=new Array(t),o={};let s=t;const a=makeOutgoingEdges(r),l=makeNodesHash(e);for(;s--;)o[s]||visit(e[s],s,new Set);return n;function visit(e,r,s){if(s.has(e)){const r=new Error("Cyclic dependency"+JSON.stringify(e));throw r._graphNode=e,r}if(!l.has(e))return;if(o[r])return;o[r]=!0;let i=a.get(e)||new Set;if(i=Array.from(i),r=i.length){s.add(e);do{const e=i[--r];visit(e,l.get(e),s)}while(r);s.delete(e)}n[--t]=e}}function makeOutgoingEdges(e){const r=new Map;for(let t=0,n=e.length;t<n;t++){const n=e[t];r.has(n[0])||r.set(n[0],new Set),r.has(n[1])||r.set(n[1],new Set),r.get(n[0]).add(n[1])}return r}function makeNodesHash(e){const r=new Map;for(let t=0,n=e.length;t<n;t++)r.set(e[t],t);return r}function getCustomPropertiesFromRoot(r){const t=new Map,n=new Map,o=new Map,s=new Map,a=new Map,l=collectCascadeLayerOrder(r);r.walkRules((e=>{isProcessableRule(e)&&(isBlockIgnored(e)||(isHtmlRule(e)?e.each((e=>{if("decl"!==e.type)return;if(!e.variable||isDeclarationIgnored(e))return;if("initial"===e.value.toLowerCase().trim())return;const r=cascadeLayerNumberForNode(e,l),n=s.get(e.prop)??-1;r&&r>=n&&(s.set(e.prop,r),t.set(e.prop,e.value))})):isRootRule(e)&&e.each((e=>{if("decl"!==e.type)return;if(!e.variable||isDeclarationIgnored(e))return;if("initial"===e.value.toLowerCase().trim())return;const r=cascadeLayerNumberForNode(e,l),t=a.get(e.prop)??-1;r&&r>=t&&(a.set(e.prop,r),n.set(e.prop,e.value))}))))}));for(const[e,r]of t.entries())o.set(e,r);for(const[e,r]of n.entries())o.set(e,r);const i=[],c=new Map;for(const[r,t]of o.entries()){const n=e(t);e.walk(n.nodes,(e=>{if(isVarFunction(e)){const[t]=e.nodes.filter((e=>"word"===e.type));i.push([t.value,r])}})),c.set(r,e(t))}return removeCyclicReferences(c,i),c}function transformValueAST(r,t){if(r.nodes&&r.nodes.length){const n=new Map;r.nodes.forEach((e=>{n.set(e,r)})),e.walk(r.nodes,(e=>{"nodes"in e&&e.nodes.length&&e.nodes.forEach((r=>{n.set(r,e)}))})),e.walk(r.nodes,(r=>{if(!isVarFunction(r))return;const[o,...s]=r.nodes.filter((e=>"div"!==e.type)),{value:a}=o,l=n.get(r);if(!l)return;const i=l.nodes.indexOf(r);if(-1===i)return;let c=!1;s&&e.walk(s,(e=>{if(isVarFunction(e)){const[r]=e.nodes.filter((e=>"word"===e.type));if(t.has(r.value))return;return c=!0,!1}}));let u=[];if(t.has(a)){var p;u=(null==(p=t.get(a))?void 0:p.nodes)??[]}else{if(!s.length||c)return;u=r.nodes.slice(r.nodes.indexOf(s[0]))}u.length?(l.nodes.splice(i,1,...u),l.nodes.forEach((e=>n.set(e,l)))):(l.nodes.splice(i,1,{type:"comment",value:"",sourceIndex:r.sourceIndex,sourceEndIndex:r.sourceEndIndex}),l.nodes.forEach((e=>n.set(e,l))))}),!0)}return r.toString()}var transformProperties=(r,t,n)=>{if(isTransformableDecl(r)&&!isDeclarationIgnored(r)){const a=r.value;let l=transformValueAST(e(a),t);const i=new Set;for(;l.includes("--")&&l.toLowerCase().includes("var(")&&!i.has(l);){i.add(l);l=transformValueAST(e(l),t)}if(l!==a){if(parentHasExactFallback(r,l))return void(n.preserve||r.remove());if(n.preserve){var o;const e=r.cloneBefore({value:l});hasTrailingComment(e)&&null!=(o=e.raws)&&o.value&&(e.raws.value.value=e.value.replace(u,"$1"),e.raws.value.raw=e.raws.value.value+e.raws.value.raw.replace(u,"$2"))}else{var s;r.value=l,hasTrailingComment(r)&&null!=(s=r.raws)&&s.value&&(r.raws.value.value=r.value.replace(u,"$1"),r.raws.value.raw=r.raws.value.value+r.raws.value.raw.replace(u,"$2"))}}}};const isTransformableDecl=e=>!e.variable&&e.value.includes("--")&&e.value.toLowerCase().includes("var("),hasTrailingComment=e=>{var r,t;return"value"in Object(Object(e.raws).value)&&"raw"in((null==(r=e.raws)?void 0:r.value)??{})&&u.test((null==(t=e.raws.value)?void 0:t.raw)??"")},u=/^([\W\w]+)(\s*\/\*[\W\w]+?\*\/)$/;function parentHasExactFallback(e,r){if(!e||!e.parent)return!1;let t=!1;const n=e.parent.index(e);return e.parent.each(((o,s)=>o!==e&&(!(s>=n)&&void("decl"===o.type&&o.prop.toLowerCase()===e.prop.toLowerCase()&&o.value===r&&(t=!0))))),t}function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name.toLowerCase()&&/([^\w]var\()|(\(top: var\(--f\))/i.test(r.params))return!0;r=r.parent}else r=r.parent;return!1}const creator=r=>{const t=!("preserve"in Object(r))||Boolean(null==r?void 0:r.preserve);if("importFrom"in Object(r))throw new Error('[postcss-custom-properties] "importFrom" is no longer supported');if("exportTo"in Object(r))throw new Error('[postcss-custom-properties] "exportTo" is no longer supported');return{postcssPlugin:"postcss-custom-properties",prepare:()=>{let r=new Map;return{Once:e=>{r=getCustomPropertiesFromRoot(e)},Declaration:n=>{if(hasSupportsAtRuleAncestor(n))return;let o=r;if(t&&n.parent){let t=!1;n.parent.each((s=>{n!==s&&"decl"===s.type&&s.variable&&!isDeclarationIgnored(s)&&(t||(o=new Map(r),t=!0),"initial"!==s.value.toLowerCase().trim()?o.set(s.prop,e(s.value)):o.delete(s.prop))}))}transformProperties(n,o,{preserve:t})}}}}};creator.postcss=!0,module.exports=creator;
diff --git a/plugins/postcss-custom-properties/dist/index.mjs b/plugins/postcss-custom-properties/dist/index.mjs
index b2a99c1ba..75c50c59a 100644
--- a/plugins/postcss-custom-properties/dist/index.mjs
+++ b/plugins/postcss-custom-properties/dist/index.mjs
@@ -1 +1 @@
-import e from"postcss-value-parser";import{parse as r,addLayerToModel as t}from"@csstools/cascade-layer-name-parser";const n=r("csstools-implicit-layer")[0];function collectCascadeLayerOrder(e){const o=new Map,s=new Map,a=[];e.walkAtRules((e=>{var l;if("layer"!==e.name.toLowerCase())return;{let r=e.parent;for(;r;){if("atrule"!==r.type||"layer"!==r.name.toLowerCase()){if(r===e.root())break;return}r=r.parent}}let i;if(e.nodes)i=normalizeLayerName(e.params,1);else{if(!e.params.trim())return;i=e.params}let c=r(i);if(null!=(l=c)&&l.length){{let r=e.parent;for(;r&&"atrule"===r.type&&"layer"===r.name.toLowerCase();){const e=s.get(r);e?(c=c.map((r=>e.concat(r))),r=r.parent):r=r.parent}}if(t(a,c),e.nodes){const r=c[0].concat(n);o.set(e,r),s.set(e,c[0])}}}));for(const e of o.values())t(a,[e]);const l=new WeakMap;for(const[e,r]of o)l.set(e,a.findIndex((e=>r.equal(e))));return l}function cascadeLayerNumberForNode(e,r){return e.parent&&"atrule"===e.parent.type&&"layer"===e.parent.name.toLowerCase()?r.has(e.parent)?r.get(e.parent):-1:1/0}function normalizeLayerName(e,r){return e.trim()?e:"csstools-anon-layer--"+r++}const o=/(!\s*)?postcss-custom-properties:\s*off\b/i,s=new WeakMap;function isBlockIgnored(e){if(!e||!e.nodes)return!1;if(s.has(e))return s.get(e);const r=e.some((e=>isIgnoreComment(e,o)));return s.set(e,r),r}const a=/(!\s*)?postcss-custom-properties:\s*ignore\s+next\b/i;function isDeclarationIgnored(e){return!!e&&(!!isBlockIgnored(e.parent)||isIgnoreComment(e.prev(),a))}function isIgnoreComment(e,r){return!!e&&"comment"===e.type&&r.test(e.text)}const l=new Set(["layer"]);function isProcessableRule(e){if(!isHtmlRule(e)&&!isRootRule(e))return!1;let r=e.parent;for(;r;){if("atrule"===r.type&&!l.has(r.name.toLowerCase()))return!1;r=r.parent}return!0}const i=/^html$/i,c=/^:root$/i;function isHtmlRule(e){return e.selectors.some((e=>i.test(e)))&&e.nodes&&e.nodes.length}function isRootRule(e){return e.selectors.some((e=>c.test(e)))&&e.nodes&&e.nodes.length}const u=/^var$/i;function isVarFunction(e){return"function"===e.type&&u.test(e.value)&&Object(e.nodes).length>0}function removeCyclicReferences(e,r){const t=new Set;let n=r;for(;e.size>0;)try{toposort(Array.from(e.keys()),n);break}catch(r){if(!r._graphNode)throw r;e.delete(r._graphNode),t.add(r._graphNode),n=n.filter((e=>-1===e.indexOf(r._graphNode)))}return t}function toposort(e,r){let t=e.length;const n=new Array(t),o={};let s=t;const a=makeOutgoingEdges(r),l=makeNodesHash(e);for(;s--;)o[s]||visit(e[s],s,new Set);return n;function visit(e,r,s){if(s.has(e)){const r=new Error("Cyclic dependency"+JSON.stringify(e));throw r._graphNode=e,r}if(!l.has(e))return;if(o[r])return;o[r]=!0;let i=a.get(e)||new Set;if(i=Array.from(i),r=i.length){s.add(e);do{const e=i[--r];visit(e,l.get(e),s)}while(r);s.delete(e)}n[--t]=e}}function makeOutgoingEdges(e){const r=new Map;for(let t=0,n=e.length;t<n;t++){const n=e[t];r.has(n[0])||r.set(n[0],new Set),r.has(n[1])||r.set(n[1],new Set),r.get(n[0]).add(n[1])}return r}function makeNodesHash(e){const r=new Map;for(let t=0,n=e.length;t<n;t++)r.set(e[t],t);return r}function getCustomPropertiesFromRoot(r){const t=new Map,n=new Map,o=new Map,s=new Map,a=new Map,l=collectCascadeLayerOrder(r);r.walkRules((e=>{isProcessableRule(e)&&(isBlockIgnored(e)||(isHtmlRule(e)?e.each((e=>{if("decl"!==e.type)return;if(!e.variable||isDeclarationIgnored(e))return;if("initial"===e.value.toLowerCase().trim())return;const r=cascadeLayerNumberForNode(e,l),n=s.get(e.prop)??-1;r&&r>=n&&(s.set(e.prop,r),t.set(e.prop,e.value))})):isRootRule(e)&&e.each((e=>{if("decl"!==e.type)return;if(!e.variable||isDeclarationIgnored(e))return;if("initial"===e.value.toLowerCase().trim())return;const r=cascadeLayerNumberForNode(e,l),t=a.get(e.prop)??-1;r&&r>=t&&(a.set(e.prop,r),n.set(e.prop,e.value))}))))}));for(const[e,r]of t.entries())o.set(e,r);for(const[e,r]of n.entries())o.set(e,r);const i=[],c=new Map;for(const[r,t]of o.entries()){const n=e(t);e.walk(n.nodes,(e=>{if(isVarFunction(e)){const[t]=e.nodes.filter((e=>"word"===e.type));i.push([t.value,r])}})),c.set(r,e(t))}return removeCyclicReferences(c,i),c}function transformValueAST(r,t){if(r.nodes&&r.nodes.length){const n=new Map;r.nodes.forEach((e=>{n.set(e,r)})),e.walk(r.nodes,(e=>{"nodes"in e&&e.nodes.length&&e.nodes.forEach((r=>{n.set(r,e)}))})),e.walk(r.nodes,(r=>{if(!isVarFunction(r))return;const[o,...s]=r.nodes.filter((e=>"div"!==e.type)),{value:a}=o,l=n.get(r);if(!l)return;const i=l.nodes.indexOf(r);if(-1===i)return;let c=!1;s&&e.walk(s,(e=>{if(isVarFunction(e)){const[r]=e.nodes.filter((e=>"word"===e.type));if(t.has(r.value))return;return c=!0,!1}}));let u=[];if(t.has(a)){var p;u=(null==(p=t.get(a))?void 0:p.nodes)??[]}else{if(!s.length||c)return;u=r.nodes.slice(r.nodes.indexOf(s[0]))}u.length?(l.nodes.splice(i,1,...u),l.nodes.forEach((e=>n.set(e,l)))):(l.nodes.splice(i,1,{type:"comment",value:"",sourceIndex:r.sourceIndex,sourceEndIndex:r.sourceEndIndex}),l.nodes.forEach((e=>n.set(e,l))))}),!0)}return r.toString()}var transformProperties=(r,t,n)=>{if(isTransformableDecl(r)&&!isDeclarationIgnored(r)){const a=r.value;let l=transformValueAST(e(a),t);const i=new Set;for(;l.includes("--")&&l.toLowerCase().includes("var(")&&!i.has(l);){i.add(l);l=transformValueAST(e(l),t)}if(l!==a){if(parentHasExactFallback(r,l))return void(n.preserve||r.remove());if(n.preserve){var o;const e=r.cloneBefore({value:l});hasTrailingComment(e)&&null!=(o=e.raws)&&o.value&&(e.raws.value.value=e.value.replace(p,"$1"),e.raws.value.raw=e.raws.value.value+e.raws.value.raw.replace(p,"$2"))}else{var s;r.value=l,hasTrailingComment(r)&&null!=(s=r.raws)&&s.value&&(r.raws.value.value=r.value.replace(p,"$1"),r.raws.value.raw=r.raws.value.value+r.raws.value.raw.replace(p,"$2"))}}}};const isTransformableDecl=e=>!e.variable&&e.value.includes("--")&&e.value.toLowerCase().includes("var("),hasTrailingComment=e=>{var r,t;return"value"in Object(Object(e.raws).value)&&"raw"in((null==(r=e.raws)?void 0:r.value)??{})&&p.test((null==(t=e.raws.value)?void 0:t.raw)??"")},p=/^([\W\w]+)(\s*\/\*[\W\w]+?\*\/)$/;function parentHasExactFallback(e,r){if(!e||!e.parent)return!1;let t=!1;const n=e.parent.index(e);return e.parent.each(((o,s)=>o!==e&&(!(s>=n)&&void("decl"===o.type&&o.prop.toLowerCase()===e.prop.toLowerCase()&&o.value===r&&(t=!0))))),t}const creator=r=>{const t=!("preserve"in Object(r))||Boolean(null==r?void 0:r.preserve);if("importFrom"in Object(r))throw new Error('[postcss-custom-properties] "importFrom" is no longer supported');if("exportTo"in Object(r))throw new Error('[postcss-custom-properties] "exportTo" is no longer supported');return{postcssPlugin:"postcss-custom-properties",prepare:()=>{let r=new Map;return{Once:e=>{r=getCustomPropertiesFromRoot(e)},Declaration:n=>{let o=r;if(t&&n.parent){let t=!1;n.parent.each((s=>{n!==s&&"decl"===s.type&&s.variable&&!isDeclarationIgnored(s)&&(t||(o=new Map(r),t=!0),"initial"!==s.value.toLowerCase().trim()?o.set(s.prop,e(s.value)):o.delete(s.prop))}))}transformProperties(n,o,{preserve:t})}}}}};creator.postcss=!0;export{creator as default};
+import e from"postcss-value-parser";import{parse as r,addLayerToModel as t}from"@csstools/cascade-layer-name-parser";const n=r("csstools-implicit-layer")[0];function collectCascadeLayerOrder(e){const o=new Map,s=new Map,a=[];e.walkAtRules((e=>{var l;if("layer"!==e.name.toLowerCase())return;{let r=e.parent;for(;r;){if("atrule"!==r.type||"layer"!==r.name.toLowerCase()){if(r===e.root())break;return}r=r.parent}}let i;if(e.nodes)i=normalizeLayerName(e.params,1);else{if(!e.params.trim())return;i=e.params}let c=r(i);if(null!=(l=c)&&l.length){{let r=e.parent;for(;r&&"atrule"===r.type&&"layer"===r.name.toLowerCase();){const e=s.get(r);e?(c=c.map((r=>e.concat(r))),r=r.parent):r=r.parent}}if(t(a,c),e.nodes){const r=c[0].concat(n);o.set(e,r),s.set(e,c[0])}}}));for(const e of o.values())t(a,[e]);const l=new WeakMap;for(const[e,r]of o)l.set(e,a.findIndex((e=>r.equal(e))));return l}function cascadeLayerNumberForNode(e,r){return e.parent&&"atrule"===e.parent.type&&"layer"===e.parent.name.toLowerCase()?r.has(e.parent)?r.get(e.parent):-1:1/0}function normalizeLayerName(e,r){return e.trim()?e:"csstools-anon-layer--"+r++}const o=/(!\s*)?postcss-custom-properties:\s*off\b/i,s=new WeakMap;function isBlockIgnored(e){if(!e||!e.nodes)return!1;if(s.has(e))return s.get(e);const r=e.some((e=>isIgnoreComment(e,o)));return s.set(e,r),r}const a=/(!\s*)?postcss-custom-properties:\s*ignore\s+next\b/i;function isDeclarationIgnored(e){return!!e&&(!!isBlockIgnored(e.parent)||isIgnoreComment(e.prev(),a))}function isIgnoreComment(e,r){return!!e&&"comment"===e.type&&r.test(e.text)}const l=new Set(["layer"]);function isProcessableRule(e){if(!isHtmlRule(e)&&!isRootRule(e))return!1;let r=e.parent;for(;r;){if("atrule"===r.type&&!l.has(r.name.toLowerCase()))return!1;r=r.parent}return!0}const i=/^html$/i,c=/^:root$/i;function isHtmlRule(e){return e.selectors.some((e=>i.test(e)))&&e.nodes&&e.nodes.length}function isRootRule(e){return e.selectors.some((e=>c.test(e)))&&e.nodes&&e.nodes.length}const u=/^var$/i;function isVarFunction(e){return"function"===e.type&&u.test(e.value)&&Object(e.nodes).length>0}function removeCyclicReferences(e,r){const t=new Set;let n=r;for(;e.size>0;)try{toposort(Array.from(e.keys()),n);break}catch(r){if(!r._graphNode)throw r;e.delete(r._graphNode),t.add(r._graphNode),n=n.filter((e=>-1===e.indexOf(r._graphNode)))}return t}function toposort(e,r){let t=e.length;const n=new Array(t),o={};let s=t;const a=makeOutgoingEdges(r),l=makeNodesHash(e);for(;s--;)o[s]||visit(e[s],s,new Set);return n;function visit(e,r,s){if(s.has(e)){const r=new Error("Cyclic dependency"+JSON.stringify(e));throw r._graphNode=e,r}if(!l.has(e))return;if(o[r])return;o[r]=!0;let i=a.get(e)||new Set;if(i=Array.from(i),r=i.length){s.add(e);do{const e=i[--r];visit(e,l.get(e),s)}while(r);s.delete(e)}n[--t]=e}}function makeOutgoingEdges(e){const r=new Map;for(let t=0,n=e.length;t<n;t++){const n=e[t];r.has(n[0])||r.set(n[0],new Set),r.has(n[1])||r.set(n[1],new Set),r.get(n[0]).add(n[1])}return r}function makeNodesHash(e){const r=new Map;for(let t=0,n=e.length;t<n;t++)r.set(e[t],t);return r}function getCustomPropertiesFromRoot(r){const t=new Map,n=new Map,o=new Map,s=new Map,a=new Map,l=collectCascadeLayerOrder(r);r.walkRules((e=>{isProcessableRule(e)&&(isBlockIgnored(e)||(isHtmlRule(e)?e.each((e=>{if("decl"!==e.type)return;if(!e.variable||isDeclarationIgnored(e))return;if("initial"===e.value.toLowerCase().trim())return;const r=cascadeLayerNumberForNode(e,l),n=s.get(e.prop)??-1;r&&r>=n&&(s.set(e.prop,r),t.set(e.prop,e.value))})):isRootRule(e)&&e.each((e=>{if("decl"!==e.type)return;if(!e.variable||isDeclarationIgnored(e))return;if("initial"===e.value.toLowerCase().trim())return;const r=cascadeLayerNumberForNode(e,l),t=a.get(e.prop)??-1;r&&r>=t&&(a.set(e.prop,r),n.set(e.prop,e.value))}))))}));for(const[e,r]of t.entries())o.set(e,r);for(const[e,r]of n.entries())o.set(e,r);const i=[],c=new Map;for(const[r,t]of o.entries()){const n=e(t);e.walk(n.nodes,(e=>{if(isVarFunction(e)){const[t]=e.nodes.filter((e=>"word"===e.type));i.push([t.value,r])}})),c.set(r,e(t))}return removeCyclicReferences(c,i),c}function transformValueAST(r,t){if(r.nodes&&r.nodes.length){const n=new Map;r.nodes.forEach((e=>{n.set(e,r)})),e.walk(r.nodes,(e=>{"nodes"in e&&e.nodes.length&&e.nodes.forEach((r=>{n.set(r,e)}))})),e.walk(r.nodes,(r=>{if(!isVarFunction(r))return;const[o,...s]=r.nodes.filter((e=>"div"!==e.type)),{value:a}=o,l=n.get(r);if(!l)return;const i=l.nodes.indexOf(r);if(-1===i)return;let c=!1;s&&e.walk(s,(e=>{if(isVarFunction(e)){const[r]=e.nodes.filter((e=>"word"===e.type));if(t.has(r.value))return;return c=!0,!1}}));let u=[];if(t.has(a)){var p;u=(null==(p=t.get(a))?void 0:p.nodes)??[]}else{if(!s.length||c)return;u=r.nodes.slice(r.nodes.indexOf(s[0]))}u.length?(l.nodes.splice(i,1,...u),l.nodes.forEach((e=>n.set(e,l)))):(l.nodes.splice(i,1,{type:"comment",value:"",sourceIndex:r.sourceIndex,sourceEndIndex:r.sourceEndIndex}),l.nodes.forEach((e=>n.set(e,l))))}),!0)}return r.toString()}var transformProperties=(r,t,n)=>{if(isTransformableDecl(r)&&!isDeclarationIgnored(r)){const a=r.value;let l=transformValueAST(e(a),t);const i=new Set;for(;l.includes("--")&&l.toLowerCase().includes("var(")&&!i.has(l);){i.add(l);l=transformValueAST(e(l),t)}if(l!==a){if(parentHasExactFallback(r,l))return void(n.preserve||r.remove());if(n.preserve){var o;const e=r.cloneBefore({value:l});hasTrailingComment(e)&&null!=(o=e.raws)&&o.value&&(e.raws.value.value=e.value.replace(p,"$1"),e.raws.value.raw=e.raws.value.value+e.raws.value.raw.replace(p,"$2"))}else{var s;r.value=l,hasTrailingComment(r)&&null!=(s=r.raws)&&s.value&&(r.raws.value.value=r.value.replace(p,"$1"),r.raws.value.raw=r.raws.value.value+r.raws.value.raw.replace(p,"$2"))}}}};const isTransformableDecl=e=>!e.variable&&e.value.includes("--")&&e.value.toLowerCase().includes("var("),hasTrailingComment=e=>{var r,t;return"value"in Object(Object(e.raws).value)&&"raw"in((null==(r=e.raws)?void 0:r.value)??{})&&p.test((null==(t=e.raws.value)?void 0:t.raw)??"")},p=/^([\W\w]+)(\s*\/\*[\W\w]+?\*\/)$/;function parentHasExactFallback(e,r){if(!e||!e.parent)return!1;let t=!1;const n=e.parent.index(e);return e.parent.each(((o,s)=>o!==e&&(!(s>=n)&&void("decl"===o.type&&o.prop.toLowerCase()===e.prop.toLowerCase()&&o.value===r&&(t=!0))))),t}function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name.toLowerCase()&&/([^\w]var\()|(\(top: var\(--f\))/i.test(r.params))return!0;r=r.parent}else r=r.parent;return!1}const creator=r=>{const t=!("preserve"in Object(r))||Boolean(null==r?void 0:r.preserve);if("importFrom"in Object(r))throw new Error('[postcss-custom-properties] "importFrom" is no longer supported');if("exportTo"in Object(r))throw new Error('[postcss-custom-properties] "exportTo" is no longer supported');return{postcssPlugin:"postcss-custom-properties",prepare:()=>{let r=new Map;return{Once:e=>{r=getCustomPropertiesFromRoot(e)},Declaration:n=>{if(hasSupportsAtRuleAncestor(n))return;let o=r;if(t&&n.parent){let t=!1;n.parent.each((s=>{n!==s&&"decl"===s.type&&s.variable&&!isDeclarationIgnored(s)&&(t||(o=new Map(r),t=!0),"initial"!==s.value.toLowerCase().trim()?o.set(s.prop,e(s.value)):o.delete(s.prop))}))}transformProperties(n,o,{preserve:t})}}}}};creator.postcss=!0;export{creator as default};
diff --git a/plugins/postcss-custom-properties/src/has-supports-at-rule-ancestor.ts b/plugins/postcss-custom-properties/src/has-supports-at-rule-ancestor.ts
new file mode 100644
index 000000000..8cf84c739
--- /dev/null
+++ b/plugins/postcss-custom-properties/src/has-supports-at-rule-ancestor.ts
@@ -0,0 +1,21 @@
+import type { Node, AtRule } from 'postcss';
+
+export function hasSupportsAtRuleAncestor(node: Node): boolean {
+	let parent = node.parent;
+	while (parent) {
+		if (parent.type !== 'atrule') {
+			parent = parent.parent;
+			continue;
+		}
+
+		if ((parent as AtRule).name.toLowerCase() === 'supports') {
+			if (/([^\w]var\()|(\(top: var\(--f\))/i.test((parent as AtRule).params)) {
+				return true;
+			}
+		}
+
+		parent = parent.parent;
+	}
+
+	return false;
+}
diff --git a/plugins/postcss-custom-properties/src/index.ts b/plugins/postcss-custom-properties/src/index.ts
index b436b3765..d7f9074bb 100644
--- a/plugins/postcss-custom-properties/src/index.ts
+++ b/plugins/postcss-custom-properties/src/index.ts
@@ -4,6 +4,7 @@ import valuesParser from 'postcss-value-parser';
 import getCustomPropertiesFromRoot from './get-custom-properties-from-root';
 import { isDeclarationIgnored } from './is-ignored';
 import transformProperties from './transform-properties';
+import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor';
 
 /** postcss-custom-properties plugin options */
 export type pluginOptions = {
@@ -32,6 +33,10 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 					customProperties = getCustomPropertiesFromRoot(root);
 				},
 				Declaration: (decl) => {
+					if (hasSupportsAtRuleAncestor(decl)) {
+						return;
+					}
+
 					let localCustomProperties = customProperties;
 					if (preserve && decl.parent) {
 						let didCopy = false;
diff --git a/plugins/postcss-custom-properties/test/basic.css b/plugins/postcss-custom-properties/test/basic.css
index 3e3624776..6d220155b 100644
--- a/plugins/postcss-custom-properties/test/basic.css
+++ b/plugins/postcss-custom-properties/test/basic.css
@@ -208,3 +208,17 @@ html {
 :root {
 	--foo: var(--definitely-does-not-exist-3);
 }
+
+@supports (left: var(--bar)) {
+	.has-supports-ancestor {
+		--something-local: 1;
+		left: var(--something-local);
+	}
+}
+
+@supports (top: var(--f)) {
+	.has-supports-ancestor {
+		--something-local: 1;
+		left: var(--something-local);
+	}
+}
diff --git a/plugins/postcss-custom-properties/test/basic.expect.css b/plugins/postcss-custom-properties/test/basic.expect.css
index acabaccfa..a149ece73 100644
--- a/plugins/postcss-custom-properties/test/basic.expect.css
+++ b/plugins/postcss-custom-properties/test/basic.expect.css
@@ -241,3 +241,17 @@ html {
 :root {
 	--foo: var(--definitely-does-not-exist-3);
 }
+
+@supports (left: var(--bar)) {
+	.has-supports-ancestor {
+		--something-local: 1;
+		left: var(--something-local);
+	}
+}
+
+@supports (top: var(--f)) {
+	.has-supports-ancestor {
+		--something-local: 1;
+		left: var(--something-local);
+	}
+}
diff --git a/plugins/postcss-custom-properties/test/basic.preserve.expect.css b/plugins/postcss-custom-properties/test/basic.preserve.expect.css
index 2c360c917..85dae2e6f 100644
--- a/plugins/postcss-custom-properties/test/basic.preserve.expect.css
+++ b/plugins/postcss-custom-properties/test/basic.preserve.expect.css
@@ -203,3 +203,17 @@ html {
 :root {
 	--foo: var(--definitely-does-not-exist-3);
 }
+
+@supports (left: var(--bar)) {
+	.has-supports-ancestor {
+		--something-local: 1;
+		left: var(--something-local);
+	}
+}
+
+@supports (top: var(--f)) {
+	.has-supports-ancestor {
+		--something-local: 1;
+		left: var(--something-local);
+	}
+}
diff --git a/plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css b/plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css
index b5f27ba40..5edfd56ad 100644
--- a/plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css
+++ b/plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css
@@ -5,18 +5,33 @@
 
 .order-1 {
 	order: var(1, linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%));
+}
+
+@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (top: var(--f)) {
+.order-1 {
 	order: var(1, linear-gradient(90deg, black 25% 50%, blue 50% 75%));
 }
+}
 
 .order-2 {
 	order: var(linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%), 1);
+}
+
+@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (top: var(--f)) {
+.order-2 {
 	order: var(linear-gradient(90deg, black 25% 50%, blue 50% 75%), 1);
 }
+}
 
 .order-3 {
 	order: var(linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%), linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%));
+}
+
+@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (top: var(--f)) {
+.order-3 {
 	order: var(linear-gradient(90deg, black 25% 50%, blue 50% 75%), linear-gradient(90deg, black 25% 50%, blue 50% 75%));
 }
+}
 
 .order-4 {
 	order: prelinear-gradient(90deg, black 25% 50%, blue 50% 75%);
diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css
index bb4f30a8a..f5bdc8c70 100644
--- a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css
+++ b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css
@@ -1,9 +1,19 @@
 .test-1 {
 	--perc-50: 50%;
 	background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), rgb(39, 0, 110), rgb(42, 0, 126), rgb(43, 0, 141), rgb(41, 0, 157), rgb(38, 0, 173), rgb(33, 0, 189), rgb(27, 0, 206), rgb(19, 0, 222), rgb(9, 0, 238), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+}
+
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-1 {
 	background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), color(display-p3 0.10591 -0.185 0.41007), color(display-p3 0.11458 -0.2081 0.4685), color(display-p3 0.11174 -0.2252 0.52777), color(display-p3 0.10009 -0.236 0.58774), color(display-p3 0.08062 -0.2403 0.64834), color(display-p3 0.05297 -0.2367 0.70952), color(display-p3 0.01802 -0.2235 0.77126), color(display-p3 -0.0079 -0.1966 0.83353), color(display-p3 -0.0163 -0.1455 0.89631), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (top: var(--f)) {
+.test-1 {
 	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), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
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 886b843f9..9388bc3af 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,8 +1,13 @@
 .test-1 {
 	--perc-50: 50%;
 	background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), rgb(39, 0, 110), rgb(42, 0, 126), rgb(43, 0, 141), rgb(41, 0, 157), rgb(38, 0, 173), rgb(33, 0, 189), rgb(27, 0, 206), rgb(19, 0, 222), rgb(9, 0, 238), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+}
+
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-1 {
 	background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), color(display-p3 0.10591 -0.185 0.41007), color(display-p3 0.11458 -0.2081 0.4685), color(display-p3 0.11174 -0.2252 0.52777), color(display-p3 0.10009 -0.236 0.58774), color(display-p3 0.08062 -0.2403 0.64834), color(display-p3 0.05297 -0.2367 0.70952), color(display-p3 0.01802 -0.2235 0.77126), color(display-p3 -0.0079 -0.1966 0.83353), color(display-p3 -0.0163 -0.1455 0.89631), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
 }
+}
 
 .test-2-0 {
 	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
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
index 15bca36ec..deee603c5 100644
--- 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
@@ -1,9 +1,19 @@
 .test-1 {
 	--perc-50: 50%;
 	background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), rgb(39, 0, 110), rgb(42, 0, 126), rgb(43, 0, 141), rgb(41, 0, 157), rgb(38, 0, 173), rgb(33, 0, 189), rgb(27, 0, 206), rgb(19, 0, 222), rgb(9, 0, 238), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+}
+
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-1 {
 	background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), color(display-p3 0.10591 -0.185 0.41007), color(display-p3 0.11458 -0.2081 0.4685), color(display-p3 0.11174 -0.2252 0.52777), color(display-p3 0.10009 -0.236 0.58774), color(display-p3 0.08062 -0.2403 0.64834), color(display-p3 0.05297 -0.2367 0.70952), color(display-p3 0.01802 -0.2235 0.77126), color(display-p3 -0.0079 -0.1966 0.83353), color(display-p3 -0.0163 -0.1455 0.89631), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+}
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (top: var(--f)) {
+.test-1 {
 	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), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
diff --git a/plugins/postcss-ic-unit/dist/index.cjs b/plugins/postcss-ic-unit/dist/index.cjs
index 1dc8fe4e8..a8f3b7d31 100644
--- a/plugins/postcss-ic-unit/dist/index.cjs
+++ b/plugins/postcss-ic-unit/dist/index.cjs
@@ -1 +1 @@
-"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("postcss-value-parser");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<t;e++){const t=s.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&/\(font-size: \d+ic\)/.test(s.params.toLowerCase()))return!0;s=s.parent}else s=s.parent;return!1}const basePlugin=e=>({postcssPlugin:"postcss-ic-unit",Declaration(r){if(!r.value.toLowerCase().includes("ic"))return;if(hasFallback(r))return;if(hasSupportsAtRuleAncestor(r))return;const t=s(r.value);t.walk((e=>{if(!e.type||"word"!==e.type)return;const r=s.unit(e.value);r&&"ic"===r.unit.toLowerCase()&&(e.value=`${r.number}em`)}));const o=String(t);o!==r.value&&(r.cloneBefore({value:o}),null!=e&&e.preserve||r.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-ic-unit",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("postcss-value-parser");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<t;e++){const t=s.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&/\(font-size: \d+ic\)/i.test(s.params))return!0;s=s.parent}else s=s.parent;return!1}const basePlugin=e=>({postcssPlugin:"postcss-ic-unit",Declaration(r){if(!r.value.toLowerCase().includes("ic"))return;if(hasFallback(r))return;if(hasSupportsAtRuleAncestor(r))return;const t=s(r.value);t.walk((e=>{if(!e.type||"word"!==e.type)return;const r=s.unit(e.value);r&&"ic"===r.unit.toLowerCase()&&(e.value=`${r.number}em`)}));const o=String(t);o!==r.value&&(r.cloneBefore({value:o}),null!=e&&e.preserve||r.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-ic-unit",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
diff --git a/plugins/postcss-ic-unit/dist/index.mjs b/plugins/postcss-ic-unit/dist/index.mjs
index 4caf0bbf8..3ff29900d 100644
--- a/plugins/postcss-ic-unit/dist/index.mjs
+++ b/plugins/postcss-ic-unit/dist/index.mjs
@@ -1 +1 @@
-import e from"@csstools/postcss-progressive-custom-properties";import s from"postcss-value-parser";function hasFallback(e){const s=e.parent;if(!s)return!1;const t=e.prop.toLowerCase(),r=s.index(e);for(let e=0;e<r;e++){const r=s.nodes[e];if("decl"===r.type&&r.prop.toLowerCase()===t)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&/\(font-size: \d+ic\)/.test(s.params.toLowerCase()))return!0;s=s.parent}else s=s.parent;return!1}const basePlugin=e=>({postcssPlugin:"postcss-ic-unit",Declaration(t){if(!t.value.toLowerCase().includes("ic"))return;if(hasFallback(t))return;if(hasSupportsAtRuleAncestor(t))return;const r=s(t.value);r.walk((e=>{if(!e.type||"word"!==e.type)return;const t=s.unit(e.value);t&&"ic"===t.unit.toLowerCase()&&(e.value=`${t.number}em`)}));const o=String(r);o!==t.value&&(t.cloneBefore({value:o}),null!=e&&e.preserve||t.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const t=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-ic-unit",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import e from"@csstools/postcss-progressive-custom-properties";import s from"postcss-value-parser";function hasFallback(e){const s=e.parent;if(!s)return!1;const t=e.prop.toLowerCase(),r=s.index(e);for(let e=0;e<r;e++){const r=s.nodes[e];if("decl"===r.type&&r.prop.toLowerCase()===t)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&/\(font-size: \d+ic\)/i.test(s.params))return!0;s=s.parent}else s=s.parent;return!1}const basePlugin=e=>({postcssPlugin:"postcss-ic-unit",Declaration(t){if(!t.value.toLowerCase().includes("ic"))return;if(hasFallback(t))return;if(hasSupportsAtRuleAncestor(t))return;const r=s(t.value);r.walk((e=>{if(!e.type||"word"!==e.type)return;const t=s.unit(e.value);t&&"ic"===t.unit.toLowerCase()&&(e.value=`${t.number}em`)}));const o=String(r);o!==t.value&&(t.cloneBefore({value:o}),null!=e&&e.preserve||t.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const t=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-ic-unit",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
diff --git a/plugins/postcss-ic-unit/src/has-supports-at-rule-ancestor.ts b/plugins/postcss-ic-unit/src/has-supports-at-rule-ancestor.ts
index e927b769b..0128a3963 100644
--- a/plugins/postcss-ic-unit/src/has-supports-at-rule-ancestor.ts
+++ b/plugins/postcss-ic-unit/src/has-supports-at-rule-ancestor.ts
@@ -9,7 +9,7 @@ export function hasSupportsAtRuleAncestor(node: Node): boolean {
 		}
 
 		if ((parent as AtRule).name.toLowerCase() === 'supports') {
-			if (/\(font-size: \d+ic\)/.test((parent as AtRule).params.toLowerCase())) {
+			if (/\(font-size: \d+ic\)/i.test((parent as AtRule).params)) {
 				return true;
 			}
 		}
diff --git a/plugins/postcss-ic-unit/test/basic.preserve-true.expect.css b/plugins/postcss-ic-unit/test/basic.preserve-true.expect.css
index 23d3adccf..4e453b47d 100644
--- a/plugins/postcss-ic-unit/test/basic.preserve-true.expect.css
+++ b/plugins/postcss-ic-unit/test/basic.preserve-true.expect.css
@@ -4,7 +4,6 @@
 	text-indent: 2ic;
 	content: var(--value-2ic);
 	left: var(--non-existing, 2em);
-	left: var(--non-existing, 2ic);
 	width: calc(8em + 20px);
 	width: calc(8ic + 20px);
 	height: 10px;
@@ -13,6 +12,12 @@
 	padding: 2    ic;
 }
 
+@supports (font-size: 1ic) and (top: var(--f)) {
+.ic-unit {
+	left: var(--non-existing, 2ic);
+}
+}
+
 to-clone {
 	text-indent: 2em;
 	text-indent: 2ic;
diff --git a/plugins/postcss-ic-unit/test/basic.with-cloned-rules.expect.css b/plugins/postcss-ic-unit/test/basic.with-cloned-rules.expect.css
index 1535ab3ac..1b9ef10db 100644
--- a/plugins/postcss-ic-unit/test/basic.with-cloned-rules.expect.css
+++ b/plugins/postcss-ic-unit/test/basic.with-cloned-rules.expect.css
@@ -4,7 +4,6 @@
 	text-indent: 2ic;
 	content: var(--value-2ic);
 	left: var(--non-existing, 2em);
-	left: var(--non-existing, 2ic);
 	width: calc(8em + 20px);
 	width: calc(8ic + 20px);
 	height: 10px;
@@ -13,6 +12,12 @@
 	padding: 2    ic;
 }
 
+@supports (font-size: 1ic) and (top: var(--f)) {
+.ic-unit {
+	left: var(--non-existing, 2ic);
+}
+}
+
 cloned {
 	text-indent: 2em;
 	text-indent: 2ic;
diff --git a/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css b/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css
index 61af1b321..9d0b6abc5 100644
--- a/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css
+++ b/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css
@@ -104,12 +104,17 @@
 	color-3: rgb(7, 3, 1);
 	color-3: lab(1% 1 1 / calc(20% * 5));
 	color-4: rgba(7, 3, 1, var(--foo));
-	color-4: lab(1% 1 1 / var(--foo));
 	color-5: lab(1% 1 1 /);
 	color-6: rgba(7, 3, 1, 0.6);
 	color-6: lab(1% 1 1 / calc(20% * 3));
 }
 
+@supports (color: lab(0% 0 0)) and (top: var(--f)) {
+.test-alpha-lab {
+	color-4: lab(1% 1 1 / var(--foo));
+}
+}
+
 .test-alpha-lch {
 	color-1: rgb(6, 3, 4);
 	color-1: lch(1% 1 1 / 1);
@@ -118,12 +123,17 @@
 	color-3: rgb(6, 3, 4);
 	color-3: lch(1% 1 1 / calc(20% * 5));
 	color-4: rgba(6, 3, 4, var(--foo));
-	color-4: lch(1% 1 1 / var(--foo));
 	color-5: lch(1% 1 1 /);
 	color-6: rgba(6, 3, 4, 0.6);
 	color-6: lch(1% 1 1 / calc(20% * 3));
 }
 
+@supports (color: lch(0% 0 0)) and (top: var(--f)) {
+.test-alpha-lch {
+	color-4: lch(1% 1 1 / var(--foo));
+}
+}
+
 .test-ignore {
 	prop-1: 'lch(1% 1 1 / 1)';
 	prop-2: url('lch(1% 1 1 / 1)');
diff --git a/plugins/postcss-lab-function/test/basic.preserve-true.expect.css b/plugins/postcss-lab-function/test/basic.preserve-true.expect.css
index e2b0629cf..238bbafa7 100644
--- a/plugins/postcss-lab-function/test/basic.preserve-true.expect.css
+++ b/plugins/postcss-lab-function/test/basic.preserve-true.expect.css
@@ -115,12 +115,17 @@
 	color-3: rgb(7, 3, 1);
 	color-3: lab(1% 1 1 / calc(20% * 5));
 	color-4: rgba(7, 3, 1, var(--foo));
-	color-4: lab(1% 1 1 / var(--foo));
 	color-5: lab(1% 1 1 /);
 	color-6: rgba(7, 3, 1, 0.6);
 	color-6: lab(1% 1 1 / calc(20% * 3));
 }
 
+@supports (color: lab(0% 0 0)) and (top: var(--f)) {
+.test-alpha-lab {
+	color-4: lab(1% 1 1 / var(--foo));
+}
+}
+
 .test-alpha-lch {
 	color-1: rgb(6, 3, 4);
 	color-1: lch(1% 1 1 / 1);
@@ -129,12 +134,17 @@
 	color-3: rgb(6, 3, 4);
 	color-3: lch(1% 1 1 / calc(20% * 5));
 	color-4: rgba(6, 3, 4, var(--foo));
-	color-4: lch(1% 1 1 / var(--foo));
 	color-5: lch(1% 1 1 /);
 	color-6: rgba(6, 3, 4, 0.6);
 	color-6: lch(1% 1 1 / calc(20% * 3));
 }
 
+@supports (color: lch(0% 0 0)) and (top: var(--f)) {
+.test-alpha-lch {
+	color-4: lch(1% 1 1 / var(--foo));
+}
+}
+
 .test-ignore {
 	prop-1: 'lch(1% 1 1 / 1)';
 	prop-2: url('lch(1% 1 1 / 1)');
diff --git a/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css
index a3acf5751..819a4de4d 100644
--- a/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css
+++ b/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css
@@ -115,12 +115,17 @@
 	color-3: rgb(7, 3, 1);
 	color-3: lab(1% 1 1 / calc(20% * 5));
 	color-4: rgba(7, 3, 1, var(--foo));
-	color-4: lab(1% 1 1 / var(--foo));
 	color-5: lab(1% 1 1 /);
 	color-6: rgba(7, 3, 1, 0.6);
 	color-6: lab(1% 1 1 / calc(20% * 3));
 }
 
+@supports (color: lab(0% 0 0)) and (top: var(--f)) {
+.test-alpha-lab {
+	color-4: lab(1% 1 1 / var(--foo));
+}
+}
+
 .test-alpha-lch {
 	color-1: rgb(6, 3, 4);
 	color-1: lch(1% 1 1 / 1);
@@ -129,12 +134,17 @@
 	color-3: rgb(6, 3, 4);
 	color-3: lch(1% 1 1 / calc(20% * 5));
 	color-4: rgba(6, 3, 4, var(--foo));
-	color-4: lch(1% 1 1 / var(--foo));
 	color-5: lch(1% 1 1 /);
 	color-6: rgba(6, 3, 4, 0.6);
 	color-6: lch(1% 1 1 / calc(20% * 3));
 }
 
+@supports (color: lch(0% 0 0)) and (top: var(--f)) {
+.test-alpha-lch {
+	color-4: lch(1% 1 1 / var(--foo));
+}
+}
+
 .test-ignore {
 	prop-1: 'lch(1% 1 1 / 1)';
 	prop-2: url('lch(1% 1 1 / 1)');
diff --git a/plugins/postcss-oklab-function/test/basic.expect.css b/plugins/postcss-oklab-function/test/basic.expect.css
index 713deb154..ccc3a5340 100644
--- a/plugins/postcss-oklab-function/test/basic.expect.css
+++ b/plugins/postcss-oklab-function/test/basic.expect.css
@@ -83,10 +83,15 @@
 	color-3: rgb(0, 0, 0);
 	color-3: color(display-p3 0.00015 0 0);
 	color-4: rgba(0, 0, 0, var(--foo));
-	color-4: color(display-p3 0.00015 0 0 / var(--foo));
 	color-5: oklab(1% 0.01 0.01 /);
 }
 
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-alpha-oklab {
+	color-4: color(display-p3 0.00015 0 0 / var(--foo));
+}
+}
+
 .test-alpha-oklch {
 	color-1: rgb(0, 0, 0);
 	color-1: color(display-p3 0.00009 0 0.00001);
@@ -95,10 +100,15 @@
 	color-3: rgb(0, 0, 0);
 	color-3: color(display-p3 0.00009 0 0.00001);
 	color-4: rgba(0, 0, 0, var(--foo));
-	color-4: color(display-p3 0.00009 0 0.00001 / var(--foo));
 	color-5: oklch(1% 0.01 0.01 /);
 }
 
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-alpha-oklch {
+	color-4: color(display-p3 0.00009 0 0.00001 / var(--foo));
+}
+}
+
 .test-powerless-hue-0 {
 	color-0: rgb(0, 0, 0);
 	color-1: rgb(3, 3, 3);
diff --git a/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css b/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css
index 89760f9aa..3a67237ff 100644
--- a/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css
+++ b/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css
@@ -112,10 +112,15 @@
 	color-3: rgb(0, 0, 0);
 	color-3: oklab(1% 0.01 0.01 / calc(20% * 5));
 	color-4: rgba(0, 0, 0, var(--foo));
-	color-4: oklab(1% 0.01 0.01 / var(--foo));
 	color-5: oklab(1% 0.01 0.01 /);
 }
 
+@supports (color: oklab(0% 0 0)) and (top: var(--f)) {
+.test-alpha-oklab {
+	color-4: oklab(1% 0.01 0.01 / var(--foo));
+}
+}
+
 .test-alpha-oklch {
 	color-1: rgb(0, 0, 0);
 	color-1: oklch(1% 0.01 0.01 / 1);
@@ -124,10 +129,15 @@
 	color-3: rgb(0, 0, 0);
 	color-3: oklch(1% 0.01 0.01 / calc(20% * 5));
 	color-4: rgba(0, 0, 0, var(--foo));
-	color-4: oklch(1% 0.01 0.01 / var(--foo));
 	color-5: oklch(1% 0.01 0.01 /);
 }
 
+@supports (color: oklch(0% 0 0)) and (top: var(--f)) {
+.test-alpha-oklch {
+	color-4: oklch(1% 0.01 0.01 / var(--foo));
+}
+}
+
 .test-powerless-hue-0 {
 	color-0: rgb(0, 0, 0);
 	color-0: oklch(0% 0 0);
diff --git a/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css b/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css
index 793248b63..a39521ffa 100644
--- a/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css
+++ b/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css
@@ -127,9 +127,19 @@
 	color-3: color(display-p3 0.00015 0 0);
 	color-3: oklab(1% 0.01 0.01 / calc(20% * 5));
 	color-4: rgba(0, 0, 0, var(--foo));
+	color-5: oklab(1% 0.01 0.01 /);
+}
+
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-alpha-oklab {
 	color-4: color(display-p3 0.00015 0 0 / var(--foo));
+}
+}
+
+@supports (color: oklab(0% 0 0)) and (top: var(--f)) {
+.test-alpha-oklab {
 	color-4: oklab(1% 0.01 0.01 / var(--foo));
-	color-5: oklab(1% 0.01 0.01 /);
+}
 }
 
 .test-alpha-oklch {
@@ -143,9 +153,19 @@
 	color-3: color(display-p3 0.00009 0 0.00001);
 	color-3: oklch(1% 0.01 0.01 / calc(20% * 5));
 	color-4: rgba(0, 0, 0, var(--foo));
+	color-5: oklch(1% 0.01 0.01 /);
+}
+
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+.test-alpha-oklch {
 	color-4: color(display-p3 0.00009 0 0.00001 / var(--foo));
+}
+}
+
+@supports (color: oklch(0% 0 0)) and (top: var(--f)) {
+.test-alpha-oklch {
 	color-4: oklch(1% 0.01 0.01 / var(--foo));
-	color-5: oklch(1% 0.01 0.01 /);
+}
 }
 
 .test-powerless-hue-0 {
diff --git a/plugins/postcss-oklab-function/test/variables.expect.css b/plugins/postcss-oklab-function/test/variables.expect.css
index f6cc70185..ad42a61d5 100644
--- a/plugins/postcss-oklab-function/test/variables.expect.css
+++ b/plugins/postcss-oklab-function/test/variables.expect.css
@@ -13,6 +13,11 @@
 :root {
 	--firebrick: color(display-p3 0.51193 0 0.22329);
 	--firebrick-a50: color(display-p3 0.51567 0 0.25999 / 0.5);
+}
+}
+
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
+:root {
 	--firebrick-a50-var: color(display-p3 0.51567 0 0.25999 / var(--opacity-50));
 }
 }
diff --git a/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css b/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css
index cba5a1a2c..f1be01fd1 100644
--- a/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css
+++ b/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css
@@ -18,6 +18,11 @@
 @supports (color: oklch(0% 0 0)) {
 :root {
 	--firebrick-a50: oklch(40% 0.4 0.039 / 50%);
+}
+}
+
+@supports (color: oklch(0% 0 0)) and (top: var(--f)) {
+:root {
 	--firebrick-a50-var: oklch(40% 0.4 0.039 / var(--opacity-50));
 }
 }
diff --git a/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css b/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css
index 9fcf678f6..268d5cbd0 100644
--- a/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css
+++ b/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css
@@ -33,13 +33,13 @@
 }
 }
 
-@supports (color: color(display-p3 0 0 0)) {
+@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
 :root {
 	--firebrick-a50-var: color(display-p3 0.51567 0 0.25999 / var(--opacity-50));
 }
 }
 
-@supports (color: oklch(0% 0 0)) {
+@supports (color: oklch(0% 0 0)) and (top: var(--f)) {
 :root {
 	--firebrick-a50-var: oklch(40% 0.4 0.039 / var(--opacity-50));
 }
diff --git a/plugins/postcss-progressive-custom-properties/.tape.mjs b/plugins/postcss-progressive-custom-properties/.tape.mjs
index 40d38a82d..a4e3f8d50 100644
--- a/plugins/postcss-progressive-custom-properties/.tape.mjs
+++ b/plugins/postcss-progressive-custom-properties/.tape.mjs
@@ -5,7 +5,4 @@ postcssTape(plugin)({
 	basic: {
 		message: "supports basic usage",
 	},
-	example: {
-		message: "minimal example",
-	},
 });
diff --git a/plugins/postcss-progressive-custom-properties/CHANGELOG.md b/plugins/postcss-progressive-custom-properties/CHANGELOG.md
index 2d5abbd5a..c9550421c 100644
--- a/plugins/postcss-progressive-custom-properties/CHANGELOG.md
+++ b/plugins/postcss-progressive-custom-properties/CHANGELOG.md
@@ -1,5 +1,27 @@
 # Changes to PostCSS Progressive Custom Properties
 
+### Unreleased (minor)
+
+- Add support for regular properties whose values contain `var()`
+
+```css
+.property-with-var--1 {
+	color: rgba(87, 107, 149, var(--opacity));
+	color: rgb(87 107 149 / var(--opacity));
+}
+
+/* becomes */
+.property-with-var--1 {
+	color: rgba(87, 107, 149, var(--opacity));
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) {
+	.property-with-var--1 {
+		color: rgb(87 107 149 / var(--opacity));
+	}
+}
+```
+
 ### 2.2.0 (May 19, 2023)
 
 - Add relative color syntax support.
diff --git a/plugins/postcss-progressive-custom-properties/dist/index.cjs b/plugins/postcss-progressive-custom-properties/dist/index.cjs
index 0f82de369..d40acd30f 100644
--- a/plugins/postcss-progressive-custom-properties/dist/index.cjs
+++ b/plugins/postcss-progressive-custom-properties/dist/index.cjs
@@ -1 +1 @@
-"use strict";var e=require("postcss-value-parser");const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r<Math.max(e.nodes.length,a.nodes.length);r++){let p=r,t=r;for(;e.nodes[p]&&"space"===e.nodes[p].type;)p++;for(;a.nodes[t]&&"space"===a.nodes[t].type;)t++;if(!!e.nodes[p]!=!!a.nodes[t])return!1;if(!matches(e.nodes[p],a.nodes[t]))return!1}return!0}return!0}function doesNotMatchValue(e,a){var r,p,t,i;return("space"!==e.type||"space"!==a.type||(null==(r=e.value)?void 0:r.trim())!==(null==(p=a.value)?void 0:p.trim()))&&(e.dimension&&a.dimension?e.dimension.unit!==a.dimension.unit:"string"===e.type?e.value!==a.value:(null==(t=e.value)?void 0:t.toLowerCase())!==(null==(i=a.value)?void 0:i.toLowerCase()))}const r=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const a=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;o<e.nodes.length;o++){const s=e.nodes[o];if("word"===s.type&&r.includes(s.value.toLowerCase())&&(t=!0),"div"!==s.type||","!==s.value.trim())if("word"!==s.type||"in"!==s.value.toLowerCase()){if("word"!==s.type&&"function"!==s.type||p++,i)switch(e.value.toLowerCase()){case"conic-gradient":a.push("(background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":a.push("(background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":a.push("(background: radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":a.push("(background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":a.push("(background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":a.push("(background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e}if(!t&&3===p)switch(e.value.toLowerCase()){case"conic-gradient":a.push("(background: conic-gradient(red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":a.push("(background: linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":a.push("(background: radial-gradient(red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":a.push("(background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":a.push("(background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":a.push("(background: repeating-radial-gradient(red, red 1px 2px, red 3px))");break e}}else i=!0;else p=0,t=!1}}return a}function supportConditionsFromValue(r){const p=[],t=[];a.forEach((e=>{r.indexOf(e.sniff)>-1&&t.push(e)}));try{e(r).walk((a=>{try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e<t.length;e++){const r=t[e];for(let e=0;e<r.matchers.length;e++){if(matches(r.matchers[e],a))return void p.push(`(${r.property}: ${r.supports})`)}}p.push(...doublePositionGradients(a))}))}catch(e){}return Array.from(new Set(p))}const creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:a})=>{const r=[],p=new Map,t=new Set;e.each((i=>{if("decl"!==i.type)return;if(!i.variable)return;if("initial"===i.value.trim().toLowerCase())return;if(""===i.value.trim())return;if(!t.has(i.prop.toString().toLowerCase()))return void t.add(i.prop.toString().toLowerCase());const o=supportConditionsFromValue(i.value);if(!o.length)return;const s=o.join(" and ");if(r.length&&r[r.length-1].params===s){const e=r[r.length-1],a=p.get(e);if(a)return a.append(i.clone()),void i.remove()}const y=a.atRule({name:"supports",params:s,source:e.source,raws:{before:"\n\n",after:"\n"}}),l=e.clone();l.removeAll(),l.raws.before="\n",l.append(i.clone()),i.remove(),p.set(y,l),y.append(l),r.push(y)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}});creator.postcss=!0,module.exports=creator;
+"use strict";var e=require("postcss-value-parser");const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r<Math.max(e.nodes.length,a.nodes.length);r++){let p=r,t=r;for(;e.nodes[p]&&"space"===e.nodes[p].type;)p++;for(;a.nodes[t]&&"space"===a.nodes[t].type;)t++;if(!!e.nodes[p]!=!!a.nodes[t])return!1;if(!matches(e.nodes[p],a.nodes[t]))return!1}return!0}return!0}function doesNotMatchValue(e,a){var r,p,t,i;return("space"!==e.type||"space"!==a.type||(null==(r=e.value)?void 0:r.trim())!==(null==(p=a.value)?void 0:p.trim()))&&(e.dimension&&a.dimension?e.dimension.unit!==a.dimension.unit:"string"===e.type?e.value!==a.value:(null==(t=e.value)?void 0:t.toLowerCase())!==(null==(i=a.value)?void 0:i.toLowerCase()))}const r=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const a=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;o<e.nodes.length;o++){const s=e.nodes[o];if("word"===s.type&&r.includes(s.value.toLowerCase())&&(t=!0),"div"!==s.type||","!==s.value.trim())if("word"!==s.type||"in"!==s.value.toLowerCase()){if("word"!==s.type&&"function"!==s.type||p++,i)switch(e.value.toLowerCase()){case"conic-gradient":a.push("(background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":a.push("(background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":a.push("(background: radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":a.push("(background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":a.push("(background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":a.push("(background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e}if(!t&&3===p)switch(e.value.toLowerCase()){case"conic-gradient":a.push("(background: conic-gradient(red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":a.push("(background: linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":a.push("(background: radial-gradient(red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":a.push("(background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":a.push("(background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":a.push("(background: repeating-radial-gradient(red, red 1px 2px, red 3px))");break e}}else i=!0;else p=0,t=!1}}return a}const p=/^var$/i;function supportConditionsFromValue(r,t=!1){const i=[],o=[];a.forEach((e=>{r.indexOf(e.sniff)>-1&&o.push(e)}));let s=!1;try{e(r).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e<o.length;e++){const r=o[e];for(let e=0;e<r.matchers.length;e++){if(matches(r.matchers[e],a))return void i.push(`(${r.property}: ${r.supports})`)}}i.push(...doublePositionGradients(a))}))}catch(e){}return t&&!s?[]:(s&&i.length>0&&i.push("(top: var(--f))"),Array.from(new Set(i)))}const t=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:a})=>{const r=[],p=new Map,i=new Set;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!i.has(o.prop.toString()))return void i.add(o.prop.toString())}else if(!i.has(o.prop.toString().toLowerCase()))return void i.add(o.prop.toString().toLowerCase());if(!o.variable&&!t.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=supportConditionsFromValue(o.value,s);if(!y.length)return;const l=y.join(" and ");if(r.length&&r[r.length-1].params===l){const e=r[r.length-1],a=p.get(e);if(a)return a.append(o.clone()),void o.remove()}const d=a.atRule({name:"supports",params:l,source:e.source,raws:{before:"\n\n",after:"\n"}}),c=e.clone();c.removeAll(),c.raws.before="\n",c.append(o.clone()),o.remove(),p.set(d,c),d.append(c),r.push(d)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}});creator.postcss=!0,module.exports=creator;
diff --git a/plugins/postcss-progressive-custom-properties/dist/index.mjs b/plugins/postcss-progressive-custom-properties/dist/index.mjs
index 742d198aa..ef854aa63 100644
--- a/plugins/postcss-progressive-custom-properties/dist/index.mjs
+++ b/plugins/postcss-progressive-custom-properties/dist/index.mjs
@@ -1 +1 @@
-import e from"postcss-value-parser";const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r<Math.max(e.nodes.length,a.nodes.length);r++){let p=r,t=r;for(;e.nodes[p]&&"space"===e.nodes[p].type;)p++;for(;a.nodes[t]&&"space"===a.nodes[t].type;)t++;if(!!e.nodes[p]!=!!a.nodes[t])return!1;if(!matches(e.nodes[p],a.nodes[t]))return!1}return!0}return!0}function doesNotMatchValue(e,a){var r,p,t,i;return("space"!==e.type||"space"!==a.type||(null==(r=e.value)?void 0:r.trim())!==(null==(p=a.value)?void 0:p.trim()))&&(e.dimension&&a.dimension?e.dimension.unit!==a.dimension.unit:"string"===e.type?e.value!==a.value:(null==(t=e.value)?void 0:t.toLowerCase())!==(null==(i=a.value)?void 0:i.toLowerCase()))}const r=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const a=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;o<e.nodes.length;o++){const s=e.nodes[o];if("word"===s.type&&r.includes(s.value.toLowerCase())&&(t=!0),"div"!==s.type||","!==s.value.trim())if("word"!==s.type||"in"!==s.value.toLowerCase()){if("word"!==s.type&&"function"!==s.type||p++,i)switch(e.value.toLowerCase()){case"conic-gradient":a.push("(background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":a.push("(background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":a.push("(background: radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":a.push("(background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":a.push("(background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":a.push("(background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e}if(!t&&3===p)switch(e.value.toLowerCase()){case"conic-gradient":a.push("(background: conic-gradient(red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":a.push("(background: linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":a.push("(background: radial-gradient(red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":a.push("(background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":a.push("(background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":a.push("(background: repeating-radial-gradient(red, red 1px 2px, red 3px))");break e}}else i=!0;else p=0,t=!1}}return a}function supportConditionsFromValue(r){const p=[],t=[];a.forEach((e=>{r.indexOf(e.sniff)>-1&&t.push(e)}));try{e(r).walk((a=>{try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e<t.length;e++){const r=t[e];for(let e=0;e<r.matchers.length;e++){if(matches(r.matchers[e],a))return void p.push(`(${r.property}: ${r.supports})`)}}p.push(...doublePositionGradients(a))}))}catch(e){}return Array.from(new Set(p))}const creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:a})=>{const r=[],p=new Map,t=new Set;e.each((i=>{if("decl"!==i.type)return;if(!i.variable)return;if("initial"===i.value.trim().toLowerCase())return;if(""===i.value.trim())return;if(!t.has(i.prop.toString().toLowerCase()))return void t.add(i.prop.toString().toLowerCase());const o=supportConditionsFromValue(i.value);if(!o.length)return;const s=o.join(" and ");if(r.length&&r[r.length-1].params===s){const e=r[r.length-1],a=p.get(e);if(a)return a.append(i.clone()),void i.remove()}const y=a.atRule({name:"supports",params:s,source:e.source,raws:{before:"\n\n",after:"\n"}}),l=e.clone();l.removeAll(),l.raws.before="\n",l.append(i.clone()),i.remove(),p.set(y,l),y.append(l),r.push(y)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}});creator.postcss=!0;export{creator as default};
+import e from"postcss-value-parser";const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r<Math.max(e.nodes.length,a.nodes.length);r++){let p=r,t=r;for(;e.nodes[p]&&"space"===e.nodes[p].type;)p++;for(;a.nodes[t]&&"space"===a.nodes[t].type;)t++;if(!!e.nodes[p]!=!!a.nodes[t])return!1;if(!matches(e.nodes[p],a.nodes[t]))return!1}return!0}return!0}function doesNotMatchValue(e,a){var r,p,t,i;return("space"!==e.type||"space"!==a.type||(null==(r=e.value)?void 0:r.trim())!==(null==(p=a.value)?void 0:p.trim()))&&(e.dimension&&a.dimension?e.dimension.unit!==a.dimension.unit:"string"===e.type?e.value!==a.value:(null==(t=e.value)?void 0:t.toLowerCase())!==(null==(i=a.value)?void 0:i.toLowerCase()))}const r=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const a=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;o<e.nodes.length;o++){const s=e.nodes[o];if("word"===s.type&&r.includes(s.value.toLowerCase())&&(t=!0),"div"!==s.type||","!==s.value.trim())if("word"!==s.type||"in"!==s.value.toLowerCase()){if("word"!==s.type&&"function"!==s.type||p++,i)switch(e.value.toLowerCase()){case"conic-gradient":a.push("(background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":a.push("(background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":a.push("(background: radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":a.push("(background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":a.push("(background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":a.push("(background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e}if(!t&&3===p)switch(e.value.toLowerCase()){case"conic-gradient":a.push("(background: conic-gradient(red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":a.push("(background: linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":a.push("(background: radial-gradient(red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":a.push("(background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":a.push("(background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":a.push("(background: repeating-radial-gradient(red, red 1px 2px, red 3px))");break e}}else i=!0;else p=0,t=!1}}return a}const p=/^var$/i;function supportConditionsFromValue(r,t=!1){const i=[],o=[];a.forEach((e=>{r.indexOf(e.sniff)>-1&&o.push(e)}));let s=!1;try{e(r).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e<o.length;e++){const r=o[e];for(let e=0;e<r.matchers.length;e++){if(matches(r.matchers[e],a))return void i.push(`(${r.property}: ${r.supports})`)}}i.push(...doublePositionGradients(a))}))}catch(e){}return t&&!s?[]:(s&&i.length>0&&i.push("(top: var(--f))"),Array.from(new Set(i)))}const t=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:a})=>{const r=[],p=new Map,i=new Set;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!i.has(o.prop.toString()))return void i.add(o.prop.toString())}else if(!i.has(o.prop.toString().toLowerCase()))return void i.add(o.prop.toString().toLowerCase());if(!o.variable&&!t.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=supportConditionsFromValue(o.value,s);if(!y.length)return;const l=y.join(" and ");if(r.length&&r[r.length-1].params===l){const e=r[r.length-1],a=p.get(e);if(a)return a.append(o.clone()),void o.remove()}const d=a.atRule({name:"supports",params:l,source:e.source,raws:{before:"\n\n",after:"\n"}}),c=e.clone();c.removeAll(),c.raws.before="\n",c.append(o.clone()),o.remove(),p.set(d,c),d.append(c),r.push(d)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}});creator.postcss=!0;export{creator as default};
diff --git a/plugins/postcss-progressive-custom-properties/dist/support-conditions-from-values.d.ts b/plugins/postcss-progressive-custom-properties/dist/support-conditions-from-values.d.ts
index dabde490b..ac2825f3c 100644
--- a/plugins/postcss-progressive-custom-properties/dist/support-conditions-from-values.d.ts
+++ b/plugins/postcss-progressive-custom-properties/dist/support-conditions-from-values.d.ts
@@ -1 +1 @@
-export declare function supportConditionsFromValue(value: string): Array<string>;
+export declare function supportConditionsFromValue(value: string, mustContainVar?: boolean): Array<string>;
diff --git a/plugins/postcss-progressive-custom-properties/src/index.ts b/plugins/postcss-progressive-custom-properties/src/index.ts
index 9bc061700..31964918b 100644
--- a/plugins/postcss-progressive-custom-properties/src/index.ts
+++ b/plugins/postcss-progressive-custom-properties/src/index.ts
@@ -1,20 +1,37 @@
 import type { AtRule, PluginCreator, Rule } from 'postcss';
 import { supportConditionsFromValue } from './support-conditions-from-values';
 
+const hasVariableFunction = /var\(/i;
+
 const creator: PluginCreator<null> = () => {
 	return {
 		postcssPlugin: 'postcss-progressive-custom-properties',
 		RuleExit: (rule, { postcss }) => {
 			const atSupportsRules: Array<AtRule> = [];
 			const parentRuleClones: Map<AtRule, Rule> = new Map();
-			const variableNames = new Set<string>();
+			const propNames = new Set<string>();
 
 			rule.each((decl) => {
 				if (decl.type !== 'decl') {
 					return;
 				}
 
-				if (!decl.variable) {
+				// The first encountered property is the fallback for the oldest targets.
+				if (decl.variable) {
+					// custom properties are case-sensitive
+					if (!propNames.has(decl.prop.toString())) {
+						propNames.add(decl.prop.toString());
+						return;
+					}
+				} else {
+					// regular properties are case-insensitive
+					if (!propNames.has(decl.prop.toString().toLowerCase())) {
+						propNames.add(decl.prop.toString().toLowerCase());
+						return;
+					}
+				}
+
+				if (!(decl.variable || hasVariableFunction.test(decl.value))) {
 					return;
 				}
 
@@ -28,13 +45,10 @@ const creator: PluginCreator<null> = () => {
 					return;
 				}
 
-				// The first encountered property is the fallback for the oldest targets.
-				if (!variableNames.has(decl.prop.toString().toLowerCase())) {
-					variableNames.add(decl.prop.toString().toLowerCase());
-					return;
-				}
+				// if the property itself isn't a custom property, the value must contain a var() function
+				const mustContainVar = !decl.variable;
 
-				const supportConditions = supportConditionsFromValue(decl.value);
+				const supportConditions = supportConditionsFromValue(decl.value, mustContainVar);
 				if (!supportConditions.length) {
 					return;
 				}
diff --git a/plugins/postcss-progressive-custom-properties/src/support-conditions-from-values.ts b/plugins/postcss-progressive-custom-properties/src/support-conditions-from-values.ts
index 0bc9c60c7..012c9b8ed 100644
--- a/plugins/postcss-progressive-custom-properties/src/support-conditions-from-values.ts
+++ b/plugins/postcss-progressive-custom-properties/src/support-conditions-from-values.ts
@@ -3,7 +3,9 @@ import { matchers } from './matchers';
 import { matches } from './match';
 import { doublePositionGradients } from './custom/double-position-gradients';
 
-export function supportConditionsFromValue(value: string): Array<string> {
+const varFunctionName = /^var$/i;
+
+export function supportConditionsFromValue(value: string, mustContainVar = false): Array<string> {
 	const supportConditions: Array<string> = [];
 
 	const relevantMatchers: typeof matchers = [];
@@ -14,9 +16,15 @@ export function supportConditionsFromValue(value: string): Array<string> {
 		}
 	});
 
+	let hasVar = false;
+
 	try {
 		const ast = valueParser(value);
 		ast.walk((node) => {
+			if (node.type === 'function' && varFunctionName.test(node.value)) {
+				hasVar = true;
+			}
+
 			try {
 				// @ts-expect-error We need to extend this type.
 				node['dimension'] = valueParser.unit(node.value);
@@ -49,5 +57,14 @@ export function supportConditionsFromValue(value: string): Array<string> {
 		/* ignore */
 	}
 
+	if (mustContainVar && !hasVar) {
+		return [];
+	}
+
+	if (hasVar && supportConditions.length > 0) {
+		// Only where there are other conditions and a `var()` is present.
+		supportConditions.push('(top: var(--f))');
+	}
+
 	return Array.from(new Set(supportConditions)); // list with unique items.
 }
diff --git a/plugins/postcss-progressive-custom-properties/test/basic.css b/plugins/postcss-progressive-custom-properties/test/basic.css
index d4b0cae0c..afc154111 100644
--- a/plugins/postcss-progressive-custom-properties/test/basic.css
+++ b/plugins/postcss-progressive-custom-properties/test/basic.css
@@ -186,3 +186,33 @@
 	--color-rcs-invalid-8: green;
 	--color-rcs-invalid-8: hsl(from blue h, s, l, alpha);
 }
+
+.property-with-var--1 {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgb(87 107 149 / var(--opacity));
+}
+
+.property-with-var--1-1 {
+	--opacity: 1;
+	color: rgba(87, 107, 149, var(--opacity));
+	color: rgb(87 107 149 / var(--opacity));
+}
+
+.property-with-var--2 {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgb(87 107 149 / calc(var(--opacity) / 2));
+}
+
+.property-with-var--3 {
+	--length: 1px;
+	top: 2px;
+	top: var(--length);
+}
+
+.property-with-notvar--1 {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgb(87 107 149 / notvar(--opacity));
+}
diff --git a/plugins/postcss-progressive-custom-properties/test/basic.expect.css b/plugins/postcss-progressive-custom-properties/test/basic.expect.css
index 116518d65..c9ae61476 100644
--- a/plugins/postcss-progressive-custom-properties/test/basic.expect.css
+++ b/plugins/postcss-progressive-custom-properties/test/basic.expect.css
@@ -24,7 +24,7 @@
 	--prop-9: red;
 }
 
-@supports (color: oklch(0% 0 0)) {
+@supports (color: oklch(0% 0 0)) and (top: var(--f)) {
 :root {
 	--prop-1: oklch(40% 0.234 0.39 / var(--opacity-50));
 }
@@ -81,7 +81,7 @@
 }
 }
 
-@supports (color: oklch(0% 0 0)) {
+@supports (color: oklch(0% 0 0)) and (top: var(--f)) {
 :root {
 	--prop-8: 1px solid oklch(40% 0.234 0.39 / var(--opacity-50));
 }
@@ -139,8 +139,18 @@
 :root {
 	--color-1: color(srgb 0.64331 0.19245 0.16771);
 	--color-2: color(srgb 0.64331 0.19245 0.16771 / 50);
+}
+}
+
+@supports (color: color(srgb 0 0 0)) and (top: var(--f)) {
+:root {
 	--color-3: color(srgb 0.64331 0.19245 0.16771 / var(--opacity-50));
 	--color-4: color(srgb 0.64331 var(--point-5) 0.16771 / var(--opacity-50));
+}
+}
+
+@supports (color: color(srgb 0 0 0)) {
+:root {
 	--color-5: color(srgb 0.64331   0.19245 0.16771 / calc(1 / 2));
 }
 }
@@ -336,3 +346,48 @@
 	--color-rcs-invalid-8: green;
 	--color-rcs-invalid-8: hsl(from blue h, s, l, alpha);
 }
+
+.property-with-var--1 {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) {
+.property-with-var--1 {
+	color: rgb(87 107 149 / var(--opacity));
+}
+}
+
+.property-with-var--1-1 {
+	--opacity: 1;
+	color: rgba(87, 107, 149, var(--opacity));
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) {
+.property-with-var--1-1 {
+	color: rgb(87 107 149 / var(--opacity));
+}
+}
+
+.property-with-var--2 {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+}
+
+@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) {
+.property-with-var--2 {
+	color: rgb(87 107 149 / calc(var(--opacity) / 2));
+}
+}
+
+.property-with-var--3 {
+	--length: 1px;
+	top: 2px;
+	top: var(--length);
+}
+
+.property-with-notvar--1 {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgb(87 107 149 / notvar(--opacity));
+}