[satvikpendem]

By having a style guide with variants, StitchesJS pioneered this but there are others like Vanilla-Extract. With TypeScript, you can then enforce that only a certain variant can be used with a certain component at compile time, basically making sure that your design style guide gets mapped 1:1 to your code.

https://stitches.dev/

[dmitriid]

Hm. I see the same CSS-in-JS with a sprinkle of string interpolation for some variables :)

I may run into the same issues as the other CSS-in-JS solutions (I only encountered stitch once, and not for a long period of time)

[satvikpendem]

Unlike other CSS-in-JS though, the way it's made, via object properties, enforces compliance to the design system. In things like styled-components, it doesn't.

Doubly so when using TypeScript, as with Vanilla-Extract: https://vanilla-extract.style

[dmitriid]

> the way it's made, via object properties, enforces compliance to the design system.

The link literally has this:

``` export const className = style({ display: 'flex', flexDirection: 'column', selectors: { '&:nth-child(2n)': { background: 'aliceblue' } }, '@media': { 'screen and (min-width: 768px)': { flexDirection: 'row' } } }); ```

Which is indistinguishable from any other CSS-in-JS which has hundreds of these one-off things scattered everywhere. With a theme somewhere exposing another hundred or so variables of varing quality. And all these solutions basically converge on Tailwind (or other utility-first CSS approaches):

``` export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large }); ```

is nothing more than `bg-brand color-white p-4`

But TypeScript support is definitely nice.

[satvikpendem]

Sorry, could you reformat your code? I can't read this well.

[dmitriid]

Sorry, I keep forgetting that HN is weird with line breaks

Re-typing/re-quoting:

--------

The link literally has this:

    export const className = style({
      display: 'flex',
      flexDirection: 'column',
      selectors: {
        '&:nth-child(2n)': {
          background: 'aliceblue'
        }
      },
      '@media': {
        'screen and (min-width: 768px)': {
          flexDirection: 'row'
        }
      }
    });

Which is indistinguishable from any other CSS-in-JS which has hundreds of these one-off things scattered everywhere. With a theme somewhere exposing another hundred or so variables of varing quality. And all these solutions basically converge on Tailwind (or other utility-first CSS approaches):

    export const hero = style({
      backgroundColor: vars.color.brandd,
      color: vars.color.white,
      padding: vars.space.large
    });

is nothing more than `bg-brand color-white p-4`

But TypeScript support is definitely nice.

----

[satvikpendem]

This video from Stitches shows their API well, which VE copied with their Recipes plugin, code example below (timestamped to 31:07 in case the link doesn't work) [0].

    /// Define variants for a specific component, such as a button
    export const button = recipe({
      base: {
        borderRadius: 6
      },
    
      variants: {
        color: {
          neutral: { background: 'whitesmoke' },
          brand: { background: 'blueviolet' },
          accent: { background: 'slateblue' }
        },
        size: {
          small: { padding: 12 },
          medium: { padding: 16 },
          large: { padding: 24 }
        },
        rounded: {
          true: { borderRadius: 999 }
        }
      },
    
      // Applied when multiple variants are set at once
      compoundVariants: [
        {
          variants: {
            color: 'neutral',
            size: 'large'
          },
          style: {
            background: 'ghostwhite'
          }
        }
      ],
    
      defaultVariants: {
        color: 'accent',
        size: 'medium'
      }
    });

    /// Use in code
    <button className={
      button({
        color: 'accent',
        size: 'large',
        rounded: true
      })
    }>
      Hello world
    </button>

Basically, unlike other CSS-in-JS libraries, you can encode your design system into something called variants, then you use them by calling the function `button()` to generate a class name.

Notice how `button()` takes in certain properties and only those properties with their corresponding values (enforced by TypeScript). If you try to put in `button({ color2: 'testColor', ...})`, TS won't compile.

In this way, you can take the design team's ButtonSmall, ButtonLarge, NeutralButtonLarge etc and codify them into TypeScript such that you literally can't make a mistake. You simply can't do that in Tailwind, unless you use some outside plugin I assume.

(Note that VE also has a Tailwind-like atomic CSS API called Sprinkles, but since I don't like Tailwind I don't use this either).

[0] https://youtu.be/Gw28VgyKGkw?t=1867