csstools · romainmenke · Oct 9, 2023 · Jul 31, 2023 · Aug 1, 2023 · Oct 8, 2023
diff --git a/.github/ISSUE_TEMPLATE/css-issue.yml b/.github/ISSUE_TEMPLATE/css-issue.yml
@@ -82,6 +82,7 @@ body:
         - PostCSS Focus Visible
         - PostCSS Focus Within
         - PostCSS Font Variant
+        - PostCSS Gamut Mapping
         - PostCSS Gap Properties
         - PostCSS Global Data
         - PostCSS Gradients Interpolation Method

diff --git a/.github/ISSUE_TEMPLATE/plugin-issue.yml b/.github/ISSUE_TEMPLATE/plugin-issue.yml
@@ -84,6 +84,7 @@ body:
         - PostCSS Focus Visible
         - PostCSS Focus Within
         - PostCSS Font Variant
+        - PostCSS Gamut Mapping
         - PostCSS Gap Properties
         - PostCSS Global Data
         - PostCSS Gradients Interpolation Method

diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -129,6 +129,10 @@
   - plugins/postcss-font-format-keywords/**
   - experimental/postcss-font-format-keywords/**
 
+"plugins/postcss-gamut-mapping":
+  - plugins/postcss-gamut-mapping/**
+  - experimental/postcss-gamut-mapping/**
+
 "plugins/postcss-gap-properties":
   - plugins/postcss-gap-properties/**
   - experimental/postcss-gap-properties/**

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/css-color-parser/CHANGELOG.md b/packages/css-color-parser/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to CSS Color Parser
 
+### Unreleased (minor)
+
+- Add utility to determine if a color is in the Display P3 gamut.
+
 ### 1.3.3
 
 _October 2, 2023_

diff --git a/packages/css-color-parser/dist/color-data.d.ts b/packages/css-color-parser/dist/color-data.d.ts
@@ -31,3 +31,4 @@ export declare function convertPowerlessComponentsToZeroValuesForDisplay(a: Colo
 export declare function normalizeRelativeColorDataChannels(x: ColorData): Map<string, TokenNumber>;
 export declare function noneToZeroInRelativeColorDataChannels(x: Map<string, TokenNumber>): Map<string, TokenNumber>;
 export declare function colorDataFitsRGB_Gamut(x: ColorData): boolean;
+export declare function colorDataFitsDisplayP3_Gamut(x: ColorData): boolean;
diff --git a/packages/css-color-parser/dist/index.cjs b/packages/css-color-parser/dist/index.cjs
diff --git a/packages/css-color-parser/dist/index.d.ts b/packages/css-color-parser/dist/index.d.ts
@@ -3,7 +3,7 @@ import type { ComponentValue } from '@csstools/css-parser-algorithms';
 export type { ColorData } from './color-data';
 export { ColorNotation } from './color-notation';
 export { SyntaxFlag } from './color-data';
-export { colorDataTo, colorDataFitsRGB_Gamut } from './color-data';
+export { colorDataTo, colorDataFitsRGB_Gamut, colorDataFitsDisplayP3_Gamut } from './color-data';
 export { serializeP3 } from './serialize/p3';
 export { serializeRGB } from './serialize/rgb';
 export { serializeOKLCH } from './serialize/oklch';

diff --git a/packages/css-color-parser/dist/index.mjs b/packages/css-color-parser/dist/index.mjs
diff --git a/packages/css-color-parser/src/color-data.ts b/packages/css-color-parser/src/color-data.ts
@@ -513,7 +513,12 @@ function reducePrecision(x: number, precision = 7): number {
 }
 
 export function colorDataFitsRGB_Gamut(x: ColorData): boolean {
-	const copy = JSON.parse(JSON.stringify(x)) as ColorData;
+	const copy: ColorData = {
+		...x,
+		channels: [
+			...x.channels,
+		],
+	};
 
 	copy.channels = convertPowerlessComponentsToZeroValuesForDisplay(copy.channels, copy.colorNotation);
 	const srgb = colorDataTo(copy, ColorNotation.RGB);
@@ -523,3 +528,20 @@ export function colorDataFitsRGB_Gamut(x: ColorData): boolean {
 
 	return false;
 }
+
+export function colorDataFitsDisplayP3_Gamut(x: ColorData): boolean {
+	const copy: ColorData = {
+		...x,
+		channels: [
+			...x.channels,
+		],
+	};
+
+	copy.channels = convertPowerlessComponentsToZeroValuesForDisplay(copy.channels, copy.colorNotation);
+	const displayP3 = colorDataTo(copy, ColorNotation.Display_P3);
+	if (!displayP3.channels.find((y) => y < -0.00001 || y > 1.00001)) {
+		return true;
+	}
+
+	return false;
+}
diff --git a/packages/css-color-parser/src/index.ts b/packages/css-color-parser/src/index.ts
@@ -19,7 +19,7 @@ import { toLowerCaseAZ } from './util/to-lower-case-a-z';
 export type { ColorData } from './color-data';
 export { ColorNotation } from './color-notation';
 export { SyntaxFlag } from './color-data';
-export { colorDataTo, colorDataFitsRGB_Gamut } from './color-data';
+export { colorDataTo, colorDataFitsRGB_Gamut, colorDataFitsDisplayP3_Gamut } from './color-data';
 export { serializeP3 } from './serialize/p3';
 export { serializeRGB } from './serialize/rgb';
 export { serializeOKLCH } from './serialize/oklch';

diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md
@@ -1,8 +1,9 @@
 # Changes to PostCSS Preset Env
 
-### Unreleased (patch)
+### Unreleased (minor)
 
-- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`7.7.3`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#773-october-05-2023) (patch)
+- Added `@csstools/postcss-gamut-mapping` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping#readme) for usage details.
+- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`7.8.0`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#780-october-08-2023) (patch)
 - Updated [`@csstools/postcss-logical-viewport-units`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units) to [`2.0.3`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units/CHANGELOG.md#203) (patch)
 - Updated [`@csstools/postcss-exponential-functions`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions) to [`1.0.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions/CHANGELOG.md#101) (patch)
 - Updated [`@csstools/postcss-media-minmax`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax) to [`1.1.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax/CHANGELOG.md#110) (minor)

diff --git a/plugin-packs/postcss-preset-env/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md
@@ -26,6 +26,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | `focus-within-pseudo-class` | `:focus-within` Focus Container Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-within-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme) |
 | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) |
 | `font-variant-property` | `font-variant` Property | [example](https://preset-env.cssdb.org/features/#font-variant-property) | [docs](https://github.com/postcss/postcss-font-variant#readme) |
+| `gamut-mapping` |   |   |   |
 | `gap-properties` | Gap Properties | [example](https://preset-env.cssdb.org/features/#gap-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme) |
 | `gradients-interpolation-method` | Gradients Interpolation Method | [example](https://preset-env.cssdb.org/features/#gradients-interpolation-method) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme) |
 | `has-pseudo-class` | `:has()` Relational Pseudo-Class | [example](https://preset-env.cssdb.org/features/#has-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo#readme) |

diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs
diff --git a/plugin-packs/postcss-preset-env/dist/index.mjs b/plugin-packs/postcss-preset-env/dist/index.mjs
diff --git a/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts b/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts
@@ -20,6 +20,7 @@ import type { pluginOptions as postcssFocusVisible } from 'postcss-focus-visible
 import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within';
 import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords';
 import type { pluginOptions as postcssFontVariant } from '../types/postcss-font-variant/plugin-options';
+import type { pluginOptions as postcssGamutMapping } from '@csstools/postcss-gamut-mapping';
 import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties';
 import type { pluginOptions as postcssGradientsInterpolationMethod } from '@csstools/postcss-gradients-interpolation-method';
 import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo';
@@ -96,6 +97,8 @@ export type pluginsOptions = {
     'font-format-keywords'?: postcssFontFormatKeywords | boolean;
     /** plugin options for "postcss-font-variant" */
     'font-variant-property'?: postcssFontVariant | boolean;
