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
320
stars
3
forks
source link
Add CSS Hooks as another CSS option in create-hwy #40
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.
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:
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 passRecord<string, string | number>
as the generic with a comment that the user could usecsstype
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 ofhooks
.cc @nsaunders