sjc5 / hwy

Hwy is a fullstack web framework for driving a (p)react frontend with a Go backend. Includes end-to-end typesafety, file-based nested UI routing, and much more.
BSD 3-Clause "New" or "Revised" License
317 stars 3 forks source link

Add CSS Hooks as another CSS option in create-hwy #40

Closed sjc5 closed 11 months ago

sjc5 commented 11 months ago

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