Quickstart: Solid

1 Create the project

npm create vite@latest css-hooks-playground -- --template solid-ts
cd css-hooks-playground

2 Upgrade to Solid v2

The Vite solid-ts template targets Solid v1, but @css-hooks/solid v4 targets Solid v2. Replace the Solid v1 plugin and packages with their Solid v2 equivalents:

npm uninstall vite-plugin-solid
npm install solid-js@next @solidjs/web@next
npm install -D @solidjs/vite-plugin

Then replace the Solid v1 Vite plugin:

vite.config.ts
 import { defineConfig } from "vite";
-import solid from "vite-plugin-solid";
+import solid from "@solidjs/vite-plugin";

 export default defineConfig({
   plugins: [solid()],
 });

Point jsxImportSource at Solid v2:

tsconfig.app.json
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",

3 Install CSS Hooks

npm install @css-hooks/solid@next remeda

4 Define a hook

Create a module for styling utilities:

src/css.ts
import { createHooks } from "@css-hooks/solid";

export const { on, styleSheet } = createHooks("&:active");

5 Render the generated stylesheet

Render styleSheet() once at the application root:

src/index.tsx
import { render } from "@solidjs/web";

import App from "./App";
import { styleSheet } from "./css";

render(
  () => (
    <>
      <style innerHTML={styleSheet()} />
      <App />
    </>
  ),
  document.getElementById("root")!,
);

6 Apply an override style

Use the registered &:active hook in a component:

src/App.tsx
import { pipe } from "remeda";

import { on } from "./css";

export default function App() {
  return (
    <button
      style={pipe(
        { transition: "transform 75ms" },
        on("&:active", { transform: "scale(0.9)" }),
      )}
    >
      Press me
    </button>
  );
}

Run npm run dev to try it. Continue to Configuration to define more hooks, then see Usage for composition patterns.