Access CSS property value from util about stitches-utils

[fnky]

After thinking about this a bit, I think functions would be the better solution to this and that is also what I ended up doing in my project. The added complexity of this feature would probably not add the extra value that initially thought.

[fnky]

@peduarte @hauptrolle Thanks! I even have polished as a dependency, not sure why I didn't use it for this.

I am going to close this issue, as I think I've found a solution to my issue which I think would work for other people, too.

[hauptrolle]

Hey @fnky 👋

thank you for raising this issue.

I think it is not possible to access the background of the current element. Please correct me if I am wrong @peduarte

From my perspective, the last approach with a simple function looks the best and could be implemented quite easily.

const style = css({
  backgroundColor: bgOpacity('gray-800', 75)
})

[peduarte]

I think it is not possible to access the background of the current element.

Correct. It's not possible, currently. Util functions are pure to prevent unexpected side effects. But there's no reason we cant consider this if it's useful 😄

Another solution would be to use functions for this: (using the bgOpacity)

That's what I'd do 👍

[hauptrolle]

Thank you for your fast feedback @peduarte 🙏

@fnky Do you want to make a PR to add this new util to this library to share it with other stitches users? ☺️

[fnky]

@hauptrolle I am still working on it, but at the moment my bgOpacity function looks like this:

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

const hasAlpha = (color: string) => {
  return (
    color.startsWith("rgba(") ||
    color.startsWith("hsla(") ||
    (color.startsWith("#") && color.length === 9) ||
    (color.startsWith("#") && color.length === 5)
  );
};

const toRgba = (
  color: string
): [r: number, g: number, b: number, a?: number] => {
  const [r, g, b, a] = createColor(color).rgb().array();
  return [r, g, b, a === undefined && hasAlpha(color) ? 1 : a];
};

const withAlphaVariable = ({
  color,
  property,
  alpha,
}: {
  color: string;
  property: string;
  alpha: number;
}) => {
  try {
    const [r, g, b, a] = toRgba(color);

    if (a !== undefined) {
      return { [property]: color };
    }

    return {
      [property]: [color, `rgba(${r}, ${g}, ${b}, ${alpha / 100})`],
    };
  } catch (error) {
    return {
      [property]: color,
    };
  }
};

type BackgroundColor = keyof typeof config.theme.backgroundColor;
export const bgOpacity = (bg: BackgroundColor, alpha: number) => {
  return withAlphaVariable({
    color: config.theme.backgroundColor[bg],
    alpha,
    property: "backgroundColor",
  });
};

// Usage:

const style = css({
  ...bgOpacity('gray-800', 75)
})

Which is uses some functions from Tailwind's source code (withTransparency) to achieve the same effect as Tailwind. Not perfect, but works well for my current use-case.

I also use this with @stitches/tailwind, but afaik it is not fully supported but works well enough for my small project.

One could possibly write their own createConfig function which provides the functionality that this issue describes, but I haven't yet looked into how difficult that will be :)

[peduarte]

You can delegate some stuff to polished as well :)

It just returns CSS!

[hauptrolle]

As @peduarte says, I think you can just use polished rgba function to convert any color to an rgba value.