postcss-lab-function : gamut mapping and display-p3

package.json

@@ -10,6 +10,7 @@
   },
   "workspaces": [
     "packages/*",
+    "plugins/postcss-progressive-custom-properties",
     "plugins/*",
     "plugin-packs/*",
     "cli/*",

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

@@ -1,5 +1,12 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased (patch)
+
+- Updated `postcss-lab-function` to `4.1.0`.
+- Updated `@csstools/postcss-progressive-custom-properties` to `1.1.0`.
+
+`postcss-lab-function` now supports [wide gamut colors](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function#displayp3) and [out of gamut color mapping](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function#displayp3).
+
 ### 7.3.1 (February 3, 2022) 
 
 - Ensured that `debug` option uses a single instance per run, this allows for `debug` to work on parallel runs within CI environments.

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

@@ -39,6 +39,7 @@
     "@csstools/postcss-hwb-function": "^1.0.0",
     "@csstools/postcss-is-pseudo-class": "^2.0.0",
     "@csstools/postcss-normalize-display-values": "^1.0.0",
+    "@csstools/postcss-progressive-custom-properties": "^1.1.0",
     "autoprefixer": "^10.4.2",
     "browserslist": "^4.19.1",
     "css-blank-pseudo": "^3.0.2",

plugin-packs/postcss-preset-env/src/index.js

@@ -1,11 +1,13 @@
 import autoprefixer from 'autoprefixer';
 import cssdb from 'cssdb';
-import writeToExports from './side-effects/write-to-exports.mjs';
-import { pluginIdHelp } from './plugins/plugin-id-help.mjs';
-import { newLogger } from './log/helper.mjs';
 import logFeaturesList from './log/features-list.mjs';
-import { listFeatures } from './lib/list-features.mjs';
+import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
+import writeToExports from './side-effects/write-to-exports.mjs';
 import { initializeSharedOptions } from './lib/shared-options.mjs';
+import { listFeatures } from './lib/list-features.mjs';
+import { newLogger } from './log/helper.mjs';
+import { pluginIdHelp } from './plugins/plugin-id-help.mjs';
+
 
 const plugin = (opts) => {
 	const logger = newLogger();
@@ -27,6 +29,10 @@ const plugin = (opts) => {
 		);
 	}
 
+	plugins.push(
+		postcssProgressiveCustomProperties(),
+	);
+
 	logFeaturesList(features, options, logger);
 
 	const internalPlugin = () => {

plugin-packs/postcss-preset-env/src/lib/format-feature.mjs

@@ -51,6 +51,9 @@ export function formatStagedFeature(cssdbList, browsers, features, feature, shar
 		}
 	}
 
+	// postcss-preset-env : option overrides
+	options.enableProgressiveCustomProperties = false;
+
 	if (feature.plugin.postcss && typeof feature.plugin === 'function') {
 		plugin = feature.plugin(options);
 	} else if (feature.plugin && feature.plugin.default && typeof feature.plugin.default === 'function' && feature.plugin.default.postcss) {

plugin-packs/postcss-preset-env/src/test/lib/format-staged-feature.mjs

@@ -26,7 +26,12 @@ assert.deepStrictEqual(
 		],
 		vendors_implementations: 1,
 		plugin: true,
-		pluginOptions: { subFeatures: { areaHrefNeedsFixing: true } },
+		pluginOptions: {
+			subFeatures: {
+				areaHrefNeedsFixing: true,
+			},
+			enableProgressiveCustomProperties: false,
+		},
 		id: 'any-link-pseudo-class',
 	},
 );
@@ -55,7 +60,12 @@ assert.deepStrictEqual(
 		],
 		vendors_implementations: 1,
 		plugin: true,
-		pluginOptions: { subFeatures: { areaHrefNeedsFixing: true } },
+		pluginOptions: {
+			subFeatures: {
+				areaHrefNeedsFixing: true,
+			},
+			enableProgressiveCustomProperties: false,
+		},
 		id: 'any-link-pseudo-class',
 	},
 );
