Skip to content

Commit 08bc571

Browse files
romainmenkeromainmenke
committed
re-implement
1 parent b385198 commit 08bc571

10 files changed

Lines changed: 299 additions & 214 deletions

File tree

‎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: 269 additions & 184 deletions
Large diffs are not rendered by default.

‎packages/css-color-parser/src/functions/color-mix.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { Color } from '@csstools/color-helpers';
55
import { ColorNotation } from '../color-notation';
66
import { isTokenIdent, isTokenNumeric, isTokenPercentage } from '@csstools/css-tokenizer';
77
import { calcFromComponentValues } from '@csstools/css-calc';
8-
import { colorDataTo, SyntaxFlag } from '../color-data';
8+
import { colorDataToForInterpolation, SyntaxFlag } from '../color-data';
99
import { isFunctionNode, isTokenNode, isWhiteSpaceOrCommentNode } from '@csstools/css-parser-algorithms';
1010
import { toLowerCaseAZ } from '../util/to-lower-case-a-z';
1111
import { mathFunctionNames } from '@csstools/css-calc';
@@ -279,7 +279,7 @@ function colorMixRectangular(colorSpace: string, items: Array<ColorMixEntry> | f
279279

280280
// 3. If items is length 1, set color to the color of that sole item, converted to the specified interpolation <color-space>.
281281
if (normalizedItems.length === 1) {
282-
const color = colorDataTo(normalizedItems[0].color, outputColorNotation);
282+
const color = colorDataToForInterpolation(normalizedItems[0].color, outputColorNotation);
283283
color.colorNotation = outputColorNotation;
284284
color.syntaxFlags.add(SyntaxFlag.ColorMixVariadic);
285285
color.syntaxFlags.add(SyntaxFlag.ColorMix);
@@ -369,8 +369,8 @@ function colorMixRectangularPair(colorNotation: ColorNotation, a_color: ColorDat
369369
a_alpha = Number.isNaN(a_alpha) ? b_alpha : a_alpha;
370370
b_alpha = Number.isNaN(b_alpha) ? a_alpha : b_alpha;
371371

372-
const a_channels = colorDataTo(a_color, colorNotation).channels;
373-
const b_channels = colorDataTo(b_color, colorNotation).channels;
372+
const a_channels = colorDataToForInterpolation(a_color, colorNotation).channels;
373+
const b_channels = colorDataToForInterpolation(b_color, colorNotation).channels;
374374

375375
a_channels[0] = fillInMissingComponent(a_channels[0], b_channels[0]);
376376
b_channels[0] = fillInMissingComponent(b_channels[0], a_channels[0]);
@@ -448,7 +448,7 @@ function colorMixPolar(colorSpace: string, hueInterpolationMethod: string, items
448448

449449
// 3. If items is length 1, set color to the color of that sole item, converted to the specified interpolation <color-space>.
450450
if (normalizedItems.length === 1) {
451-
const color = colorDataTo(normalizedItems[0].color, outputColorNotation);
451+
const color = colorDataToForInterpolation(normalizedItems[0].color, outputColorNotation);
452452
color.colorNotation = outputColorNotation;
453453
color.syntaxFlags.add(SyntaxFlag.ColorMixVariadic);
454454
color.syntaxFlags.add(SyntaxFlag.ColorMix);
@@ -547,8 +547,8 @@ function colorMixPolarPair(colorNotation: ColorNotation, hueInterpolationMethod:
547547
a_alpha = Number.isNaN(a_alpha) ? b_alpha : a_alpha;
548548
b_alpha = Number.isNaN(b_alpha) ? a_alpha : b_alpha;
549549

550-
const a_channels = colorDataTo(a_color, colorNotation).channels;
551-
const b_channels = colorDataTo(b_color, colorNotation).channels;
550+
const a_channels = colorDataToForInterpolation(a_color, colorNotation).channels;
551+
const b_channels = colorDataToForInterpolation(b_color, colorNotation).channels;
552552

553553
switch (colorNotation) {
554554
case ColorNotation.HSL:

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ColorData} from '../color-data';
2-
import { SyntaxFlag, colorDataTo, noneToZeroInRelativeColorDataChannels, normalizeRelativeColorDataChannels } from '../color-data';
2+
import { SyntaxFlag, colorDataToForRelativeColorSyntax, noneToZeroInRelativeColorDataChannels, normalizeRelativeColorDataChannels } from '../color-data';
33
import type { ColorParser } from '../color-parser';
44
import { ColorNotation } from '../color-notation';
55
import type { ComponentValue, FunctionNode} from '@csstools/css-parser-algorithms';
@@ -106,7 +106,7 @@ export function color(colorFunctionNode: FunctionNode, colorParser: ColorParser)
106106
colorData.colorNotation = colorSpaceNameToColorNotation(colorSpace);
107107

108108
if (relativeToColor) {
109-
relativeToColor = colorDataTo(relativeToColor, colorData.colorNotation);
109+
relativeToColor = colorDataToForRelativeColorSyntax(relativeToColor, colorData.colorNotation);
110110
relativeColorChannels = normalizeRelativeColorDataChannels(relativeToColor);
111111
relativeColorChannelsWithoutNone = noneToZeroInRelativeColorDataChannels(relativeColorChannels);
112112
}

‎packages/css-color-parser/src/functions/three-channel-space-separated.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { ColorData} from '../color-data';
2-
import { noneToZeroInRelativeColorDataChannels, normalizeRelativeColorDataChannels } from '../color-data';
2+
import { colorDataToForRelativeColorSyntax, noneToZeroInRelativeColorDataChannels, normalizeRelativeColorDataChannels } from '../color-data';
33
import type { ComponentValue, FunctionNode } from '@csstools/css-parser-algorithms';
44
import type { TokenNumber} from '@csstools/css-tokenizer';
55
import { isTokenDelim, isTokenIdent, isTokenNumber, isTokenNumeric } from '@csstools/css-tokenizer';
66
import type { ColorNotation } from '../color-notation';
7-
import { SyntaxFlag, colorDataTo } from '../color-data';
7+
import { SyntaxFlag } from '../color-data';
88
import { calcFromComponentValues } from '@csstools/css-calc';
99
import { isCommentNode, isFunctionNode, isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms';
1010
import type { normalizeChannelValuesFn } from './normalize-channel-values';
@@ -122,7 +122,7 @@ export function threeChannelSpaceSeparated(
122122

123123
colorData.syntaxFlags.add(SyntaxFlag.RelativeColorSyntax);
124124

125-
relativeToColor = colorDataTo(relativeToColor, colorNotation);
125+
relativeToColor = colorDataToForRelativeColorSyntax(relativeToColor, colorNotation);
126126
relativeColorChannels = normalizeRelativeColorDataChannels(relativeToColor);
127127
relativeColorChannelsWithoutNone = noneToZeroInRelativeColorDataChannels(relativeColorChannels);
128128

‎packages/css-color-parser/test/basic/basic.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ assert.deepStrictEqual(
259259
color(parse('lch(from hwb(50deg none none) l c h)')),
260260
{
261261
colorNotation: 'lch',
262-
channels: [NaN, NaN, NaN],
262+
channels: [NaN, NaN, 87.26522367839932],
263263
alpha: 1,
264264
syntaxFlags: new Set(['relative-color-syntax', 'has-number-values']),
265265
},

‎packages/css-color-parser/test/basic/color-mix-function-oklch.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import { parse } from '../util/parse.mjs';
44
import { serialize_OKLCH_data } from '../util/serialize.mjs';
55

66
const tests = [
7-
['color-mix(in oklch, oklch(100% 0% 60deg), oklch(50% 50% 0deg))', 'oklch(0.75 0.1 30)'],
7+
['color-mix(in oklch, oklch(100% 0% 60deg), oklch(50% 50% 0deg))', 'oklch(0.75 0.1 0)'],
88
['color-mix(in oklch, oklch(100% 0% none), oklch(50% 50% 0deg))', 'oklch(0.75 0.1 0)'],
99
['color-mix(in oklch, rgb(255, 255, 255), rgb(180, 6, 95))', 'oklch(0.75031 0.10016 359.858)'],
1010
['color-mix(in lch, oklch(75% 0% 60deg), oklch(75% 50% 0deg))', 'oklch(0.74979 0.09824 0.10588)'],
1111
['color-mix(in oklch, oklch(100% 0% none), oklch(50% 50% 0deg))', 'oklch(0.75 0.1 0)'],
12-
['color-mix(in oklch, oklch(100% none 60deg), oklch(50% 50% 0deg))', 'oklch(0.75 0.2 30)'],
12+
['color-mix(in oklch, oklch(100% none 60deg), oklch(50% 50% 0deg))', 'oklch(0.75 0.2 0)'],
1313

1414
// Analogous sets
1515
['color-mix(in oklch, rgb(none none none), oklch(0.5 0.2 50))', 'oklch(0.5 0.2 50)'],
16-
['color-mix(in oklch, hwb(100deg none none), oklch(0.5 0.2 50deg))', 'oklch(0.5 0.2 50)'],
16+
['color-mix(in oklch, hwb(100deg none none), oklch(0.5 0.2 50deg))', 'oklch(0.5 0.2 94.8876)'],
1717
['color-mix(in oklch, lab(100 none none), oklch(0.5 0.2 50deg))', 'oklch(0.75 0.2 50)'],
1818
];
1919

‎packages/css-color-parser/test/basic/color-mix-function.mjs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,9 +115,9 @@ const tests = [
115115
['color-mix(in hsl decreasing hue, hsl(180deg 50% 50%), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
116116

117117
['color-mix(in hsl longer hue, hsl(50deg 0% 50%), hsl(50deg 0% 50%))', canonicalize('hsl(230deg 0% 50%)')],
118-
['color-mix(in hsl, color-mix(in hsl longer hue, hsl(50deg 0% 50%), hsl(50deg 0% 50%)), hsl(180deg 100% 50%))', canonicalize('hsl(205deg 50% 50%)')],
118+
['color-mix(in hsl, color-mix(in hsl longer hue, hsl(50deg 0% 50%), hsl(50deg 0% 50%)), hsl(180deg 100% 50%))', canonicalize('hsl(180deg 50% 50%)')],
119119

120-
['color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(90deg none none / none))', canonicalize('hsl(90deg 40% 80% / 25%)')],
120+
['color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(90deg none none / none))', canonicalize('hsl(30deg 40% 80% / 25%)')],
121121
['color-mix(in hwb, hwb(30deg 30% 40% / 25%) 0%, hwb(90deg none none / 0.5))', canonicalize('hwb(90deg 30% 40% / 0.5)')],
122122
['color-mix(in hsl, hsl(from hsl(none 50% 50%) h s l), hsl(from hsl(120deg 50% 50%) h s l))', canonicalize('hsl(120deg 50% 50%)')],
123123
['color-mix(in hsl, hsl(from hsl(0deg 50% 50%) none s l), hsl(from hsl(120deg 50% 50%) h s l))', canonicalize('hsl(120deg 50% 50%)')],
@@ -193,7 +193,7 @@ assert.deepStrictEqual(
193193
color(parse('color-mix(in lch, lch(50% 50% 180deg), lch(100% 0% 0deg))')),
194194
{
195195
colorNotation: 'lch',
196-
channels: [75, 37.5, 90],
196+
channels: [75, 37.5, 180],
197197
alpha: 1,
198198
syntaxFlags: new Set(['color-mix']),
199199
},
@@ -233,7 +233,7 @@ assert.deepStrictEqual(
233233
color(parse('color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))')),
234234
{
235235
colorNotation: 'lch',
236-
channels: [100, 0, 50],
236+
channels: [100, 0, NaN],
237237
alpha: 1,
238238
syntaxFlags: new Set(['color-mix']),
239239
},
@@ -293,7 +293,7 @@ assert.deepStrictEqual(
293293
color(parse('color-mix(in hsl, lch(none 0 30), hsl(50 0 none))')),
294294
{
295295
colorNotation: 'hsl',
296-
channels: [50, 0, Number.NaN],
296+
channels: [Number.NaN, 0, Number.NaN],
297297
alpha: 1,
298298
syntaxFlags: new Set(['color-mix']),
299299
},

‎packages/css-color-parser/test/basic/none-exhaustive.mjs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { computedValue, reducePrecisionWholeValue } from '../util/serialize.mjs'
1212
// https://github.com/w3c/csswg-drafts/issues/14100
1313
['lch(from orchid l 0 h)', 'lch(62.75256542 0 326.96909222)'],
1414
['lch(from lch(from orchid l 0 h) l c h)', 'lch(62.75256542 0 326.96909222)'],
15-
['color-mix(in lch, lch(from orchid l 0 h))', 'lch(62.75256542 0 326.96909222)'],
15+
['color-mix(in lch, lch(from orchid l 0 h))', 'lch(62.75256542 0 none)'],
1616

1717
// exhaustive tests
1818
// HSL
@@ -28,7 +28,7 @@ import { computedValue, reducePrecisionWholeValue } from '../util/serialize.mjs'
2828
['hsl(from hwb(180 none 25%) h s l)', 'color(srgb 0 0.75 0.75)'],
2929
['hsl(from hwb(180 25% none) h s l)', 'color(srgb 0.25 1 1)'],
3030
['hsl(from hwb(none none 25%) h s l)', 'hsl(none 100% 37.5%)'],
31-
['hsl(from hwb(180 none none) h s l)', 'hsl(none none none)'],
31+
['hsl(from hwb(180 none none) h s l)', 'hsl(180 none none)'],
3232
['hsl(from hwb(none 25% none) h s l)', 'hsl(none 100% 62.5%)'],
3333
['hsl(from hwb(none none none) h s l)', 'hsl(none none none)'],
3434

@@ -132,7 +132,7 @@ import { computedValue, reducePrecisionWholeValue } from '../util/serialize.mjs'
132132
['lch(from hwb(180 none 25%) l c h)', 'lch(69.91337803 42.54334477 196.45478916)'],
133133
['lch(from hwb(180 25% none) l c h)', 'lch(91.18116399 49.29673753 196.65803824)'],
134134
['lch(from hwb(none none 25%) l c h)', 'lch(40.61501478 86.05118759 none)'],
135-
['lch(from hwb(180 none none) l c h)', 'lch(none none none)'],
135+
['lch(from hwb(180 none none) l c h)', 'lch(none none 196.45478916)'],
136136
['lch(from hwb(none 25% none) l c h)', 'lch(58.23109529 85.49243054 none)'],
137137
['lch(from hwb(none none none) l c h)', 'lch(none none none)'],
138138

@@ -184,7 +184,7 @@ import { computedValue, reducePrecisionWholeValue } from '../util/serialize.mjs'
184184
['oklch(from hwb(180 none 25%) l c h)', 'oklch(0.72924735 0.12448121 194.7689599)'],
185185
['oklch(from hwb(180 25% none) l c h)', 'oklch(0.91079253 0.14429702 194.91785641)'],
186186
['oklch(from hwb(none none 25%) l c h)', 'oklch(0.50578216 0.20754918 none)'],
187-
['oklch(from hwb(180 none none) l c h)', 'oklch(none none none)'],
187+
['oklch(from hwb(180 none none) l c h)', 'oklch(none none 194.7689599)'],
188188
['oklch(from hwb(none 25% none) l c h)', 'oklch(0.65951623 0.22690049 none)'],
189189
['oklch(from hwb(none none none) l c h)', 'oklch(none none none)'],
190190

‎packages/css-color-parser/test/wpt/color-computed-color-mix-function.mjs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ import { serialize_sRGB_data } from '../util/serialize.mjs';
7272
['color-mix(in hsl, hsl(120deg 20% 40%), hsl(none none none))', canonicalize('hsl(120deg 20% 40%)')],
7373
['color-mix(in hsl, hsl(120deg 20% none), hsl(30deg 40% 60%))', canonicalize('hsl(75deg 30% 60%)')],
7474
['color-mix(in hsl, hsl(120deg 20% 40%), hsl(30deg 20% none))', canonicalize('hsl(75deg 20% 40%)')],
75-
['color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))', canonicalize('hsl(30deg 20% 60%)')],
75+
['color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))', canonicalize('hsl(none 20% 60%)')],
7676

7777
['color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))', canonicalize('hsl(60deg 40% 40%)')],
7878
['color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))', canonicalize('hsl(60deg 40% 40% / 0.5)')],
@@ -213,7 +213,7 @@ import { serialize_sRGB_data } from '../util/serialize.mjs';
213213
['color-mix(in lch, lch(10 20 30deg), lch(none none none))', canonicalize('lch(10 20 30)')],
214214
['color-mix(in lch, lch(10 20 none), lch(50 60 70deg))', canonicalize('lch(30 40 70)')],
215215
['color-mix(in lch, lch(10 20 30deg), lch(50 60 none))', canonicalize('lch(30 40 30)')],
216-
['color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))', canonicalize('lch(50 20 50)')],
216+
['color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))', canonicalize('lch(50 20 30)')],
217217
['color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))', canonicalize('lch(30 40 50)')],
218218
['color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))', canonicalize('lch(30 40 50 / 0.5)')],
219219
['color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))', canonicalize('lch(30 40 50 / none)')],
@@ -293,14 +293,14 @@ import { serialize_sRGB_data } from '../util/serialize.mjs';
293293
['color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(none none none))', canonicalize('oklch(0.1 0.2 30)')],
294294
['color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70deg))', canonicalize('oklch(0.3 0.4 70)')],
295295
['color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 none))', canonicalize('oklch(0.3 0.4 30)')],
296-
['color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 none 70deg))', canonicalize('oklch(0.5 0.2 50)')],
296+
['color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 none 70deg))', canonicalize('oklch(0.5 0.2 30)')],
297297
['color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))', canonicalize('oklch(0.3 0.4 50)')],
298298
['color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))', canonicalize('oklch(0.3 0.4 50 / 0.5)')],
299299
['color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))', canonicalize('oklch(0.3 0.4 50 / none)')],
300300

301301
['color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(0.5 none none / none))', canonicalize('oklch(0.5 0.2 30 / 0.25)')],
302302
['color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(none 0.5 none / none))', canonicalize('oklch(0.1 0.5 30 / 0.25)')],
303-
['color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(none none 90deg / none))', canonicalize('oklch(0.1 0.2 90 / 0.25)')],
303+
['color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(none none 90deg / none))', canonicalize('oklch(0.1 0.2 30 / 0.25)')],
304304
['color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(0.5 0.5 none / none))', canonicalize('oklch(0.5 0.5 30 / 0.25)')],
305305
['color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(none none none / 0.5))', canonicalize('oklch(0.1 0.2 30 / 0.5)')],
306306
['color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(0.5 none none / 0.5))', canonicalize('oklch(0.5 0.2 30 / 0.5)')],

0 commit comments

Comments
 (0)