+    /** plugin options for "@csstools/postcss-gamut-mapping" */
+    'gamut-mapping'?: postcssGamutMapping | boolean;
     /** plugin options for "postcss-gap-properties" */
     'gap-properties'?: postcssGapProperties | boolean;
     /** plugin options for "@csstools/postcss-gradients-interpolation-method" */

diff --git a/plugin-packs/postcss-preset-env/docs/generate.mjs b/plugin-packs/postcss-preset-env/docs/generate.mjs
@@ -1,17 +1,20 @@
-import { getFeaturesIds } from '../src/plugins/plugins-map.mjs';
 import cssdb from 'cssdb';
-import { promises as fsp } from 'fs';
+import fs from 'fs/promises';
 
 let featuresTable = '';
 
 featuresTable = featuresTable + '| ID | Feature | example | docs |\n';
 featuresTable = featuresTable + '|:--- |:--- |:--- |:--- |\n';
 
-const ids = getFeaturesIds();
-ids.sort();
+const pluginsData = await fs.readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
+pluginsData.sort((a, b) => a.id.localeCompare(b.id));
 
-for (const id of ids) {
-	const cssdbFeature = cssdb.find(feature => feature.id === id);
+for (const pluginData of pluginsData) {
+	if (pluginData.omitDocs) {
+		continue;
+	}
+
+	const cssdbFeature = cssdb.find(feature => feature.id === pluginData.id);
 	const polyfills = cssdbFeature?.polyfills || [];
 	const cssdbPlugins = polyfills?.filter(polyfill => polyfill.type === 'PostCSS Plugin');
 
@@ -28,19 +31,19 @@ for (const id of ids) {
 	});
 
 	if (cssdbFeature && cssdbPlugins.length > 0) {
-		featuresTable = featuresTable + `| \`${id}\` `;
+		featuresTable = featuresTable + `| \`${pluginData.id}\` `;
 		featuresTable = featuresTable + `| ${cssdbFeature.title} `;
-		featuresTable = featuresTable + `| [example](https://preset-env.cssdb.org/features/#${id}) `;
+		featuresTable = featuresTable + `| [example](https://preset-env.cssdb.org/features/#${pluginData.id}) `;
 		featuresTable = featuresTable + `| [docs](${cssdbPlugins[0].link}#readme) |\n`;
 	} else {
-		featuresTable = featuresTable + `| \`${id}\` `;
+		featuresTable = featuresTable + `| \`${pluginData.id}\` `;
 		featuresTable = featuresTable + '|   ';
 		featuresTable = featuresTable + '|   ';
 		featuresTable = featuresTable + '|   |\n';
 	}
 }
 
