#```js

1 messages ยท Page 1 of 1 (latest)

opal saffron
hollow gate
#

i- why??

dusk sable
#

inb4 someone benchmarks themes this way

real shell
#

Would be hard to implement support for nesting

dusk sable
#

true

real shell
#

Easy to steal regex from clientTheme to get all selectors in a file, then just loop over every selector

torpid thorn
#

my code sucks but it works :)

function benchmarkSelectors(cssString) {
  function extractSelectors(cssString) {
    cssString = cssString.replace(/\/\*[\s\S]*?\*\//g, '') // remove comments

    // remove nested brackets
    let result = ''
    let depth = 0
    for (let char of cssString) {
      if (char === '{') {
        depth++
      } else if (char === '}') {
        depth--
      } else if (depth === 0) {
        result += char
      }
    }
    cssString = result

    let selectors = cssString
      .split(/,(?![^(]*\))|[\n\r]+/) // split by commas or newline
      .map((s) => s.trim().replace(/::(?:before|after)/, '')) // trim pseudo-elements
      .filter(Boolean) // remove empty strings

    return selectors
  }

  const benchmarkSelector = (selector) => {
    const start = performance.now()
    let matches = 0
    for (let i = 0; i < 1000; i++) {
      matches = document.querySelectorAll(selector).length
    }
    return [(performance.now() - start) / 1000, matches]
  }

  return extractSelectors(cssString)
    .map((selector) => {
      try {
        const [time, matches] = benchmarkSelector(selector)
        return { selector, time, matches }
      } catch (error) {
        console.error(
          `Error benchmarking "${selector}": ${error.message}`
        )
        return null
      }
    })
    .filter(Boolean)
    .sort((a, b) => b.time - a.time)
    .map(
      ({ selector, time, matches }) =>
        `"${selector}",${time.toFixed(6)},${matches}`
    )
    .join('\n')
    .replace(/^/, 'Selector,Time (ms),Matches\n')
}