Performance issue with --tw-empty

[brunoabreu]

We are investigating a performance issue in Firefox with our app, which uses Next.js 13 (app router) + emotion with twin.macro.

We noticed that the default value for empty variables inserted by twin.macro (var(--tw-empty,/*!*/ /*!*/)) is causing a significant impact when the browser needs to repaint the layout. Using the default value from Tailwind, a blank space, the difference is dramatic:

var(--tw-empty,/*!*/ /*!*/)	blank space
459ms	117ms

Firefox seems to benefit the most, but a performance gain is also noticeable in Google Chrome.

var(--tw-empty,/*!*/ /*!*/)	blank space
88ms	56ms

For now, we have created a stylis plugin to replace var(--tw-empty,/*!*/ /*!*/) with a blank space, undoing what is done by twin.macro. Like this:

import { GlobalStyles as TwinGlobalStyles } from 'twin.macro'
import { CacheProvider } from '@emotion/react'
import createCache, { type StylisPlugin } from '@emotion/cache'

const TW_EMPTY = 'var(--tw-empty,/*!*/ /*!*/)'

function noTwEmptyPlugin(...[element]: Parameters<StylisPlugin>) {
  if (element.type === 'decl' && element.children === TW_EMPTY) {
    element.value = element.value.replace(TW_EMPTY, ' ')
  }
}

const cache = createCache({ key: 'notwempty', stylisPlugins: [noTwEmptyPlugin] })

export function GlobalStyles() {
  return <CacheProvider value={cache}><TwinGlobalStyles /></CacheProvider>
}

We also tried applying a patch using yarn to prevent this substitution that twin.macro makes for --tw-empty, but it is not so simple. Unfortunately, emotion (through stylis), removes the variables believing they are dead code.

The best solution probably involves modifying both twin.macro and stylis. But it would be helpful if twin.macro provided a configuration option to leave the blank space instead of making the substitution.

[ben-rogerson]

Hey there

I remember coming up with the /*!*/ /*!*/ variable fallback workaround to get around the "dead code" shaving and didn't realise there was a performance hit when using it.

If twin has a new option added to remove the space then the values still aren't read correctly and we end up with styles like this (from the vite-emotion-typescript example:

Do you know of a way to get Emotion to read those empty values? I haven't been able to find a suitable replacement.

[brunoabreu]

Hey Ben!

The idea is to stop using the --tw-empty var, and just leave the original whitespace. With our stylis plugin it looks like this:

But sadly, if twin.macro outputs CSS like that, stylis will detect these properties as dead code and remove them, which also breaks Tailwind.

I've opened an issue in the stylis repository. Once it gets fixed, we can add an option to make twin.macro stop replacing the whitespace values for these custom properties.