@@ -86,7 +96,13 @@ assert.deepStrictEqual(
 		],
 		vendors_implementations: 1,
 		plugin: true,
-		pluginOptions: { subFeatures: { areaHrefNeedsFixing: true }, shared: true },
+		pluginOptions: {
+			subFeatures: {
+				areaHrefNeedsFixing: true,
+			},
+			enableProgressiveCustomProperties: false,
+			shared: true,
+		},
 		id: 'any-link-pseudo-class',
 	},
 );
@@ -115,7 +131,13 @@ assert.deepStrictEqual(
 		],
 		vendors_implementations: 1,
 		plugin: true,
-		pluginOptions: { subFeatures: { areaHrefNeedsFixing: true }, shared: true },
+		pluginOptions: {
+			subFeatures: {
+				areaHrefNeedsFixing: true,
+			},
+			enableProgressiveCustomProperties: false,
+			shared: true,
+		},
 		id: 'any-link-pseudo-class',
 	},
 );

plugin-packs/postcss-preset-env/src/test/lib/list-features/client-side.mjs

@@ -20,7 +20,12 @@ assert.deepStrictEqual(
 				'samsung < 1.0', 'and_qq >= 1',
 				'baidu >= 1',    'kaios >= 1',
 			],
-			pluginOptions: { subFeatures: { areaHrefNeedsFixing: true } },
+			pluginOptions: {
+				subFeatures: {
+					areaHrefNeedsFixing: true,
+				},
+				enableProgressiveCustomProperties: false,
+			},
 			vendors_implementations: 3,
 			id: 'any-link-pseudo-class',
 		},
@@ -52,8 +57,11 @@ assert.deepStrictEqual(
 				'samsung < 1.0', 'and_qq >= 1',
 				'baidu >= 1',    'kaios >= 1',
 			],
-			pluginOptions: { subFeatures: { areaHrefNeedsFixing: true } },
 			vendors_implementations: 3,
+			pluginOptions: {
+				subFeatures: { areaHrefNeedsFixing: true },
+				enableProgressiveCustomProperties: false,
+			},
 			id: 'any-link-pseudo-class',
 		},
 		{
@@ -67,8 +75,8 @@ assert.deepStrictEqual(
 				'samsung >= 1', 'and_qq >= 1',
 				'baidu >= 1',   'kaios >= 1',
 			],
-			pluginOptions: {},
 			vendors_implementations: 0,
+			pluginOptions: { enableProgressiveCustomProperties: false },
 			id: 'blank-pseudo-class',
 		},
 	],

plugin-packs/postcss-preset-env/src/test/lib/list-features/no-options.mjs

@@ -21,7 +21,12 @@ assert.deepStrictEqual(
 				'baidu >= 1',    'kaios >= 1',
 			],
 			vendors_implementations: 3,
-			pluginOptions: { subFeatures: { areaHrefNeedsFixing: true } },
+			pluginOptions: {
+				subFeatures: {
+					areaHrefNeedsFixing: true,
+				},
+				enableProgressiveCustomProperties: false,
+			},
 			id: 'any-link-pseudo-class',
 		},
 	],

plugin-packs/postcss-preset-env/src/test/lib/list-features/preserve.mjs

@@ -20,8 +20,12 @@ assert.deepStrictEqual(
 				'samsung < 1.0', 'and_qq >= 1',
 				'baidu >= 1',    'kaios >= 1',
 			],
-			pluginOptions: { preserve: true, subFeatures: { areaHrefNeedsFixing: true } },
 			vendors_implementations: 3,
