Styled Components SSR

index.js

import './style';
import App from './components/app';

let wrapper;

if (process.env.SSR) {
    wrapper = (App) => {
        const { ServerStyleSheet, StyleSheetManager } = require('styled-components');

        const sheet = new ServerStyleSheet();
        const StyleTags = () => sheet.getStyleElement();

        return () => [
            <StyleSheetManager sheet={sheet.instance}>
                <App />
            </StyleSheetManager>,
            <StyleTags />
        ];
    }
} else {
    wrapper = (app) => app;
}

export default wrapper(App);

preact.config.js

/**
 * @param {import('preact-cli').Config} config
 * @param {import('preact-cli').Env} env
 * @param {import('preact-cli').Helpers} helpers
 */
export default (config, env, helpers) => {
    const { rule } = helpers.getLoadersByName(config, 'babel')[0];
    const babelConfig = rule.options;
    babelConfig.plugins.push('babel-plugin-styled-components')

    const { plugin } = helpers.getPluginsByName(config, 'DefinePlugin')[0];
    plugin.definitions['process.env.SSR'] = env.ssr;
}