Use Deno fresh with jss hooks.
First add the registry to your project:
// utils/registry.ts
import { createRegistry } from "https://deno.land/x/fresh-jss/mod.ts";
const { registry, createUseStyles } = createRegistry();
export { registry, createUseStyles }Then use it in your routes, islands and components:
// routes/index.tsx
/** @jsx h */
import { h } from "preact";
import { createUseStyles } from "../utils/registry.ts";
const useStyles = createUseStyles({
"red": { color: "red" }
});
export default function Home() {
const { classes } = useStyles();
return (
<p className={classes.red}>Red text here</p>
);
}Finally add the registry to page template to enable SSR:
// routes/_app.tsx
/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "preact";
import { registry } from "../utils/registry.ts";
import { Head } from "$fresh/runtime.ts";
import { AppProps } from "$fresh/server.ts";
export default function App(props: AppProps) {
return (
<>
<Head>
<style>{ registry.toString() }</style>
</Head>
<props.Component />
</>
);
}See example directory for details.