hauptrolle / stitches-utils Goto Github PK

In the next release, the util API will change to:

utils: {
  mx: (value, config) => ({})
}

PR: stitchesjs/stitches#209

Working with @styled/tailwind, I noticed a missing util equivalent for Tailwind's Background Opacity. Trying to implement it myself, I found that this was not supported.

In order to implement this feature, you would need to be able to read the current value of backgroundColor property and return a new backgroundColor property.

Consider this example, which is a psuedo-API for defining utils:

const utils = {
  // sets a background color
  bg: (value) => ({ backgroundColor: value });
  bgOpacity: (value, _config, css) => {
    // Throw error if the backgroundColor hasn't been defined.
    if (css.backgroundColor === undefined) {
      throw new Error("Using bgOpacity requires a background color to be set");
    }

    // Access calculated CSS properties
    const parsedColor = parseCssColor(css.backgroundColor);
    const cssColorWithOpacity = formatCssColor(parsedColor, value);

    // Overwrite the backgroundColor
    return { backgroundColor: cssColorWithOpacity };
  }
}

You could use multiple utils in the same style to "compose" multiple operations:

const example = css({
  bg: 'red', // sets backgroundColor to 'red'
  bgOpacity: 75 // sets backgroundColor to red with opacity 75
  bgTint: 0.5 // sets backgroundColor to tinted red with opacity 75
  bgOpacity: 100 // sets backgroundColor to tinted red with opacity 100
});

One question I'm yet to figure out is when these utilities are called to allow accessing "calculated" properties.

Alternative solutions

An alternative is to define colors in tokens:

{
  tokens: {
    colors: {
      $gray800_75: { backgroundColor: "rgba(150, 150, 150, 0.75)" }
    }
  }
}

Or simply use it inline with your style, similar to the above example. But these won't work well with tokens and theme.

Another solution would be to use functions for this:

import { config } from './styles';

const bgOpacity = (bg, opacity) => {
  const hex = config.theme.colors[bg];
  const [r, g, b] = hexToRgb(hex);
  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
};

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

Add & setup eslint to enforce some coding standards.

Add all-contributors to show contributors in readme

Hey @hauptrolle thanks for this library, this is really useful!

What do you think of adding a compose function (or something with a better name 😅) to create new utils based on specific CSS properties?

Was thinking something like:

function compose(...properties: (keyof CSSStyleDeclaration)[]) {
    return (config: never) => (value: string) => properties.reduce((final, cssProp) => {
        return {
            ...final,
            [cssProp]: value
        }
    }, {});
}

which would then be used like:

export const { styled, css } = createStyled({
  utils: {
    size: compose('width','height'),
  },
});

Do you think this would make sense to include in this library?

If so, would you prefer to use an array as args or just spread the args like this example?

It would be great if utils could be typed against the tokens.

Currently, it only displays the valid CSS Properties:

We have an issue opened in Stitches about improving this (stitchesjs/stitches#129), so we may need to wait. But something to keep in mind