jacobrask

import React from 'react';

// Composes any number of props transforms and applies them in a HOC.
const transform = (...transforms) =>
  WrappedComponent =>
    props =>
      <WrappedComponent {...transforms.reduce((ps, t) => t(ps), props)} />;

// Example reusable transforms.
const addClass = className => props => ({ ...props, className });

jacobrask

/**
 * PoC using recursive proxies to maintain a typed interface for your CSS variable themes.
 *
 * See https://www.joshwcomeau.com/css/css-variables-for-react-devs/ for an excellent intro to CSS variables.
 *
 * Using CSS variables as plain strings in TypeScript is not great though.
 * It's prone to typos, difficult to refactor and you can't easily deprecate properties or add aliases.
 * One solution is to create a JavaScript object of your theme, with the CSS variable as the value, but
 * if users are already downloading your theme as CSS variables, why make them download it again as a JS object?
 */

jacobrask

import enhance from "@enhance/ssr";
import postProcess from "next/dist/server/post-process.js";
import MyButton from "./src/elements/my-button.mjs";
import MyIcon from "./src/elements/my-icon.mjs";
import styleTransform from "@enhance/enhance-style-transform";

const _postProcessHTML = postProcess.postProcessHTML;
postProcess.postProcessHTML = async function postProcessHTML(
  pathname,
  content,