Skip to content

Commit 6b0dd12

Browse files
romainmenkeromainmenke
authored
postcss-gamut-mapping (#1144)
1 parent c8459c8 commit 6b0dd12

File tree

125 files changed

+2611
-496
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

125 files changed

+2611
-496
lines changed

‎.github/ISSUE_TEMPLATE/css-issue.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ body:
8282
- PostCSS Focus Visible
8383
- PostCSS Focus Within
8484
- PostCSS Font Variant
85+
- PostCSS Gamut Mapping
8586
- PostCSS Gap Properties
8687
- PostCSS Global Data
8788
- PostCSS Gradients Interpolation Method

‎.github/ISSUE_TEMPLATE/plugin-issue.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ body:
8484
- PostCSS Focus Visible
8585
- PostCSS Focus Within
8686
- PostCSS Font Variant
87+
- PostCSS Gamut Mapping
8788
- PostCSS Gap Properties
8889
- PostCSS Global Data
8990
- PostCSS Gradients Interpolation Method

‎.github/labeler.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,10 @@
129129
- plugins/postcss-font-format-keywords/**
130130
- experimental/postcss-font-format-keywords/**
131131

132+
"plugins/postcss-gamut-mapping":
133+
- plugins/postcss-gamut-mapping/**
134+
- experimental/postcss-gamut-mapping/**
135+
132136
"plugins/postcss-gap-properties":
133137
- plugins/postcss-gap-properties/**
134138
- experimental/postcss-gap-properties/**

‎package-lock.json

Lines changed: 59 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/css-color-parser/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to CSS Color Parser
22

3+
### Unreleased (minor)
4+
5+
- Add utility to determine if a color is in the Display P3 gamut.
6+
37
### 1.3.3
48

59
_October 2, 2023_

‎packages/css-color-parser/dist/color-data.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@ export declare function convertPowerlessComponentsToZeroValuesForDisplay(a: Colo
3131
export declare function normalizeRelativeColorDataChannels(x: ColorData): Map<string, TokenNumber>;
3232
export declare function noneToZeroInRelativeColorDataChannels(x: Map<string, TokenNumber>): Map<string, TokenNumber>;
3333
export declare function colorDataFitsRGB_Gamut(x: ColorData): boolean;
34+
export declare function colorDataFitsDisplayP3_Gamut(x: ColorData): boolean;

‎packages/css-color-parser/dist/index.cjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/css-color-parser/dist/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { ComponentValue } from '@csstools/css-parser-algorithms';
33
export type { ColorData } from './color-data';
44
export { ColorNotation } from './color-notation';
55
export { SyntaxFlag } from './color-data';
6-
export { colorDataTo, colorDataFitsRGB_Gamut } from './color-data';
6+
export { colorDataTo, colorDataFitsRGB_Gamut, colorDataFitsDisplayP3_Gamut } from './color-data';
77
export { serializeP3 } from './serialize/p3';
88
export { serializeRGB } from './serialize/rgb';
99
export { serializeOKLCH } from './serialize/oklch';

‎packages/css-color-parser/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/css-color-parser/src/color-data.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -513,7 +513,12 @@ function reducePrecision(x: number, precision = 7): number {
513513
}
514514

515515
export function colorDataFitsRGB_Gamut(x: ColorData): boolean {
516-
const copy = JSON.parse(JSON.stringify(x)) as ColorData;
516+
const copy: ColorData = {
517+
...x,
518+
channels: [
519+
...x.channels,
520+
],
521+
};
517522

518523
copy.channels = convertPowerlessComponentsToZeroValuesForDisplay(copy.channels, copy.colorNotation);
519524
const srgb = colorDataTo(copy, ColorNotation.RGB);
@@ -523,3 +528,20 @@ export function colorDataFitsRGB_Gamut(x: ColorData): boolean {
523528

524529
return false;
525530
}
531+
532+
export function colorDataFitsDisplayP3_Gamut(x: ColorData): boolean {
533+
const copy: ColorData = {
534+
...x,
535+
channels: [
536+
...x.channels,
537+
],
538+
};
539+
540+
copy.channels = convertPowerlessComponentsToZeroValuesForDisplay(copy.channels, copy.colorNotation);
541+
const displayP3 = colorDataTo(copy, ColorNotation.Display_P3);
542+
if (!displayP3.channels.find((y) => y < -0.00001 || y > 1.00001)) {
543+
return true;
544+
}
545+
546+
return false;
547+
}

‎packages/css-color-parser/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { toLowerCaseAZ } from './util/to-lower-case-a-z';
1919
export type { ColorData } from './color-data';
2020
export { ColorNotation } from './color-notation';
2121
export { SyntaxFlag } from './color-data';
22-
export { colorDataTo, colorDataFitsRGB_Gamut } from './color-data';
22+
export { colorDataTo, colorDataFitsRGB_Gamut, colorDataFitsDisplayP3_Gamut } from './color-data';
2323
export { serializeP3 } from './serialize/p3';
2424
export { serializeRGB } from './serialize/rgb';
2525
export { serializeOKLCH } from './serialize/oklch';

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
# Changes to PostCSS Preset Env
22

3-
### Unreleased (patch)
3+
### Unreleased (minor)
44

5-
- 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)
5+
- 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.
6+
- 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)
67
- 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)
78
- 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)
89
- 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)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
2626
| `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) |
2727
| `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) |
2828
| `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) |
29+
| `gamut-mapping` | | | |
2930
| `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) |
3031
| `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) |
3132
| `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) |

‎plugin-packs/postcss-preset-env/dist/index.cjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugin-packs/postcss-preset-env/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import type { pluginOptions as postcssFocusVisible } from 'postcss-focus-visible
2020
import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within';
2121
import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords';
2222
import type { pluginOptions as postcssFontVariant } from '../types/postcss-font-variant/plugin-options';
23+
import type { pluginOptions as postcssGamutMapping } from '@csstools/postcss-gamut-mapping';
2324
import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties';
2425
import type { pluginOptions as postcssGradientsInterpolationMethod } from '@csstools/postcss-gradients-interpolation-method';
2526
import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo';
@@ -96,6 +97,8 @@ export type pluginsOptions = {
9697
'font-format-keywords'?: postcssFontFormatKeywords | boolean;
9798
/** plugin options for "postcss-font-variant" */
9899
'font-variant-property'?: postcssFontVariant | boolean;
100+
/** plugin options for "@csstools/postcss-gamut-mapping" */
101+
'gamut-mapping'?: postcssGamutMapping | boolean;
99102
/** plugin options for "postcss-gap-properties" */
100103
'gap-properties'?: postcssGapProperties | boolean;
101104
/** plugin options for "@csstools/postcss-gradients-interpolation-method" */

‎plugin-packs/postcss-preset-env/docs/generate.mjs

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import { getFeaturesIds } from '../src/plugins/plugins-map.mjs';
21
import cssdb from 'cssdb';
3-
import { promises as fsp } from 'fs';
2+
import fs from 'fs/promises';
43

54
let featuresTable = '';
65

76
featuresTable = featuresTable + '| ID | Feature | example | docs |\n';
87
featuresTable = featuresTable + '|:--- |:--- |:--- |:--- |\n';
98

10-
const ids = getFeaturesIds();
11-
ids.sort();
9+
const pluginsData = await fs.readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
10+
pluginsData.sort((a, b) => a.id.localeCompare(b.id));
1211

13-
for (const id of ids) {
14-
const cssdbFeature = cssdb.find(feature => feature.id === id);
12+
for (const pluginData of pluginsData) {
13+
if (pluginData.omitDocs) {
14+
continue;
15+
}
16+
17+
const cssdbFeature = cssdb.find(feature => feature.id === pluginData.id);
1518
const polyfills = cssdbFeature?.polyfills || [];
1619
const cssdbPlugins = polyfills?.filter(polyfill => polyfill.type === 'PostCSS Plugin');
1720

@@ -28,19 +31,19 @@ for (const id of ids) {
2831
});
2932

3033
if (cssdbFeature && cssdbPlugins.length > 0) {
31-
featuresTable = featuresTable + `| \`${id}\` `;
34+
featuresTable = featuresTable + `| \`${pluginData.id}\` `;
3235
featuresTable = featuresTable + `| ${cssdbFeature.title} `;
33-
featuresTable = featuresTable + `| [example](https://preset-env.cssdb.org/features/#${id}) `;
36+
featuresTable = featuresTable + `| [example](https://preset-env.cssdb.org/features/#${pluginData.id}) `;
3437
featuresTable = featuresTable + `| [docs](${cssdbPlugins[0].link}#readme) |\n`;
3538
} else {
36-
featuresTable = featuresTable + `| \`${id}\` `;
39+
featuresTable = featuresTable + `| \`${pluginData.id}\` `;
3740
featuresTable = featuresTable + '| ';
3841
featuresTable = featuresTable + '| ';
3942
featuresTable = featuresTable + '| |\n';
4043
}
4144
}
4245

43-
let featuresDoc = (await fsp.readFile('./docs/FEATURES.md', 'utf8')).toString();
46+
let featuresDoc = (await fs.readFile('./docs/FEATURES.md', 'utf8')).toString();
4447
featuresDoc = featuresDoc.replaceAll('<featuresTable>', featuresTable);
4548

46-
fsp.writeFile('FEATURES.md', featuresDoc, 'utf8');
49+
fs.writeFile('FEATURES.md', featuresDoc, 'utf8');

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"@csstools/postcss-color-mix-function": "^2.0.6",
5555
"@csstools/postcss-exponential-functions": "^1.0.1",
5656
"@csstools/postcss-font-format-keywords": "^3.0.0",
57+
"@csstools/postcss-gamut-mapping": "^0.0.0",
5758
"@csstools/postcss-gradients-interpolation-method": "^4.0.6",
5859
"@csstools/postcss-hwb-function": "^3.0.5",
5960
"@csstools/postcss-ic-unit": "^3.0.1",

‎plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { readFile, writeFile } from 'fs/promises';
1+
import fs from 'fs/promises';
22
import { existsSync } from 'fs';
33
import path from 'path';
44

5-
const pluginsData = await readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
5+
const pluginsData = await fs.readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
66

77
const esmPlugins = `export default ${JSON.stringify(pluginsData, null, 2)}\n`;
88

@@ -31,7 +31,7 @@ export const pluginsById = new Map(
3131
}
3232

3333
function generatePluginOptions(data) {
34-
const plugins = data.slice(0).sort((a, b) => a.id.localeCompare(b.id));
34+
const plugins = data.slice().filter((x) => !x.omitTypedOptions).sort((a, b) => a.id.localeCompare(b.id));
3535
let result = '';
3636

3737
for (let i = 0; i < plugins.length; i++) {
@@ -58,7 +58,7 @@ function generatePluginOptions(data) {
5858
}
5959

6060
await Promise.all([
61-
writeFile('./src/plugins/plugins-data.mjs', esmPlugins),
62-
writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)),
63-
writeFile('./src/plugins/plugins-options.ts', generatePluginOptions(pluginsData)),
61+
fs.writeFile('./src/plugins/plugins-data.mjs', esmPlugins),
62+
fs.writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)),
63+
fs.writeFile('./src/plugins/plugins-options.ts', generatePluginOptions(pluginsData)),
6464
]);

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,11 @@
9999
"id": "font-variant-property",
100100
"importName": "postcssFontVariant"
101101
},
102+
{
103+
"packageName": "@csstools/postcss-gamut-mapping",
104+
"id": "gamut-mapping",
105+
"importName": "postcssGamutMapping"
106+
},
102107
{
103108
"packageName": "postcss-gap-properties",
104109
"id": "gap-properties",
@@ -264,5 +269,12 @@
264269
"packageName": "@csstools/postcss-text-decoration-shorthand",
265270
"id": "text-decoration-shorthand",
266271
"importName": "postcssTextDecorationShorthand"
272+
},
273+
{
274+
"packageName": "@csstools/postcss-progressive-custom-properties",
275+
"id": "progressive-custom-properties",
276+
"importName": "postcssProgressiveCustomProperties",
277+
"omitTypedOptions": true,
278+
"omitDocs": true
267279
}
268280
]

