HEX Alpha Util

[Wondermarin]

Hi!

I would like to share my util, which I use to convert hex + alpha to a format that is understandable to the browser. I will be grateful for your feedback, and in particular, what can be improved.

stitches.types.ts

// Importing type from the library, which will give us access to the types at the field level.
import { InternalCSS } from "@stitches/react";

// Defining acceptable field values (so far, these are only `color` and `backgroundColor`).
type HexAlphaUtilKey = "color" | "backgroundColor";

// Defining the value type for our util.
// Format: [`color` | `backgroundColor`, value, alpha as range from 0 to 100].
export type HexAlphaUtil<C extends string> = [
  HexAlphaUtilKey ,
  InternalCSS["color"] | InternalCSS["backgroundColor"] | `$${C}`,
  number
];

ss.util.ts

// The function allows you to divide a string by a specified number of characters.
export function ss(string: string, n = 1) {
  const result = string.split("").reduce(
    (prev: [string[], string], current): [string[], string] => {
      const [array, prevString] = prev;
      let currentString = prevString;

      if (currentString.length < n) currentString += current;
      else {
        array.push(currentString);
        currentString = current;
      }

      return [array, currentString];
    },
    [[], ""]
  );

  return result.flat(1);
}

stitches.config.ts

import { createCss } from "@stitches/react";
import { HexAlphaUtil } from "./stitches.types";
import { ss } from "../utils/ss.util";

export const { styled, global } = createCss({
  theme: {
    colors: {
      accent: "#72aef6",
      surface: "#121212",
    },
  },
  utils: {
    hexAlpha:
      (config) =>
      ([key, value, alpha]: HexAlphaUtil<keyof typeof config["theme"]["colors"]>) => {
        if (!value) return { [key]: undefined };

        // If the value is a Stitches variable.
        if (value.startsWith("$")) {
        // Find the value of this variable.
          const color = config.theme.colors[value.slice(1)];

          // If found, we assign it to `value`.
          if (color) value = color;
        // If the value is a `Named` color.
        } else if (!value.startsWith("#")) {
          // Creating a canvas and getting its context.
          const canvas = document.createElement("canvas").getContext("2d");

          // If the context was not received, we return `undefined`.
          if (!canvas) return { [key]: undefined };

          // This is where the "magic" happens, `red` is converted to `#ff0000`, etc.
          canvas.fillStyle = value;
          value = canvas.fillStyle;
        // If the value is a 3 digit hex.
        } else if (value.length === 4) {
          // Convert it to a 6 digit hex.
          value = value
            .split("")
            .map((v, i) => (i ? v + v : "#"))
            .join("");
        }

        // RegEx template for a 6 digit HEX color.
        const validHex = /^#[\dA-F]{6}$/gi;

        // If, after all our manipulations, a color is not the valid HEX, then we return `undefined`.
        if (!validHex.test(value)) return { [key]: undefined };

        // We divide our HEX color by 2 characters and convert it into a decimal system.
        const rgb = ss(value.slice(1), 2).map((v) => parseInt(v, 16));

        // Returning a rgb color to the space-separated format.
        return { [key]: `rgb(${rgb.join(" ")} / ${alpha}%)` };
      },
  },
});

Now we can use this when styling.

someComponent.styles.ts

import { styled } from "../../stitches/stitches.config";

export const AppStyles = {
  App: styled("div", {
    width: 100,
    height: 100,
    hexAlpha: ["backgroundColor", "#1f6", 25],
    hexAlpha: ["color", "red", 33],
    hexAlpha: ["backgroundColor", "$accent", 87],
    hexAlpha: ["backgroundColor", "#121212", 99],
  }),
};

Thank you for your time! 😄

And once again I would like to remind you that I will be glad of any feedback, as well as any tips for improvement.

[jahirfiquitiva]

How to do this with v1?

[Wondermarin]

I think its the same as before.

[jahirfiquitiva]

@Wondermarin not really.. you don't get the config object in the new utils functions 😕

[Wondermarin]

@jahirfiquitiva and really, I'll see what it might look like in v1.

[Wondermarin]

@jahirfiquitiva

For some reason unknown to me in version 1.0.0, they abandoned the wrapper around a util function, which is why it is now impossible to access the config object and its type, but I found a workaround.

Now our util function is outside config, which gives us access to the config and its type.

type HexAlphaUtilKey = "color" | "backgroundColor";

function isProperty(value: string): value is keyof typeof config.theme.colors {
  if (value.startsWith("$")) return true;

  return false;
}

function ss(string: string, size: number) {
  const stringArray = string.split("");

  const result = [];

  for (let i = 0; i < stringArray.length; i += size) {
    const chunk = stringArray.slice(i, i + size).join("");

    result.push(chunk);
  }

  return result;
}

function hexAlphaUtil<K extends HexAlphaUtilKey>(
  key: K,
  value: PropertyValue<K, typeof config> & string,
  alpha: number
): Record<string, string | undefined> {
  if (!value) {
    return {
      [key]: undefined,
    };
  }

  if (isProperty(value)) {
    const color = config.theme.colors[value.slice(1)];

    if (color) value = color;
  } else if (!value.startsWith("#")) {
    const canvas = document.createElement("canvas").getContext("2d");

    if (!canvas) {
      return {
        [key]: undefined,
      };
    }

    canvas.fillStyle = value;
    value = canvas.fillStyle;
  } else if (value.length === 4) {
    value = value
      .split("")
      .map((v, i) => (i ? v + v : "#"))
      .join("");
  }

  const validHex = /^#[\dA-F]{6}$/gi;

  if (!validHex.test(value)) {
    return {
      [key]: undefined,
    };
  }

  const rgb = ss(value.slice(1), 2).map((v) => parseInt(v, 16));

  return {
    [key]: `rgb(${rgb.join(" ")} / ${alpha}%)`,
  };
}

---

Well, the config itself looks like this:

const { styled, config } = createStitches({
  theme: {
    colors: {
      test: "#72aef6",
    },
  },
  utils: {
    hexa: (value: Record<string, string | undefined>) => value,
  },
});

---

Somewhere in your code:

const TestComponent = styled("div", {
  hexa: hexAlphaUtil("color", "$test", 77),
});

---

P.S. Maybe there are type errors somewhere, I'm writing this at night. 😄