Empty custom properties are removed

[brunoabreu]

Tailwind CSS makes use of variables with single whitespace in a technique known as the space toggle trick. For instance, it declares --tw-brightness: ;. Then it is used as follows by a class such as .blur:

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

Unfortunately, stylis detects this as dead code and removes those custom properties. It should work like other CSS processors (clean-css/clean-css#1180; cssnano/cssnano#1350;)

To give a little bit more context, we are using twin.macro and this behavior wasn't a problem because it replaces the whitespace properties like this: --tw-brightness: var(--tw-empty,/*!*/ /*!*/);. Sadly, it significantly degrades Firefox's rendering performance. I've started a discussion here, but our hands are tied. It is not possible to modify twin.macro to retain the whitespace value as it should be, because stylis would simply remove those custom properties.