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