Add postcss-custom-functions to postcss-preset-env

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

@@ -1,5 +1,9 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased (minor)
+
+- Added `@csstools/postcss-custom-functions` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-functions#readme) for usage details.
+
 ### 11.5.5
 
 _October 1, 2026_

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

@@ -20,6 +20,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/container-rule-prelude-list.svg" height="18">](https://cssdb.org/#container-rule-prelude-list) | `container-rule-prelude-list` | `@container` prelude list | [example](https://preset-env.cssdb.org/features/#container-rule-prelude-list) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-container-rule-prelude-list#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/content-alt-text.svg" height="18">](https://cssdb.org/#content-alt-text) | `content-alt-text` | Alt text for `content` | [example](https://preset-env.cssdb.org/features/#content-alt-text) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-content-alt-text#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/contrast-color-function.svg" height="18">](https://cssdb.org/#contrast-color-function) | `contrast-color-function` | `contrast-color()` Function | [example](https://preset-env.cssdb.org/features/#contrast-color-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-contrast-color-function#readme) |
+|   | `custom-functions` |   |   |   |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/custom-media-queries.svg" height="18">](https://cssdb.org/#custom-media-queries) | `custom-media-queries` | Custom Media Queries | [example](https://preset-env.cssdb.org/features/#custom-media-queries) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/custom-properties.svg" height="18">](https://cssdb.org/#custom-properties) | `custom-properties` | Custom Properties | [example](https://preset-env.cssdb.org/features/#custom-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/custom-selectors.svg" height="18">](https://cssdb.org/#custom-selectors) | `custom-selectors` | Custom Selectors | [example](https://preset-env.cssdb.org/features/#custom-selectors) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors#readme) |

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

@@ -54,6 +54,7 @@
 		"@csstools/postcss-container-rule-prelude-list": "^1.0.3",
 		"@csstools/postcss-content-alt-text": "^3.0.6",
 		"@csstools/postcss-contrast-color-function": "^3.0.14",
+		"@csstools/postcss-custom-functions": "^1.0.0",
 		"@csstools/postcss-exponential-functions": "^3.0.8",
 		"@csstools/postcss-fit-tolerance-property": "^1.0.1",
 		"@csstools/postcss-font-format-keywords": "^5.0.0",

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

@@ -364,6 +364,11 @@
 		"id": "property-rule-optional-descriptors",
 		"importName": "postcssPropertyRuleOptionalDescriptors"
 	},
