*preact-cli-plugin-styled-ssr.md

preact-cli-plugin-styled-ssr

SSR/Prerendering support for styled-components in Preact CLI.

Inlines extracted styles for your app into the HTML automatically, for all routes.

Installation & Usage

Install: npm i -D gist:e5c5de7cdbf

... then add to your preact.config.js:

export default {
  plugins: [
    'preact-cli-plugin-styled-ssr'
  ]
};

or via manual configuration

import styledSsr from 'preact-cli-plugin-styled-ssr';

export default function (config, env, helpers) {
  styledSsr(config, env);
}

package.json

{
  "name": "preact-cli-plugin-styled-ssr",
  "description": "SSR/Prerendering support for styled-components in Preact CLI",
  "version": "0.1.0",
  "author": "Jason Miller <jason@developit.ca>",
  "main": "preact-cli-plugin-styled-ssr.js",
  "repository": "gist:e5c5de7cdbf",
  "homepage": "https://gist.github.com/e5c5de7cdbfd36da0f0dff7e4c2bef5f",
  "scripts": { "prepack": "mv *preact-cli-plugin-styled-ssr.md README.md", "postpack": "mv README.md *preact-cli-plugin-styled-ssr.md" },
  "license": "Apache-2.0"
}

preact-cli-plugin-styled-ssr.js

const path = require('path');

module.exports = function(config, env) {
  if (env.ssr) {
    const aliases = config.resolve.alias;
    alias['preact-cli-entrypoint-scp'] = alias['preact-cli-entrypoint'];
    alias['preact-cli-entrypoint'] = path.resolve(__dirname, 'proxy-entry.js');
  }
}

proxy-entry.js

const { h } = require('preact');
const { ServerStyleSheet, StyleSheetManager } = require("styled-components");
const app = require('preact-cli-entrypoint-scp');

module.exports = function() {
  const sheet = new ServerStyleSheet();
  return [
    h(StyleSheetManager, { sheet: sheet.instance },
      h(app && app.default || app, props)
    ),
    h(() => sheet.getStyleElement())
  ];
};