fresh-jss's Introduction

fresh-jss

Use Deno fresh with jss hooks.

Example

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.

fresh-jss's People

Contributors

Stargazers

Watchers

fresh-jss's Issues

CSS States - hover, active etc.

Hello Xubaiw

First off - thanks for making this package!

I have an issue, that I can not create hover states for my elements.
I can see that you are simply extending the JSS library, which makes sense. So I am a bit confused why the syntax seems to be different or not working.

const useStyles = createUseStyles({ red: { color: "red", "&:hover": { color: "blue", } } });

How am I to go about this? Is it implemented yet?

CSS missing after rehydration

It seems that currently the CSS is only output after initial load. Whenever the page is rehydrated on change, the CSS rules are missing.
@xubaiw can you confirm this is an issue?

Recommend Projects