Skip to content

postcss-gamut-mapping #1144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Oct 9, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/ISSUE_TEMPLATE/css-issue.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions .github/ISSUE_TEMPLATE/plugin-issue.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions .github/labeler.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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/**
Expand Down
59 changes: 59 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions packages/css-color-parser/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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_
Expand Down
1 change: 1 addition & 0 deletions packages/css-color-parser/dist/color-data.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 1 addition & 1 deletion packages/css-color-parser/dist/index.cjs

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/css-color-parser/dist/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/css-color-parser/dist/index.mjs

Large diffs are not rendered by default.

24 changes: 23 additions & 1 deletion packages/css-color-parser/src/color-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
}
2 changes: 1 addition & 1 deletion packages/css-color-parser/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
5 changes: 3 additions & 2 deletions plugin-packs/postcss-preset-env/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
1 change: 1 addition & 0 deletions plugin-packs/postcss-preset-env/FEATURES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |
Expand Down
2 changes: 1 addition & 1 deletion plugin-packs/postcss-preset-env/dist/index.cjs

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion plugin-packs/postcss-preset-env/dist/index.mjs

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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" */
Expand Down
25 changes: 14 additions & 11 deletions plugin-packs/postcss-preset-env/docs/generate.mjs
Original file line number Diff line number Diff line change
@@ -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');

Expand All @@ -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');
1 change: 1 addition & 0 deletions plugin-packs/postcss-preset-env/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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`;

Expand Down Expand Up @@ -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++) {
Expand All @@ -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)),
]);
12 changes: 12 additions & 0 deletions plugin-packs/postcss-preset-env/scripts/plugins-data.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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
}
]
5 changes: 0 additions & 5 deletions plugin-packs/postcss-preset-env/src/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -29,10 +28,6 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
);
}

plugins.push(
postcssProgressiveCustomProperties(),
);

logFeaturesList(features, options, logger);

const internalPlugin = () => {
Expand Down
4 changes: 3 additions & 1 deletion plugin-packs/postcss-preset-env/src/lib/format-feature.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,7 @@ export default [
'custom-properties',

'cascade-layers',

'progressive-custom-properties',
'gamut-mapping',
];
Loading