Make compound web SSR compatible

[germain-gg]

matrix-hosted is using Next.js and does SSR.

We need to ensure our package works in that environment

[Half-Shot]

We didn't do a whole lot in the end to support this:

// next.config.js
{`
  transpilePackages: [
     '@vector-im/compound-web',
  ]
}

// compound.js -- loaded into our pages
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';
import '@fontsource/inconsolata/400.css';
import '@fontsource/inconsolata/500.css';
import '@fontsource/inconsolata/600.css';
import '@fontsource/inconsolata/700.css';
import '@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css';
import '@vector-im/compound-web/dist/style.css';
import './css/compound.scss';

// ./css/compound.scss
body.cpd-theme-light {
    font-family: var(--cpd-font-family-sans), sans-serif;
    code,
    pre {
        font-family: var(--cpd-font-family-mono), monospace;
    }
}

I think that was literally it?

[germain-gg]

Perfect, sounds like this project can now consume Compound. Closing this issue 👍 Thank you for sorting it out