deno.land/x/connorlogin

A collection of Deno functions I’ve written for personal projects.

• iso.ts
  • cx
• server.ts
  • serveCss

iso.ts

cx

One-liner for joining CSS class strings together conditionally. All non-empty string arguments are joined with space separators into a single string. Any other argument is ignored.

import { useState } from "preact/hooks";
import { cx } from "https://deno.land/x/connorlogin/iso.ts";

export function App() {
  const [active, setActive] = useState(false);

  return (
    <div class={cx("thing", active && "--active")}>
      {/* ... */}
    </div>
  );
}

server.ts

serveCss

Joins the stylesheets in the dir together to create a single stylesheet, returned as a Response instance. The generated CSS is cached and regenerated whenever the original files are modified.

Having one stylesheet instead of many reduces the number of requests needed to load a page, but it’s annoying to work with one massive stylesheet for bigger projects. This function is just an on-the-fly CSS bundler that simply joins multiple stylesheets into one.

I’ve used this styling strategy in Fresh projects, implemented with a middleware like this:

// routes/_middleware.ts

import type { MiddlewareHandlerContext } from "$fresh/server.ts";
import { serveCss } from "https://deno.land/x/connorlogin/server.ts";

// CSS files go in this directory relative to the project root
const cssDir = "./css";

export function handler(
  req: Request,
  ctx: MiddlewareHandlerContext,
) {
  const url = new URL(req.url);
  if (req.method === "GET" && url.pathname === "/style.css") {
    return await serveCss(cssDir);
  }
  return await ctx.next();
}