Feature Request: Stitches Object Type

[joe-bell]

At @monographhq we've recently started exploring the convention of storing our Stitches.js styles in separate .css.ts files (similar to vanilla-extract)

We do this to:

1. Get better control of our design system's exports
   Allowing for styles to be referenced privately/internally
2. Reference Stitches.js objects inside Storybook
   e.g. mapping over variants and defaultVariants to set options for "controls" dynamically

The Problem

Stitches.js offers the CSS type for handling basic styles, but as it stands there's no way to obtain the object syntax type (the argument type for css() or the second argument type for styled) – a combination of the CSS type + handling of variants, defaultVariants and compoundVariants

I attempted using TypeScript's built in Parameters<typeof styled> but had no luck 😢 (it returns never)

Proposed solution

It would be awesome if Stitches could provide a helper type (like CSS for handling the style object type)

In this example I suggest StyleObject, but perhaps Component may make more sense?

// stitches.config.ts
import type * as Stitches from '@stitches/react'
import { createStitches, defaultThemeMap } from '@stitches/react'

const stitchesConfig = createStitches({
  // …config
})

export const { config, styled, css, globalCss, keyframes, getCssText, theme } =
  stitchesConfig

// create type in stitches.config.ts
export type StitchesStyleObject = Stitches.StyleObject<typeof stitchesConfig>

// component.ts
import { styled, StitchesStyleObject } from './stitches.config'

// provides the same inline TypeScript experience as using `styled()`
export const boxConfig: StitchesStyleObject = {
 boxSizing: 'border-box'
}

export const SomeComponent = styled('div', boxConfig) 

If this is a little too much to consider right now, I'd really appreciate any guidance on how to achieve this in the meantime 🙏

---

cc @dknisley @expandrew

[peduarte]

Thanks, makes a lot of sense. We'll consider this internally. @hadihallak do you know if there's a current work around for this, even if it means storying some types product-side? Thanks

[joe-bell]

Been thinking about this some more over the last few days and I don't think this is actually possible in TypeScript (without defining a function for generics) 😢

This may be trickier than I anticipated

[hadihallak]

yeah having a function generic allows us to extract things like variants that we then pass in deeply to type the JSX calls and that kind of type data would get lost if we use a normal type like in the StitchesStyleObject example

[MrKou47]

I meet your problem at this time. When I trying to preview Component with variant, like:

// button.tsx
const Button = styled('button', {
  variants: {
    mode: {
      mode1: {},
      mode2: {}
    }
  }
}

// button.stories.tsx
import { Button } from './button'

export default {
  component: Button,
}

Storybook can't auto generate args, so I should do it manually..

[andrewdoro]

@MrKou47 did you find any solution for auto generating args?

[MrKou47]

@MrKou47 did you find any solution for auto generating args?

Nope. I still do this work manually😂

[andrewdoro]

@MrKou47 #239 (comment) I found this approach, but I can't get it work. Do you have any idea?

[andrewdoro]

it actually works, the problem I had was that I used numeric values for variants options. Those values are not parsed in the storybook controls, unless I add a letter.

 size: {
      "1": {
        borderRadius: "$sm",
        height: "$1",
        px: "$2",
        fontSize: "$sm",
        boxShadow: "$1",
      },
      "2": {
        borderRadius: "$md",
        height: "$5",
        px: "$3",
        fontSize: "$md",
        boxShadow: "$1",
      },
    },