Fallbacks

Fallbacks are a way to provide a fallback value for a property if the property is not supported by the browser. Here's how this works in CSS:

.element {
  width: -webkit-min-content;
  width: min-content;
}

In case the min-content value is not supported, the browser will use the prefixed -webkit-min-content version.

The problem is that we can't use this type of fallback value with inline styles.
In the past, one could hack it like this:

const style = {
  width: '-webkit-min-content; width: min-content',
}

But this was never officially supported and nowadays is not supported by React anymore.

We can however achieve this using CSS variables.
In order to support this, we can use the following CSS:

:root {
  --width-min-content: min-content;
}

@supports not (width: min-content) {
  :root {
    --width-min-content: -webkit-min-content;
  }
}

.element {
  width: var(--width-min-content);
}

Now, since this is very cumbersome to write, this package provides a plugin that can be used to automatically add fallbacks to the style object.