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)
Did't find a resonable benchmark but make a little comparison with emotion.js:
source code:
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)