I don't have any experience in using Capacitor in an SSR environment. On this line the document is also being called. Are you saying that's fine like that?

In my opinion, yes. SSR loads only js scripts for web (Node JS server) and not related code of Android and iOS. Other extensions for React, Vue, etc. that uses window.* handles code sequences in the same way to distinguish between SSR environment and non-SSR.

But it's still important to call setProperty('*') at some point in time. Because that's where the fallback is set. Which is especially important for iOS and web. So when to call these?

If you want to still call setProperty() then we need to check if document exists inside setProperty /src/index.ts:

function setProperty(position: 'top' | 'left' | 'bottom' | 'right') {
  if (typeof window === 'undefined') return

  document /* is window.document */
    .querySelector<HTMLElement>(':root')
    ?.style.setProperty(
      `--safe-area-inset-${position}`,
      `max(env(safe-area-inset-${position}), 0px)`,
    );
}

or

function setProperty(position: 'top' | 'left' | 'bottom' | 'right') {
  if (typeof window !== 'undefined' && 'document' in window) {
    document /* is window.document */
      .querySelector<HTMLElement>(':root')
      ?.style.setProperty(
        `--safe-area-inset-${position}`,
        `max(env(safe-area-inset-${position}), 0px)`,
      );
  }
}

Yeah, I can implement such a check, I understand that. But it would only prevent the error being thrown. It wouldn't solve the actual problem. The actual problem is that those fallback CSS variables should be injected at some point in time - the earlier the better. Since Capacitor in combination with SSR is a not so usual use case, I have no idea where to inject the variables instead. I don't think there is a universal hydration method or document ready listener

I understand, but it is not possible to set this CSS variables on SSR (server side) because there is no window. On client side (web), the code is executed (because of presence of window) and the CSS variables are set. Therefore it should work anyway. I have per default set the CSS variables, that are overwritten by @capacitor-community/safe-area on the client side. It works!

 :root {
  --safe-area-inset-bottom: 0;
  --safe-area-inset-left: 0;
  --safe-area-inset-right: 0;
  --safe-area-inset-top: 0;
}

Opened a PR that should solve your problem #19

By the way, you probably shouldn't be doing this:

 :root {
  --safe-area-inset-bottom: 0;
}

Because on iOS and web, you now lost the fallback to the natively supported env(safe-area-inset-*) CSS variables. Instead, you should be doing something like this:

 :root {
  --safe-area-inset-bottom: max(env(safe-area-inset-bottom), 0px);
}