[Suggestion] Maybe add the comparison and benchmark with other css frameworks ?

[jasondg]

No description provided.

[IanDxSSXX]

Did't find a resonable benchmark but make a little comparison with emotion.js:

source code:

import { css } from '@iandx/easy-css'
import { css as emotionCss } from "@emotion/css"

function simplePerformanceTest(tag: string, easyFunc: (i: number) => any, emotionFunc: (i: number) => any) {
  console.log(`[----${tag}----]`)
  for (const round of [10, 100, 1000, 10000]) {
    console.log(`----${round}----`)
    console.time(`easy-css`)
    for (let i = 0; i < round; i++) {
      easyFunc(i)
    }
    console.timeEnd(`easy-css`)
    console.time(`emotion`)
    for (let i = 0; i < round; i++) {
      emotionFunc(i)
    }
    console.timeEnd(`emotion`)
  }
  console.log("")
}

// pre-rendered for easy-css
simplePerformanceTest(
  "reuse",
  () => {
    css`
      color: red;
      font-weight: bold;
      display: flex;
    `
  },
  () => {
    emotionCss`
      color: red;
      font-weight: bold;
      display: flex;
    `
  }
)

simplePerformanceTest(
  "new",
  i => {
    css`
      color: red;
      font-weight: bold;
      display: flex;
      font-size: ${i}px;
    `
  },
  i => {
    emotionCss`
      color: red;
      font-weight: bold;
      display: flex;
      font-size: ${i}px;
    `
  }
)

Result:

So in the "reuse" part, because that the css string is static, so with easy-css's pre-parsing tech, it costs almost nothing whatever the number of the round is. And in the "new" part, for that everytime the index "i" is new, there's no way to statically analyze it in build time, however as you can see the "dynamic" runtime cost is way lower than emotion. (notice that emotion stucks when the round is 10,000)

[jasondg]

Maybe a quick demo? Like [this one](https://codesandbox.io/s/css-in-js-comparison-forked-tqlg1?file=/src/App.js

mui/material-ui#22342

[IanDxSSXX]

Demo here
Only implement runtime easy-css, because static pre-parsed one is the same with pure css therotically.
Here's the result
First render:

Render multiple times: