Composable variants

[darklight9811]

I've found myself having the need to readd the same variants (padding, margin, etc) through many different components. And since adding them in stitches level creates the style multiple times in css. There should be a tool to easily reuse variants without causing repetition on the stylesheet. Maybe something like this:

All of the examples below are proposals that could be changed through comments

Merging variants between css/components

With this functional programming principle, we could stack composable variants and inject them with the component props

import { css, compose } from "@stitches/react";

const marginVariants = css({
   variants: {
      "1": {
         margin: "$margin",
      },
      /* other sizes */
   }
})

const paddingVariants = css({
   variants: {
      "1": {
         padding: "$margin",
      },
      /* other sizes */
   }
})

const Button = (props) => {
   return <button style={compose(marginVariants, paddingVariants)(props)}>{props.children}</button>
}

Merging pure variants

import { variants, compose } from "@stitches/react";

const margins = variants([
   "1": {
      margin: "$margin",
   },
   /* other values */
])

const paddings = variants([
   "1": {
      padding: "$padding
   },
   /* other values */
])

const Button = (props) => {
   return <button style={compose(margins , paddings )(props)}>{props.children}</button>
}