Skip to content

Commit c67d198

Browse files
romainmenkeromainmenke
authored
postcss-gradients-interpolation-method: skip gamut mapping (#909)
* postcss-gradients-interpolation-method: skip gamut mapping * fix * more fixes * labeler * fixes * tweak
1 parent 44d6dc2 commit c67d198

32 files changed

+335
-166
lines changed

‎.github/labeler.yml

+2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
- .github/**
33
- packages/base-cli/**
44
- packages/cascade-layer-name-parser/**
5+
- packages/color-helpers/**
56
- packages/css-calc/**
7+
- packages/css-color-parser/**
68
- packages/css-parser-algorithms/**
79
- packages/css-tokenizer/**
810
- packages/media-query-list-parser/**

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

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to CSS Color Parser
22

3+
### 1.1.0 (minor)
4+
5+
- Add a flag to `serializeP3` and `serializeRGB` to skip gamut mapping.
6+
37
### 1.0.0 (March 25, 2023)
48

59
- Initial version

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

+1-1
Large diffs are not rendered by default.

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

+1-1
Large diffs are not rendered by default.

‎packages/css-color-parser/dist/serialize/p3.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ColorData } from '../color-data';
22
import { FunctionNode } from '@csstools/css-parser-algorithms';
33
import { Color } from '@csstools/color-helpers';
4-
export declare function serializeP3(color: ColorData): FunctionNode;
4+
export declare function serializeP3(color: ColorData, gamutMapping?: boolean): FunctionNode;
55
export declare function XYZ_D50_to_P3_Gamut(color: Color): Color;

‎packages/css-color-parser/dist/serialize/rgb.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ColorData } from '../color-data';
22
import { FunctionNode } from '@csstools/css-parser-algorithms';
33
import { Color } from '@csstools/color-helpers';
4-
export declare function serializeRGB(color: ColorData): FunctionNode;
4+
export declare function serializeRGB(color: ColorData, gamutMapping?: boolean): FunctionNode;
55
export declare function XYZ_D50_to_sRGB_Gamut(color: Color): Color;

‎packages/css-color-parser/src/serialize/p3.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,18 @@ import { NumberType, TokenType } from '@csstools/css-tokenizer';
77
import { calculations, Color, conversions, utils, xyz } from '@csstools/color-helpers';
88
import { toPrecision } from './to-precision';
99

10-
export function serializeP3(color: ColorData): FunctionNode {
10+
export function serializeP3(color: ColorData, gamutMapping = true): FunctionNode {
1111
color.channels = setPowerlessComponents(color.channels, color.colorNotation);
1212
let p3 = color.channels.map((x) => Number.isNaN(x) ? 0 : x);
13+
1314
if (
1415
color.colorNotation !== ColorNotation.Display_P3
1516
) {
16-
p3 = XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(color).channels);
17+
if (gamutMapping) {
18+
p3 = XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(color).channels);
19+
} else {
20+
p3 = xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(color).channels);
21+
}
1722
}
1823

1924
const r = toPrecision(p3[0], 6);

‎packages/css-color-parser/src/serialize/rgb.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@ import { calculations, Color, conversions, utils, xyz } from '@csstools/color-he
77
import { colorData_to_XYZ_D50 } from '../color-data';
88
import { toPrecision } from './to-precision';
99

10-
export function serializeRGB(color: ColorData): FunctionNode {
10+
export function serializeRGB(color: ColorData, gamutMapping = true): FunctionNode {
1111
color.channels = setPowerlessComponents(color.channels, color.colorNotation);
1212
let srgb = color.channels.map((x) => Number.isNaN(x) ? 0 : x);
1313

1414
if (
1515
color.colorNotation !== ColorNotation.RGB &&
1616
color.colorNotation !== ColorNotation.HEX
1717
) {
18-
srgb = XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(color).channels);
18+
if (gamutMapping) {
19+
srgb = XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(color).channels);
20+
} else {
21+
srgb = xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(color).channels);
22+
}
1923
}
2024

2125
const r = Math.min(255, Math.max(0, Math.round(toPrecision(srgb[0]) * 255)));

‎plugins/postcss-gradients-interpolation-method/.tape.mjs

+3-4
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,15 @@ postcssTape(plugin)({
3939
'examples/example': {
4040
message: 'minimal example',
4141
},
42-
'examples/example:preserve-true': {
42+
'examples/example:preserve-false': {
4343
message: 'minimal example',
4444
options: {
45-
preserve: true
45+
preserve: false
4646
}
4747
},
48-
'examples/example:preserve-true:progressive-false': {
48+
'examples/example:progressive-false': {
4949
message: 'minimal example',
5050
options: {
51-
preserve: true,
5251
enableProgressiveCustomProperties: false,
5352
}
5453
}

‎plugins/postcss-gradients-interpolation-method/CHANGELOG.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# Changes to PostCSS Gradients Interpolation Method
22

3-
### 3.0.0 3.0.0 (March 25, 2023)
3+
### 3.0.1 (patch)
4+
5+
- Skip gamut mapping for interpolation color hints.
6+
7+
### 3.0.0 (March 25, 2023)
48

59
- Handle `color-mix()` internally with `@csstools/css-color-parser`
610

‎plugins/postcss-gradients-interpolation-method/README.md

+21-18
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
1010
}
1111
12-
.example {
13-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
12+
:root {
13+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
1414
}
1515
1616
/* becomes */
@@ -20,9 +20,14 @@
2020
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
2121
}
2222
23-
.example {
24-
background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
25-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
23+
:root {
24+
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
25+
}
26+
27+
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
28+
:root {
29+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
30+
}
2631
}
2732
```
2833

@@ -89,31 +94,29 @@ instructions for:
8994
### preserve
9095

9196
The `preserve` option determines whether the original notation
92-
is preserved. By default, it is not preserved.
97+
is preserved. By default, it is preserved.
9398

9499
```js
95-
postcssGradientsInterpolationMethod({ preserve: true })
100+
postcssGradientsInterpolationMethod({ preserve: false })
96101
```
97102

98103
```pcss
99104
.example {
100105
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
101106
}
102107
103-
.example {
104-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
108+
:root {
109+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
105110
}
106111
107112
/* becomes */
108113
109114
.example {
110115
background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
111-
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
112116
}
113117
114-
.example {
115-
background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
116-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
118+
:root {
119+
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
117120
}
118121
```
119122

@@ -133,8 +136,8 @@ postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false }
133136
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
134137
}
135138
136-
.example {
137-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
139+
:root {
140+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
138141
}
139142
140143
/* becomes */
@@ -144,9 +147,9 @@ postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false }
144147
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
145148
}
146149
147-
.example {
148-
background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
149-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
150+
:root {
151+
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
152+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
150153
}
151154
```
152155

‎plugins/postcss-gradients-interpolation-method/dist/color-stop-list.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ export type ColorStop = {
66
colorData: ColorData;
77
position: ComponentValue;
88
};
9-
export declare function interpolateColorsInColorStopsList(colorStops: Array<ColorStop>, colorSpace: TokenNode, hueInterpolationMethod: TokenNode | null): Array<ComponentValue> | false;
9+
export declare function interpolateColorsInColorStopsList(colorStops: Array<ColorStop>, colorSpace: TokenNode, hueInterpolationMethod: TokenNode | null, wideGamut?: boolean): Array<ComponentValue> | false;

0 commit comments

Comments
 (0)