‎plugin-packs/postcss-preset-env/src/index.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import autoprefixer from 'autoprefixer';
22
import cssdb from 'cssdb';
33
import logFeaturesList from './log/features-list.mjs';
4-
import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
54
import { initializeSharedOptions } from './lib/shared-options.mjs';
65
import { listFeatures } from './lib/list-features.mjs';
76
import { newLogger } from './log/helper.mjs';
@@ -29,10 +28,6 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
2928
);
3029
}
3130

32-
plugins.push(
33-
postcssProgressiveCustomProperties(),
34-
);
35-
3631
logFeaturesList(features, options, logger);
3732

3833
const internalPlugin = () => {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ export function formatStagedFeature(cssdbList, supportedBrowsers, features, feat
5252
}
5353

5454
// postcss-preset-env : option overrides
55-
pluginOption.enableProgressiveCustomProperties = false;
55+
if (feature.id !== 'progressive-custom-properties') {
56+
pluginOption.enableProgressiveCustomProperties = false;
57+
}
5658

5759
// https://github.com/MattDiMu/postcss-replace-overflow-wrap/blob/ec9914e0b9473a75a5d1fe32ea4311555eb81b71/index.js#L10
5860
if (feature.id === 'overflow-wrap-property' && 'preserve' in pluginOption) {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,7 @@ export default [
6060
'custom-properties',
6161

6262
'cascade-layers',
63+
64+
'progressive-custom-properties',
65+
'gamut-mapping',
6366
];

0 commit comments

Comments
 (0)