+	{
+		"packageName": "@csstools/postcss-custom-functions",
+		"id": "custom-functions",
+		"importName": "postcssCustomFunctions"
+	},
 	{
 		"packageName": "@csstools/postcss-progressive-custom-properties",
 		"id": "progressive-custom-properties",

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

@@ -1,6 +1,7 @@
 // ids ordered by required execution, then alphabetically
 export default [
 	'mixins',
+	'custom-functions',
 
 	'custom-media-queries',
 	'environment-variables', // run environment-variables here to access transpiled custom media params and properties
@@ -81,6 +82,6 @@ export default [
 
 	'cascade-layers',
 
-	'progressive-custom-properties',
 	'gamut-mapping',
+	'progressive-custom-properties',
 ];

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

@@ -14,6 +14,7 @@ import postcssColorMixVariadicFunctionArguments from '@csstools/postcss-color-mi
 import postcssContainerRulePreludeList from '@csstools/postcss-container-rule-prelude-list';
 import postcssContentAltText from '@csstools/postcss-content-alt-text';
 import postcssContrastColorFunction from '@csstools/postcss-contrast-color-function';
+import postcssCustomFunctions from '@csstools/postcss-custom-functions';
 import postcssCustomMedia from 'postcss-custom-media';
 import postcssCustomProperties from 'postcss-custom-properties';
 import postcssCustomSelectors from 'postcss-custom-selectors';
@@ -92,6 +93,7 @@ export const pluginsById = new Map(
 		['container-rule-prelude-list', postcssContainerRulePreludeList],
 		['content-alt-text', postcssContentAltText],
 		['contrast-color-function', postcssContrastColorFunction],
+		['custom-functions', postcssCustomFunctions],
 		['custom-media-queries', postcssCustomMedia],
 		['custom-properties', postcssCustomProperties],
 		['custom-selectors', postcssCustomSelectors],

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

@@ -364,6 +364,11 @@ export default [
 		'id': 'property-rule-optional-descriptors',
 		'importName': 'postcssPropertyRuleOptionalDescriptors',
 	},
+	{
+		'packageName': '@csstools/postcss-custom-functions',
+		'id': 'custom-functions',
+		'importName': 'postcssCustomFunctions',
+	},
 	{
 		'packageName': '@csstools/postcss-progressive-custom-properties',
 		'id': 'progressive-custom-properties',

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

@@ -14,6 +14,7 @@ import type { pluginOptions as postcssColorMixVariadicFunctionArgumentsOptions }
 import type { pluginOptions as postcssContainerRulePreludeListOptions } from '@csstools/postcss-container-rule-prelude-list';
 import type { pluginOptions as postcssContentAltTextOptions } from '@csstools/postcss-content-alt-text';
 import type { pluginOptions as postcssContrastColorFunctionOptions } from '@csstools/postcss-contrast-color-function';
+import type { pluginOptions as postcssCustomFunctionsOptions } from '@csstools/postcss-custom-functions';
 import type { pluginOptions as postcssCustomMediaOptions } from 'postcss-custom-media';
 import type { pluginOptions as postcssCustomPropertiesOptions } from 'postcss-custom-properties';
 import type { pluginOptions as postcssCustomSelectorsOptions } from 'postcss-custom-selectors';
@@ -107,6 +108,8 @@ export type pluginsOptions = {
 	'content-alt-text'?: subPluginOptions<postcssContentAltTextOptions>
 	/** plugin options for "@csstools/postcss-contrast-color-function" */
 	'contrast-color-function'?: subPluginOptions<postcssContrastColorFunctionOptions>
+	/** plugin options for "@csstools/postcss-custom-functions" */
+	'custom-functions'?: subPluginOptions<postcssCustomFunctionsOptions>
 	/** plugin options for "postcss-custom-media" */
 	'custom-media-queries'?: subPluginOptions<postcssCustomMediaOptions>
 	/** plugin options for "postcss-custom-properties" */

plugin-packs/postcss-preset-env/test/_tape.mjs

@@ -450,4 +450,27 @@ postcssTape(plugin)({
 			}),
 		],
 	},
+	'postcss-functions': {
+		message: 'does not clone `@function` rules when generating conditional rules',
+		options: {
+			stage: 0,
+			browsers: '> 0%',
+		},
+	},
+	'postcss-functions:preserve-true': {
+		message: 'does not clone `@function` rules when generating conditional rules with { preserve: true }',
+		options: {
+			preserve: true,
+			stage: 0,
+			browsers: '> 0%',
+		},
+	},
+	'postcss-functions:preserve-false': {
+		message: 'does not clone `@function` rules when generating conditional rules with { preserve: false }',
+		options: {
+			preserve: false,
+			stage: 0,
+			browsers: '> 0%',
+		},
+	},
 });

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

@@ -433,6 +433,8 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .oklch {
 
 	color-7: color(display-p3 0.19244 0.58461 0.51559);
@@ -442,6 +444,7 @@
 	color-11: color(display-p3 0.19244 0.58461 0.51559);
 }
 }
+}
 
 .alpha {
 	color-1: rgba(188, 101, 59, 0.3);
@@ -574,42 +577,50 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .color-mix {
 	color-4: color(display-p3 0.44 0 0.70096 / 0.65);
 	color-5: color(display-p3 0.54692 0 0.47541 / 0.65);
 }
 }
+}
 
 .gradients-interpolation-method {
 	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
 
 	background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%);
 }
 
-@media (color-gamut: rec2020) {
+@supports (color: color(display-p3 0 0 0%)) {
 .gradients-interpolation-method {
-
-	background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.30036), color(display-p3 1.15167 0.57912 -0.39461), color(display-p3 1.06645 0.68611 -0.42959), color(display-p3 0.94738 0.78766 -0.42632), color(display-p3 0.79233 0.87807 -0.37074), color(display-p3 0.59026 0.95319 -0.14671), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.53921 1.05733 0.93686), color(display-p3 -0.57773 1.04644 1.15396) 100%);
-
-	background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%);
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
 }
 }
 
-@supports (color: color(display-p3 0 0 0%)) {
+@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(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 182, 255), rgb(173, 195, 255), rgb(159, 205, 255), rgb(140, 215, 255), rgb(100, 228, 255), rgb(94, 237, 237) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
+}
 }
 
 @media (color-gamut: rec2020) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+
