testing perfomance

[darklight9811]

I've been testing some things to see how well stitches would perform, I couldn't give myself enough time to understand the code so would like to ask the developers. When we have the same variant declared twice, do they load twice into the stylesheet? Or do they know that they were already declared and prevent being thrown twice into the memory?

Ex

import { css } from "@stitches/react"

const c1 = css({
  variants: {
    variant: {
      value: {
        margin: 0,
      }
    }
  }
})

const c2 = css({
  variants: {
    variant: {
      value: {
        margin: 0,
      }
    }
  }
})


export function App() {
  return (
    <>
      <div class={c1({variant: "value"})} />
      <div class={c2({variant: "value"})} />
    </>
  )
}

When I tried to debug, I couldn't find where the style was being stored in memory to see it if was duplicated.

[peduarte]

Hey, you can get access to the CSS by using getCssText. If you set up a next.js product, its very straight forward and you can do SSR. https://stitches.dev/blog/using-nextjs-with-stitches

But in short, based on your example above, it will use the same CSS rule, as they're hashed by style object.

[darklight9811]

But do it override the style value or check if the hash is already present in the stylesheet?

[peduarte]

It wont inject if its already there. *Only when HMR'ing in dev mode