-let featuresDoc = (await fsp.readFile('./docs/FEATURES.md', 'utf8')).toString();
+let featuresDoc = (await fs.readFile('./docs/FEATURES.md', 'utf8')).toString();
 featuresDoc = featuresDoc.replaceAll('<featuresTable>', featuresTable);
 
-fsp.writeFile('FEATURES.md', featuresDoc, 'utf8');
+fs.writeFile('FEATURES.md', featuresDoc, 'utf8');
diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json
@@ -54,6 +54,7 @@
 		"@csstools/postcss-color-mix-function": "^2.0.6",
 		"@csstools/postcss-exponential-functions": "^1.0.1",
 		"@csstools/postcss-font-format-keywords": "^3.0.0",
+		"@csstools/postcss-gamut-mapping": "^0.0.0",
 		"@csstools/postcss-gradients-interpolation-method": "^4.0.6",
 		"@csstools/postcss-hwb-function": "^3.0.5",
 		"@csstools/postcss-ic-unit": "^3.0.1",

diff --git a/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs b/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs
@@ -1,8 +1,8 @@
-import { readFile, writeFile } from 'fs/promises';
+import fs from 'fs/promises';
 import { existsSync } from 'fs';
 import path from 'path';
 
-const pluginsData = await readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
+const pluginsData = await fs.readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
 
 const esmPlugins = `export default ${JSON.stringify(pluginsData, null, 2)}\n`;
 
