Merge pull request #330 from sass/feature.color-4

Merge feature.color-4 into main
sass · Sep 13, 2024 · f8e1a7b · f8e1a7b
2 parents 71004ad + e146240
commit f8e1a7b
Show file tree

Hide file tree

Showing 4 changed files with 1,181 additions and 318 deletions.
diff --git a/lib/src/protofier.ts b/lib/src/protofier.ts
@@ -9,7 +9,7 @@ import * as proto from './vendor/embedded_sass_pb';
 import * as utils from './utils';
 import {FunctionRegistry} from './function-registry';
 import {SassArgumentList} from './value/argument-list';
-import {SassColor} from './value/color';
+import {KnownColorSpace, SassColor} from './value/color';
 import {SassFunction} from './value/function';
 import {ListSeparator, SassList} from './value/list';
 import {SassMap} from './value/map';
@@ -68,13 +68,15 @@ export class Protofier {
     } else if (value instanceof SassNumber) {
       result.value = {case: 'number', value: this.protofyNumber(value)};
     } else if (value instanceof SassColor) {
-      if (value.hasCalculatedHsl) {
-        const color = create(proto.Value_HslColorSchema, value);
-        result.value = {case: 'hslColor', value: color};
-      } else {
-        const color = create(proto.Value_RgbColorSchema, value);
-        result.value = {case: 'rgbColor', value: color};
-      }
+      const channels = value.channels;
+      const color = create(proto.Value_ColorSchema, {
+        channel1: channels.get(0) as number,
+        channel2: channels.get(1) as number,
+        channel3: channels.get(2) as number,
+        alpha: value.alpha,
+        space: value.space,
+      });
+      result.value = {case: 'color', value: color};
     } else if (value instanceof SassList) {
       const list = create(proto.Value_ListSchema, {
         separator: this.protofySeparator(value.separator),
@@ -232,24 +234,76 @@ export class Protofier {
         return this.deprotofyNumber(value.value.value);
       }
 
-      case 'rgbColor': {
+      case 'color': {
         const color = value.value.value;
-        return new SassColor({
-          red: color.red,
-          green: color.green,
-          blue: color.blue,
-          alpha: color.alpha,
-        });
-      }
-
-      case 'hslColor': {
-        const color = value.value.value;
-        return new SassColor({
-          hue: color.hue,
-          saturation: color.saturation,
-          lightness: color.lightness,
-          alpha: color.alpha,
-        });
+        switch (color.space.toLowerCase()) {
+          case 'rgb':
+          case 'srgb':
+          case 'srgb-linear':
+          case 'display-p3':
+          case 'a98-rgb':
+          case 'prophoto-rgb':
+          case 'rec2020':
+            return new SassColor({
+              red: color.channel1,
+              green: color.channel2,
+              blue: color.channel3,
+              alpha: color.alpha,
+              space: color.space as KnownColorSpace,
+            });
+
+          case 'hsl':
+            return new SassColor({
+              hue: color.channel1,
+              saturation: color.channel2,
+              lightness: color.channel3,
+              alpha: color.alpha,
+              space: 'hsl',
+            });
+
+          case 'hwb':
+            return new SassColor({
+              hue: color.channel1,
+              whiteness: color.channel2,
+              blackness: color.channel3,
+              alpha: color.alpha,
+              space: 'hwb',
+            });
+
+          case 'lab':
+          case 'oklab':
+            return new SassColor({
+              lightness: color.channel1,
+              a: color.channel2,
+              b: color.channel3,
+              alpha: color.alpha,
+              space: color.space as KnownColorSpace,
+            });
+
+          case 'lch':
+          case 'oklch':
+            return new SassColor({
+              lightness: color.channel1,
+              chroma: color.channel2,
+              hue: color.channel3,
+              alpha: color.alpha,
+              space: color.space as KnownColorSpace,
+            });
+
+          case 'xyz':
+          case 'xyz-d65':
+          case 'xyz-d50':
+            return new SassColor({
+              x: color.channel1,
+              y: color.channel2,
+              z: color.channel3,
+              alpha: color.alpha,
+              space: color.space as KnownColorSpace,
+            });
+
+          default:
+            throw utils.compilerError(`Unknown color space "${color.space}".`);
+        }
       }
 
       case 'list': {