How to get Stitches variants as values?

[dannytce]

Hello! First of all, thank you for the amazing work you put together.

I am wondering if it's possible somehow to get variants as values from the Stitches CSS. It could be useful for example for auto-populating controls for Storybook.

Let's see the following example:

const buttonCss = css({
  // base styles
  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        color: 'white',
        '&:hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        backgroundColor: 'gainsboro',
        '&:hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
});

I would love to get:

{
  color: ['violet', 'gray']
}

The closest I got so far is:

const $$composers = Symbol.for('sxs.composers')
export const getStitchesVariants = (css) => {
  const { variantProps } = css[$$composers][0]
  return Object.entries(variantProps).reduce((acc, [name, types]) => {
    acc[name] = Object.keys(types)
    return acc
  }, {})
}

Even tho it works, it doesn't feel correct 😅 So I am curious if I am missing anything. Or perhaps this could be a new idea for Stitches? 🤔

Thank you.

[graup]

Ideally the component would expose a variant property. Maybe a feature request.

But you can reorganize your code and do it like this:

type ExtractVariants<T extends Record<string, Record<string, any>>> = {
  [K in keyof T]: (keyof T[K])[]
}
export function getVariants<T extends Record<string, Record<string, any>>>(variants: T): ExtractVariants<T> {
  const keys = Object.keys(variants) as (keyof T)[];
  const map = new Map(keys.map(key => [key, Object.keys(variants[key])]));
  return Object.fromEntries(map) as unknown as ExtractVariants<T>;
}


import React from 'react';
import { styled } from '@stitches/react';

const variants = {
  color: {
    violet: {
      backgroundColor: 'blueviolet',
      color: 'white',
      '&:hover': {
        backgroundColor: 'darkviolet',
      },
    },
    gray: {
      backgroundColor: 'gainsboro',
      '&:hover': {
        backgroundColor: 'lightgray',
      },
    },
  },
};

const Button = styled('button', {
  variants
});

export const variantOptions = getVariants(variants);

export default Button as typeof Button;

Then in Storybook

import Button, { variantOptions } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const WithArgs = ({ ...args }: any) => <Button {...args}>Button</Button>;

WithArgs.argTypes = {
  color: {
    control: {
      type: 'select',
      options: variantOptions.color,
    },
  }
}