@@ -31,7 +31,7 @@ export const pluginsById = new Map(
 }
 
 function generatePluginOptions(data) {
-	const plugins = data.slice(0).sort((a, b) => a.id.localeCompare(b.id));
+	const plugins = data.slice().filter((x) => !x.omitTypedOptions).sort((a, b) => a.id.localeCompare(b.id));
 	let result = '';
 
 	for (let i = 0; i < plugins.length; i++) {
@@ -58,7 +58,7 @@ function generatePluginOptions(data) {
 }
 
 await Promise.all([
-	writeFile('./src/plugins/plugins-data.mjs', esmPlugins),
-	writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)),
-	writeFile('./src/plugins/plugins-options.ts', generatePluginOptions(pluginsData)),
+	fs.writeFile('./src/plugins/plugins-data.mjs', esmPlugins),
+	fs.writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)),
+	fs.writeFile('./src/plugins/plugins-options.ts', generatePluginOptions(pluginsData)),
 ]);
diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json
@@ -99,6 +99,11 @@
 		"id": "font-variant-property",
 		"importName": "postcssFontVariant"
 	},
+	{
+		"packageName": "@csstools/postcss-gamut-mapping",
+		"id": "gamut-mapping",
+		"importName": "postcssGamutMapping"
+	},
 	{
 		"packageName": "postcss-gap-properties",
 		"id": "gap-properties",
@@ -264,5 +269,12 @@
 		"packageName": "@csstools/postcss-text-decoration-shorthand",
 		"id": "text-decoration-shorthand",
 		"importName": "postcssTextDecorationShorthand"
+	},
+	{
+		"packageName": "@csstools/postcss-progressive-custom-properties",
+		"id": "progressive-custom-properties",
+		"importName": "postcssProgressiveCustomProperties",
+		"omitTypedOptions": true,
+		"omitDocs": true
 	}
 ]
diff --git a/plugin-packs/postcss-preset-env/src/index.ts b/plugin-packs/postcss-preset-env/src/index.ts
@@ -1,7 +1,6 @@
 import autoprefixer from 'autoprefixer';
 import cssdb from 'cssdb';
 import logFeaturesList from './log/features-list.mjs';
-import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
 import { initializeSharedOptions } from './lib/shared-options.mjs';
 import { listFeatures } from './lib/list-features.mjs';
 import { newLogger } from './log/helper.mjs';
@@ -29,10 +28,6 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 		);
 	}
 
-	plugins.push(
-		postcssProgressiveCustomProperties(),
-	);
-
 	logFeaturesList(features, options, logger);
 
 	const internalPlugin = () => {

diff --git a/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs b/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs
@@ -52,7 +52,9 @@ export function formatStagedFeature(cssdbList, supportedBrowsers, features, feat
 	}
 
 	// postcss-preset-env : option overrides
-	pluginOption.enableProgressiveCustomProperties = false;
+	if (feature.id !== 'progressive-custom-properties') {
+		pluginOption.enableProgressiveCustomProperties = false;
+	}
 
 	// https://github.com/MattDiMu/postcss-replace-overflow-wrap/blob/ec9914e0b9473a75a5d1fe32ea4311555eb81b71/index.js#L10
 	if (feature.id === 'overflow-wrap-property' && 'preserve' in pluginOption) {

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
@@ -60,4 +60,7 @@ export default [
 	'custom-properties',
 
 	'cascade-layers',
+
+	'progressive-custom-properties',
+	'gamut-mapping',
 ];