Skip to content

Commit f8e1a7b

Browse files
authored
Merge pull request #330 from sass/feature.color-4
Merge feature.color-4 into main
2 parents 71004ad + e146240 commit f8e1a7b

File tree

4 files changed

+1181
-318
lines changed

4 files changed

+1181
-318
lines changed

Diff for: lib/src/protofier.ts

+79-25
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import * as proto from './vendor/embedded_sass_pb';
99
import * as utils from './utils';
1010
import {FunctionRegistry} from './function-registry';
1111
import {SassArgumentList} from './value/argument-list';
12-
import {SassColor} from './value/color';
12+
import {KnownColorSpace, SassColor} from './value/color';
1313
import {SassFunction} from './value/function';
1414
import {ListSeparator, SassList} from './value/list';
1515
import {SassMap} from './value/map';
@@ -68,13 +68,15 @@ export class Protofier {
6868
} else if (value instanceof SassNumber) {
6969
result.value = {case: 'number', value: this.protofyNumber(value)};
7070
} else if (value instanceof SassColor) {
71-
if (value.hasCalculatedHsl) {
72-
const color = create(proto.Value_HslColorSchema, value);
73-
result.value = {case: 'hslColor', value: color};
74-
} else {
75-
const color = create(proto.Value_RgbColorSchema, value);
76-
result.value = {case: 'rgbColor', value: color};
77-
}
71+
const channels = value.channels;
72+
const color = create(proto.Value_ColorSchema, {
73+
channel1: channels.get(0) as number,
74+
channel2: channels.get(1) as number,
75+
channel3: channels.get(2) as number,
76+
alpha: value.alpha,
77+
space: value.space,
78+
});
79+
result.value = {case: 'color', value: color};
7880
} else if (value instanceof SassList) {
7981
const list = create(proto.Value_ListSchema, {
8082
separator: this.protofySeparator(value.separator),
@@ -232,24 +234,76 @@ export class Protofier {
232234
return this.deprotofyNumber(value.value.value);
233235
}
234236

235-
case 'rgbColor': {
237+
case 'color': {
236238
const color = value.value.value;
237-
return new SassColor({
238-
red: color.red,
239-
green: color.green,
240-
blue: color.blue,
241-
alpha: color.alpha,
242-
});
243-
}
244-
245-
case 'hslColor': {
246-
const color = value.value.value;
247-
return new SassColor({
248-
hue: color.hue,
249-
saturation: color.saturation,
250-
lightness: color.lightness,
251-
alpha: color.alpha,
252-
});
239+
switch (color.space.toLowerCase()) {
240+
case 'rgb':
241+
case 'srgb':
242+
case 'srgb-linear':
243+
case 'display-p3':
244+
case 'a98-rgb':
245+
case 'prophoto-rgb':
246+
case 'rec2020':
247+
return new SassColor({
248+
red: color.channel1,
249+
green: color.channel2,
250+
blue: color.channel3,
251+
alpha: color.alpha,
252+
space: color.space as KnownColorSpace,
253+
});
254+
255+
case 'hsl':
256+
return new SassColor({
257+
hue: color.channel1,
258+
saturation: color.channel2,
259+
lightness: color.channel3,
260+
alpha: color.alpha,
261+
space: 'hsl',
262+
});
263+
264+
case 'hwb':
265+
return new SassColor({
266+
hue: color.channel1,
267+
whiteness: color.channel2,
268+
blackness: color.channel3,
269+
alpha: color.alpha,
270+
space: 'hwb',
271+
});
272+
273+
case 'lab':
274+
case 'oklab':
275+
return new SassColor({
276+
lightness: color.channel1,
277+
a: color.channel2,
278+
b: color.channel3,
279+
alpha: color.alpha,
280+
space: color.space as KnownColorSpace,
281+
});
282+
283+
case 'lch':
284+
case 'oklch':
285+
return new SassColor({
286+
lightness: color.channel1,
287+
chroma: color.channel2,
288+
hue: color.channel3,
289+
alpha: color.alpha,
290+
space: color.space as KnownColorSpace,
291+
});
292+
293+
case 'xyz':
294+
case 'xyz-d65':
295+
case 'xyz-d50':
296+
return new SassColor({
297+
x: color.channel1,
298+
y: color.channel2,
299+
z: color.channel3,
300+
alpha: color.alpha,
301+
space: color.space as KnownColorSpace,
302+
});
303+
304+
default:
305+
throw utils.compilerError(`Unknown color space "${color.space}".`);
306+
}
253307
}
254308

255309
case 'list': {

0 commit comments

Comments
 (0)