feat: Add convertcssrgbtohex #19 (#26)

* feat: Add convertCSSRGBtoHex

* Create small-owls-tell.md

.changeset/small-owls-tell.md

@@ -0,0 +1,5 @@
+---
+"@sardine/colour": minor
+---
+
+Add convertCSSRGBtoHex

src/converters.ts

@@ -1,6 +1,6 @@
 import type { LabColour, RGBColour, XYZColour } from "./types";
 import { constrainLab, linearRGB } from "./util/index.js";
-import { hexAlphaRegex, hexRegex, shortAlphaHexRegex, shortHexRegex } from "./util/regexers.js";
+import { cssRGBA, hexAlphaRegex, hexRegex, shortAlphaHexRegex, shortHexRegex } from "./util/regexers.js";
 
 /**
  * Converts sRGB colour space to XYZ.
@@ -62,7 +62,7 @@ export function convertRGBtoLab(colour: RGBColour): LabColour {
 /**
  * Converts a colour in the RGB format to Hexadecimal.
  * It accepts an option Alpha channel `A`
- * @param {Object} colour - An object representing RGB Colour.
+ * @param {RGBColour} colour - An object representing RGB Colour.
  * @param {number} colour.R - A number between 0 and 255 to describe the Red colour channel
  * @param {number} colour.G - A number between 0 and 255 to describe the Green colour channel
  * @param {number} colour.B - A number between 0 and 255 to describe the Blue colour channel
@@ -74,6 +74,29 @@ export function convertRGBtoHex({R, G, B, A}: RGBColour): string {
   return '#'+hex(R)+hex(G)+hex(B)+(A ? hex(Math.round(A * 255)) : '');
 }
 
+/**
+ * Converts CSS RGB colour format into Hexadecimal.
+ * @param {string} colour - A CSS RGB colour in the format:
+ * 
+ * - `rgb(0,0,0)`
+ * - `rgba(0,0,0,0.4)`
+ * 
+ * @returns {string} - An hexadecimal string 
+ */
+export function convertCSSRGBtoHex(colour:string): string {
+  const match = colour.match(cssRGBA);
+  if (!match) { throw new Error(`convertCSSRGBtoHex expects a valid CSS RGB string but got ${colour}`)}
+  const rgbNumber = (n: string) : number => parseInt(n, 10);
+  const alphaNumber = (n: string) : number => parseFloat(n) ?? undefined;
+  const rgb: RGBColour = {
+    R:rgbNumber(match[1] as string),
+    G:rgbNumber(match[2] as string), 
+    B:rgbNumber(match[3] as string), 
+    A:alphaNumber(match[4] as string)
+  };
+  return convertRGBtoHex(rgb);
+}
+
 export function convertHextoRGB(hex: string): RGBColour {
   if (typeof hex !== "string") {
     throw new Error(`convertHextoRGB expects a string but got a ${typeof hex}`);

src/tests/converters.test.ts

@@ -1,5 +1,6 @@
 import test from "ava";
 import {
+  convertCSSRGBtoHex,
   convertHextoRGB,
   convertRGBtoHex,
   convertRGBtoLab,
@@ -178,4 +179,32 @@ test("converts RGBA format to hexadecimal colour with alpha channel", ({
     A: 0.5
   };
   is(convertRGBtoHex(RGB), expectedHex);
+});
+
+test("converts CSS RGB format to hexadecimal colour", ({
+  is
+}) => {
+  const expectedHex = "#ffffff";
+  const RGB = 'rgb(255,255,255)';
+  is(convertCSSRGBtoHex(RGB), expectedHex);
+});
+
+test("converts CSS RGBA format to hexadecimal colour with alpha channel", ({
+  is
+}) => {
+  const expectedHex = "#ffffff80";
+  const RGBA = 'rgba(255,255,255,0.5)';
+  is(convertCSSRGBtoHex(RGBA), expectedHex);
+});
+
+test("throws an error if not passing a valid CSS RGB format", ({
+  is,
+  throws,
+}) => {
+  const rgb = "rfv(12,23,42)";
+  const error = throws(() => convertCSSRGBtoHex(rgb)) as Error;
+  is(
+    error.message,
+    "convertCSSRGBtoHex expects a valid CSS RGB string but got rfv(12,23,42)"
+  );
 });

src/util/regexers.ts

@@ -6,3 +6,5 @@ export const hexAlphaRegex = /^#[a-fA-F0-9]{8}$/;
 export const shortHexRegex = /^#[a-fA-F0-9]{3}$/;
 /** Four digit Hexadecimal colour, ie: #FFF4 */
 export const shortAlphaHexRegex = /^#[a-fA-F0-9]{4}$/;
+/** CSS RGB with optional alpha channel, ie: rgb(23, 213, 11) or rgba(12,34,12,0.2) */
+export const cssRGBA = /^rgba*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,*\s*(\d+.\d)*\)$/i;