+	background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.30036), color(display-p3 1.15167 0.57912 -0.39461), color(display-p3 1.06645 0.68611 -0.42959), color(display-p3 0.94738 0.78766 -0.42632), color(display-p3 0.79233 0.87807 -0.37074), color(display-p3 0.59026 0.95319 -0.14671), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.53921 1.05733 0.93686), color(display-p3 -0.57773 1.04644 1.15396) 100%);
 }
 }
 }
 
-@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+@media (color-gamut: rec2020) {
+
+@supports (color: oklab(0% 0 0%)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
+
+	background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%);
+}
 }
 }
 
@@ -626,11 +637,14 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .test-css-color-5-interop {
 	color-8: color(display-p3 0.4939 0.10676 0);
 	color-9: color(display-p3 0.47553 0.14324 0);
 }
 }
+}
 
 .test-property-with-var {
 	--opacity: 1;
@@ -676,10 +690,13 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .schemed-colors {
 	color: light-dark(color(display-p3 0.4939 0.10676 0), magenta);
 }
 }
+}
 
 .schemed-prop {
 	--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue;
@@ -736,11 +753,14 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .random {
 
 	border-color: color(display-p3 0.08293 0.41734 0);
 }
 }
+}
 
 .contrast-color {
 	color: rgb(255, 255, 255);

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

@@ -433,6 +433,8 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .oklch {
 
 	color-7: color(display-p3 0.19244 0.58461 0.51559);
@@ -442,6 +444,7 @@
 	color-11: color(display-p3 0.19244 0.58461 0.51559);
 }
 }
+}
 
 .alpha {
 	color-1: rgba(188, 101, 59, 0.3);
@@ -574,42 +577,50 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .color-mix {
 	color-4: color(display-p3 0.44 0 0.70096 / 0.65);
 	color-5: color(display-p3 0.54692 0 0.47541 / 0.65);
 }
 }
+}
 
 .gradients-interpolation-method {
 	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%);
 
 	background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%);
 }
 
-@media (color-gamut: rec2020) {
+@supports (color: color(display-p3 0 0 0%)) {
 .gradients-interpolation-method {
-
-	background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.30036), color(display-p3 1.15167 0.57912 -0.39461), color(display-p3 1.06645 0.68611 -0.42959), color(display-p3 0.94738 0.78766 -0.42632), color(display-p3 0.79233 0.87807 -0.37074), color(display-p3 0.59026 0.95319 -0.14671), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.53921 1.05733 0.93686), color(display-p3 -0.57773 1.04644 1.15396) 100%);
-
-	background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%);
+	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
 }
 }
 
-@supports (color: color(display-p3 0 0 0%)) {
+@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(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 182, 255), rgb(173, 195, 255), rgb(159, 205, 255), rgb(140, 215, 255), rgb(100, 228, 255), rgb(94, 237, 237) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
+}
 }
 
 @media (color-gamut: rec2020) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%);
+
+	background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.30036), color(display-p3 1.15167 0.57912 -0.39461), color(display-p3 1.06645 0.68611 -0.42959), color(display-p3 0.94738 0.78766 -0.42632), color(display-p3 0.79233 0.87807 -0.37074), color(display-p3 0.59026 0.95319 -0.14671), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.53921 1.05733 0.93686), color(display-p3 -0.57773 1.04644 1.15396) 100%);
 }
 }
 }
 
-@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
+@media (color-gamut: rec2020) {
+
+@supports (color: oklab(0% 0 0%)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
+
+	background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%);
+}
 }
 }
 
@@ -626,11 +637,14 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .test-css-color-5-interop {
 	color-8: color(display-p3 0.4939 0.10676 0);
 	color-9: color(display-p3 0.47553 0.14324 0);
 }
 }
+}
 
 .test-property-with-var {
 	--opacity: 1;
@@ -681,10 +695,13 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .schemed-colors {
 	color: light-dark(color(display-p3 0.4939 0.10676 0), magenta);
 }
 }
+}
 
 .schemed-prop {
 	--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue;
@@ -741,11 +758,14 @@
 }
 
 @media (color-gamut: p3) {
+
+@supports (color: color(display-p3 0 0 0%)) {
 .random {
 
 	border-color: color(display-p3 0.08293 0.41734 0);
 }
 }
+}
 
 .contrast-color {
 	color: rgb(255, 255, 255);