+			pluginOptions: {
+				subFeatures: { areaHrefNeedsFixing: true },
+				preserve: true,
+				enableProgressiveCustomProperties: false,
+			},
 			id: 'any-link-pseudo-class',
 		},
 		{
@@ -35,8 +39,8 @@ assert.deepStrictEqual(
 				'samsung >= 1', 'and_qq >= 1',
 				'baidu >= 1',   'kaios >= 1',
 			],
-			pluginOptions: { preserve: true },
 			vendors_implementations: 0,
+			pluginOptions: { preserve: true, enableProgressiveCustomProperties: false },
 			id: 'blank-pseudo-class',
 		},
 	],
@@ -67,8 +71,12 @@ assert.deepStrictEqual(
 				'samsung < 1.0', 'and_qq >= 1',
 				'baidu >= 1',    'kaios >= 1',
 			],
-			pluginOptions: { preserve: false, subFeatures: { areaHrefNeedsFixing: true } },
 			vendors_implementations: 3,
+			pluginOptions: {
+				subFeatures: { areaHrefNeedsFixing: true },
+				preserve: false,
+				enableProgressiveCustomProperties: false,
+			},
 			id: 'any-link-pseudo-class',
 		},
 		{
@@ -82,8 +90,8 @@ assert.deepStrictEqual(
 				'samsung >= 1', 'and_qq >= 1',
 				'baidu >= 1',   'kaios >= 1',
 			],
-			pluginOptions: { preserve: false },
 			vendors_implementations: 0,
+			pluginOptions: { preserve: false, enableProgressiveCustomProperties: false },
 			id: 'blank-pseudo-class',
 		},
 	],

plugin-packs/postcss-preset-env/src/test/lib/list-features/stage-0.mjs

@@ -20,8 +20,11 @@ assert.deepStrictEqual(
 				'samsung < 1.0', 'and_qq >= 1',
 				'baidu >= 1',    'kaios >= 1',
 			],
-			pluginOptions: { subFeatures: { areaHrefNeedsFixing: true } },
 			vendors_implementations: 3,
+			pluginOptions: {
+				subFeatures: { areaHrefNeedsFixing: true },
+				enableProgressiveCustomProperties: false,
+			},
 			id: 'any-link-pseudo-class',
 		},
 		{
@@ -35,8 +38,8 @@ assert.deepStrictEqual(
 				'samsung >= 1', 'and_qq >= 1',
 				'baidu >= 1',   'kaios >= 1',
 			],
-			pluginOptions: {},
 			vendors_implementations: 0,
+			pluginOptions: { enableProgressiveCustomProperties: false },
 			id: 'blank-pseudo-class',
 		},
 	],

plugin-packs/postcss-preset-env/src/test/lib/list-features/vendor-implementations.mjs

@@ -20,8 +20,11 @@ assert.deepStrictEqual(
 				'samsung < 1.0', 'and_qq >= 1',
 				'baidu >= 1',    'kaios >= 1',
 			],
-			pluginOptions: { subFeatures: { areaHrefNeedsFixing: true } },
 			vendors_implementations: 3,
+			pluginOptions: {
+				subFeatures: { areaHrefNeedsFixing: true },
+				enableProgressiveCustomProperties: false,
+			},
 			id: 'any-link-pseudo-class',
 		},
 	],

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

@@ -2,6 +2,16 @@
 	--order: 1;
 }
 
+.test-custom-property-fallbacks {
+	--firebrick: rgb(179, 35, 35);
+}
+
+@supports (color: color(display-p3 0 0 0)) {
+.test-custom-property-fallbacks {
+	--firebrick: color(display-p3 0.64331 0.19245 0.16771);
+}
+}
+
 .test-custom-properties {
 	order: 1;
 	order: var(--order);
@@ -116,7 +126,9 @@
 
 .test-lab-function {
 	background-color: rgb(179, 35, 35);
+	background-color: color(display-p3 0.64331 0.19245 0.16771);
 	color: rgba(179, 34, 35, 0.5);
+	color: color(display-p3 0.64368 0.19188 0.16791 / 50%);
 	order: 17;
 }