Add CSS Hooks as another CSS option in create-hwy

[Samuel J. Cook]

Add CSS Hooks as another CSS option in create-hwy

Website

CSS Hooks: https://css-hooks.com/

Rough plan

We'll need a file that looks something like this:

import { buildHooksSystem, recommended } from "@css-hooks/core";
import type { Properties as CSSProperties } from "csstype";

const createHooks = buildHooksSystem<CSSProperties>();

const [css, hooks] = createHooks({
  ...recommended,
  dark: "@media (prefers-color-scheme: dark)",
});

function CssHooksStyleSheet() {
  return <style dangerouslySetInnerHTML={{ __html: css }} />;
}

export { hooks, CssHooksStyleSheet };

Open questions

Open question whether to include csstype package here or leave that to user. Theoretically, if we do, we should also override global (and arguably do so in all other templates as well). Otherwise we can just pass Record<string, string | number> as the generic with a comment that the user could use csstype instead.

Should probably just do a little tweak to main.tsx (given there is an options-sensitive generator for that file, and it's your main entry point) to show usage and importing of hooks.

---

cc @nsaunders