Variants with css helper?

[martinklepsch]

Hello!

Is it possible to specify variants when using the css helper function? The docs say the css function takes a styleObject but it's not quite clear whether that also applies the function returned by css?

The Variants documentation doesn't touch on css at all.

I played around a bit but couldn't get it to work so I'm cross-checking here if it is supported.

Thanks for the cool library! 🙌

[peduarte]

Yeah, it's possible. We havent documented the core API yet, but it works like this:

const button = css({
  variants: {
    color: {
      red: {  color: 'red' },
      blue: { color: 'blue' }
    }
  }
})

then:

<button className={button({ color: 'red' })} />

[dungle-scrubs]

Thanks for that @peduarte. I'm playing around with this in a slightly different way, and am getting the console warning:

React does not recognize the 'purpleBackground' prop on a DOM element.

...when I pass in the variant as a prop.

The idea (which is contrived for demonstration purposes) is to build a package that exports a Stitches Button component, where I know that all projects will need the same basic styles, but the variants can be defined within each project.

For example:

/**
 * Component within '@some-organization/design-system'
 * It has some basic opinionated styles meant to exist for all projects.
 * In this case, I'd like to defined 'fontWeight: bold' once.
*/
import { styled, css } from '../somewhere/stitches.config';
import _merge from 'lodash.merge';

const ButtonStyled = styled('button');
const baseCss = {
  fontWeight: 'bold',
};

export const Button = (props) => {
  const { children, css: cssProp, ...props } = props;

  // This is so variants can be defined outside, per-project.
  //
  // It assumes all additional props act as Stitches variants,
  // they could be spread onto the styled component, like normal.
  // However, they are making it into the DOM, therefore the warning.
  const finalCss = css(_merge(baseCss, cssProp))(props);

  return (
    <ButtonStyled className={finalCss} {...props}>
      {children}
    </ButtonStyled>
  );
};

/**
 * Project-specific component
*/
import { Button as ButtonBase } from '@some-organization/design-system';

const css = {
  // Project styles
  border: '2px solid darkblue',

  // Define variants here because they only apply to this project
  variants: {
    purpleBackground: {
      true: {
        backgroundColor: 'purple',
      },
    },
  },
};

export const Button = (props) => {
  const { children, purpleBackground } = props;

  return (
    <ButtonBase css={css} purpleBackground={purpleBackground}>
      {children}
    </ButtonBase>
  );
};

/**
 * Usage
*/
<Button>I am a button!</Button>
<Button purpleBackground={true}>I am a purple button!</Button>

Looking through the source code, I don't yet understand how this warning is avoided normally when passing variants in as props to a styled component.

For me, the real use-case is exporting a Stitches Button component with logic from react-aria. I want the button logic to be defined one time in the package while variants will vary from project to project. It's technically working, but the console warning bugs me.

Or... am I overcomplicating this idea?

Thanks