Allow applying other CSS classes

[hmbrg]

Currently, stitches doesn't allow applying CSS classes using the styles object syntax. CSS classes could then be applied to variants and overwrite base classes. This would also allow integrating CSS frameworks like Tailwind.

The syntax could look something like this:

const Button = styled('button', {
  apply: 'foo bar',

  variants: {
    color: {
      violet: {
	apply: 'baz hello',
        remove: 'foo'
      },
      gray: {
        apply: "hello",
      },
    },
  },
});

The keyword apply applies any number of CSS classes to the Component. Inside variant properties, we can apply additional classes but also remove applied classes by listing them under the remove keyword.

Is this something that would be considered to be added to Stitches?
If so, I would happily create a PR.

[jjenzz]

Thanks @hmbrg!

My two cents is that I'm not sure this is likely to be considered unfortunately because Stitches is intended to be as close as possible to zero runtime (and the team is also considering build time static extraction), but the proposed API looks to be runtime dependent.

If you already have a bunch of classes though, I'm not sure why you need stitches at all? Something like this would be less overhead:

const variants = {
  color: {
    undefined: 'foo bar',
    violet: 'baz hello',
    gray: 'hello',
  } 
};

const Button = ({ color }) => <button className={variants.color[color]} />