sjc5 / hwy

Hwy is a minimalist, Go-based Next.js alternative with nested routing. Works with React or Preact.

Home Page:https://hwy.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add CSS Hooks as another CSS option in create-hwy

sjc5 opened this issue · comments

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