Skip to content

Commit ea853de

Browse files
nsaundersmachour
nsaunders
authored and
machour
committed
feat: add css-hooks example
1 parent 83b27f2 commit ea853de

12 files changed

+183
-0
lines changed

‎css-hooks/.eslintrc.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('eslint').Linter.Config} */
2+
module.exports = {
3+
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
4+
};

‎css-hooks/.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
3+
/.cache
4+
/build
5+
/public/build
6+
.env

‎css-hooks/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# CSS Hooks
2+
3+
Hooks bring CSS features to native inline styles, enabling you to target various states such as `:hover`, `:focus`, and `:active`, all without leaving the `style` prop.
4+
5+
## Preview
6+
7+
Open this example on [CodeSandbox](https://codesandbox.com):
8+
9+
[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/tree/main/css-hooks)
10+
11+
## Example
12+
13+
This quick example shows how CSS Hooks can be used to apply `:hover` and `:active` styles on links.
14+
15+
## Related Links
16+
17+
- [Website](https://css-hooks.com)
18+
- [Getting started](https://css-hooks.com/docs/react/getting-started)
19+
- [Explanation: _From CSS madness to CSS Hooks_](https://nsaunders.dev/posts/css-madness-to-hooks)

‎css-hooks/app/css-hooks.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createHooks, recommended } from "@css-hooks/react";
2+
3+
const [css, hooks] = createHooks(recommended);
4+
5+
export default hooks;
6+
export { css }

‎css-hooks/app/root.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { MetaFunction } from "@remix-run/node";
2+
import {
3+
Links,
4+
LiveReload,
5+
Meta,
6+
Outlet,
7+
Scripts,
8+
ScrollRestoration,
9+
} from "@remix-run/react";
10+
import { css } from "./css-hooks";
11+
12+
export const meta: MetaFunction = () => ({
13+
charset: "utf-8",
14+
title: "Remix with CSS Hooks",
15+
viewport: "width=device-width,initial-scale=1",
16+
});
17+
18+
export default function App() {
19+
return (
20+
<html lang="en">
21+
<head>
22+
<Meta />
23+
<Links />
24+
<style dangerouslySetInnerHTML={{ __html: css }} />
25+
</head>
26+
<body>
27+
<Outlet />
28+
<ScrollRestoration />
29+
<Scripts />
30+
<LiveReload />
31+
</body>
32+
</html>
33+
);
34+
}

‎css-hooks/app/routes/_index.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { ComponentPropsWithoutRef } from "react";
2+
import hooks from "../css-hooks";
3+
4+
function A(props: Omit<ComponentPropsWithoutRef<"a">, "style">) {
5+
return (
6+
<a
7+
{...props}
8+
style={hooks({
9+
color: "#00c",
10+
hover: {
11+
color: "#00f",
12+
textDecoration: "underline"
13+
},
14+
active: {
15+
color: "#c00"
16+
}
17+
})} />
18+
);
19+
}
20+
21+
export default function Index() {
22+
return (
23+
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
24+
<h1>Welcome to Remix with CSS Hooks</h1>
25+
<p>
26+
Everyone insists that you
27+
{" "}
28+
<A href="https://stackoverflow.com/questions/1033156/how-can-i-write-ahover-in-inline-css#answer-1033166">
29+
can't write <code>a:hover</code>
30+
</A>
31+
{" "}
32+
in inline styles, but I just did. 😉
33+
</p>
34+
<p>
35+
Learn more at <A href="https://css-hooks.com/">css-hooks.com</A>.
36+
</p>
37+
<p>
38+
Or, for a detailed explanation, read <em><A href="https://nsaunders.dev/posts/css-madness-to-hooks">From CSS madness to CSS Hooks</A></em>.
39+
</p>
40+
</div>
41+
);
42+
}

‎css-hooks/package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"private": true,
3+
"sideEffects": false,
4+
"scripts": {
5+
"build": "remix build",
6+
"dev": "remix dev",
7+
"start": "remix-serve build",
8+
"typecheck": "tsc"
9+
},
10+
"dependencies": {
11+
"@css-hooks/react": "^1.2.1",
12+
"@remix-run/node": "^1.19.3",
13+
"@remix-run/react": "^1.19.3",
14+
"@remix-run/serve": "^1.19.3",
15+
"isbot": "^3.6.5",
16+
"react": "^18.2.0",
17+
"react-dom": "^18.2.0"
18+
},
19+
"devDependencies": {
20+
"@remix-run/dev": "^1.19.3",
21+
"@remix-run/eslint-config": "^1.19.3",
22+
"@types/react": "^18.0.25",
23+
"@types/react-dom": "^18.0.8",
24+
"eslint": "^8.27.0",
25+
"typescript": "^4.8.4"
26+
},
27+
"engines": {
28+
"node": ">=14.0.0"
29+
}
30+
}

‎css-hooks/public/favicon.ico

16.6 KB
Binary file not shown.

‎css-hooks/remix.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/** @type {import('@remix-run/dev').AppConfig} */
2+
module.exports = {
3+
future: {
4+
v2_routeConvention: true,
5+
},
6+
ignoredRouteFiles: ["**/.*"],
7+
// appDirectory: "app",
8+
// assetsBuildDirectory: "public/build",
9+
// publicPath: "/build/",
10+
// serverBuildPath: "build/index.js",
11+
};

‎css-hooks/remix.env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="@remix-run/dev" />
2+
/// <reference types="@remix-run/node" />

‎css-hooks/sandbox.config.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"hardReloadOnChange": true,
3+
"template": "remix",
4+
"container": {
5+
"port": 3000
6+
}
7+
}

‎css-hooks/tsconfig.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
3+
"compilerOptions": {
4+
"lib": ["DOM", "DOM.Iterable", "ES2019"],
5+
"isolatedModules": true,
6+
"esModuleInterop": true,
7+
"jsx": "react-jsx",
8+
"moduleResolution": "node",
9+
"resolveJsonModule": true,
10+
"target": "ES2019",
11+
"strict": true,
12+
"allowJs": true,
13+
"forceConsistentCasingInFileNames": true,
14+
"baseUrl": ".",
15+
"paths": {
16+
"~/*": ["./app/*"]
17+
},
18+
19+
// Remix takes care of building everything in `remix build`.
20+
"noEmit": true
21+
}
22+
}

0 commit comments

Comments
 (0)