Bring in CSS Hooks.

nsaunders-archived · Oct 17, 2023 · 5993844 · 5993844
1 parent 921b815
commit 5993844
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@css-hooks/react": "^1.0.2",
     "@fontsource/lato": "^5.0.5",
     "@fontsource/montserrat": "^5.0.5",
     "@tsconfig/node20": "^1.0.2",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import Footer from "@/components/Footer";
 import Surface from "@/components/Surface";
 import exhausted from "@/utils/exhausted";
 import { title, description } from "@/meta";
+import { css } from "@/utils/css-hooks";
 
 const lato = Lato({
   weight: ["400", "700"],
@@ -28,6 +29,7 @@ export default function RootLayout({
         {({ style, ...restProps }) =>
           exhausted(restProps) && (
             <body className={lato.className} style={{ ...style, margin: 0 }}>
+              <style>{css}</style>
               <Providers>
                 <Header />
                 {children}

diff --git a/src/components/Anchor.tsx b/src/components/Anchor.tsx
@@ -1,26 +1,16 @@
-"use client";
-
 import {
   ComponentProps,
   ComponentType,
   CSSProperties,
-  FocusEvent,
-  MouseEvent,
   ReactElement,
   forwardRef,
 } from "react";
 import { O, U } from "ts-toolbelt";
-import useHover from "@/hooks/useHover";
-import useFocus from "@/hooks/useFocus";
+import hooks from "@/utils/css-hooks";
 
 export type ForwardProps = {
   style?: CSSProperties;
   tabIndex?: -1;
-  onClick?: (e: MouseEvent) => void;
-  onFocus?: (e: FocusEvent) => void;
-  onBlur?: () => void;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
 };
 
 export type Props = U.Strict<
@@ -35,32 +25,31 @@ export type Props = U.Strict<
 
 export default forwardRef<HTMLAnchorElement, O.Omit<Props, "ref">>(
   function Anchor({ children, disabled, selected, style, ...restProps }, ref) {
-    const [focus, { onFocus, onBlur }] = useFocus();
-    const [hover, { onMouseEnter, onMouseLeave }] = useHover();
-
     const forwardProps: ForwardProps = {
-      onClick(e) {
-        if (disabled) {
-          e.preventDefault();
-        }
-      },
-      onFocus,
-      onBlur,
-      onMouseEnter,
-      onMouseLeave,
       style: {
-        textDecoration: hover && !focus ? "underline" : "none",
-        outlineColor: "transparent",
-        outlineWidth: 2,
-        outlineStyle: "dotted",
-        color: hover ? "var(--fg-link-bright)" : "var(--fg-link)",
-        boxShadow:
-          focus && !disabled
-            ? "0 0 0 2px var(--bg), 0 0 0 4px var(--blue-500)"
-            : undefined,
-        borderRadius: 2,
-        ...(selected && { color: "var(--blue-100)" }),
-        ...(disabled && { cursor: "default", textDecoration: "none" }),
+        ...hooks({
+          textDecoration: "none",
+          outlineColor: "transparent",
+          outlineWidth: 2,
+          outlineStyle: "dotted",
+          color: "var(--fg-link)",
+          borderRadius: 2,
+          ...(disabled
+            ? {
+                cursor: "default",
+              }
+            : {
+                hover: {
+                  color: "var(--fg-link-bright)",
+                  textDecoration: "underline",
+                },
+                focusVisible: {
+                  boxShadow: "0 0 0 2px var(--bg), 0 0 0 4px var(--blue-500)",
+                  textDecoration: "none",
+                },
+              }),
+          ...(selected && { color: "var(--blue-100)" }),
+        }),
         ...style,
       },
       tabIndex: disabled ? -1 : undefined,

diff --git a/src/utils/css-hooks.ts b/src/utils/css-hooks.ts
@@ -0,0 +1,7 @@
+import { createHooks, recommended } from "@css-hooks/react";
+
+const [css, hooks] = createHooks(recommended);
+
+export default hooks;
+
+export { css };