From ea853de06aeab22c3833326eecfb4aa9b95e1db4 Mon Sep 17 00:00:00 2001 From: Nick Saunders Date: Mon, 27 Nov 2023 17:35:28 -0700 Subject: [PATCH] feat: add `css-hooks` example --- css-hooks/.eslintrc.js | 4 +++ css-hooks/.gitignore | 6 +++++ css-hooks/README.md | 19 +++++++++++++++ css-hooks/app/css-hooks.ts | 6 +++++ css-hooks/app/root.tsx | 34 ++++++++++++++++++++++++++ css-hooks/app/routes/_index.tsx | 42 ++++++++++++++++++++++++++++++++ css-hooks/package.json | 30 +++++++++++++++++++++++ css-hooks/public/favicon.ico | Bin 0 -> 16958 bytes css-hooks/remix.config.js | 11 +++++++++ css-hooks/remix.env.d.ts | 2 ++ css-hooks/sandbox.config.json | 7 ++++++ css-hooks/tsconfig.json | 22 +++++++++++++++++ 12 files changed, 183 insertions(+) create mode 100644 css-hooks/.eslintrc.js create mode 100644 css-hooks/.gitignore create mode 100644 css-hooks/README.md create mode 100644 css-hooks/app/css-hooks.ts create mode 100644 css-hooks/app/root.tsx create mode 100644 css-hooks/app/routes/_index.tsx create mode 100644 css-hooks/package.json create mode 100644 css-hooks/public/favicon.ico create mode 100644 css-hooks/remix.config.js create mode 100644 css-hooks/remix.env.d.ts create mode 100644 css-hooks/sandbox.config.json create mode 100644 css-hooks/tsconfig.json diff --git a/css-hooks/.eslintrc.js b/css-hooks/.eslintrc.js new file mode 100644 index 000000000..2061cd226 --- /dev/null +++ b/css-hooks/.eslintrc.js @@ -0,0 +1,4 @@ +/** @type {import('eslint').Linter.Config} */ +module.exports = { + extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"], +}; diff --git a/css-hooks/.gitignore b/css-hooks/.gitignore new file mode 100644 index 000000000..3f7bf98da --- /dev/null +++ b/css-hooks/.gitignore @@ -0,0 +1,6 @@ +node_modules + +/.cache +/build +/public/build +.env diff --git a/css-hooks/README.md b/css-hooks/README.md new file mode 100644 index 000000000..5437f8156 --- /dev/null +++ b/css-hooks/README.md @@ -0,0 +1,19 @@ +# CSS Hooks + +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. + +## Preview + +Open this example on [CodeSandbox](https://codesandbox.com): + +[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/tree/main/css-hooks) + +## Example + +This quick example shows how CSS Hooks can be used to apply `:hover` and `:active` styles on links. + +## Related Links + +- [Website](https://css-hooks.com) +- [Getting started](https://css-hooks.com/docs/react/getting-started) +- [Explanation: _From CSS madness to CSS Hooks_](https://nsaunders.dev/posts/css-madness-to-hooks) \ No newline at end of file diff --git a/css-hooks/app/css-hooks.ts b/css-hooks/app/css-hooks.ts new file mode 100644 index 000000000..a9887ee0d --- /dev/null +++ b/css-hooks/app/css-hooks.ts @@ -0,0 +1,6 @@ +import { createHooks, recommended } from "@css-hooks/react"; + +const [css, hooks] = createHooks(recommended); + +export default hooks; +export { css } diff --git a/css-hooks/app/root.tsx b/css-hooks/app/root.tsx new file mode 100644 index 000000000..d76eaa801 --- /dev/null +++ b/css-hooks/app/root.tsx @@ -0,0 +1,34 @@ +import type { MetaFunction } from "@remix-run/node"; +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from "@remix-run/react"; +import { css } from "./css-hooks"; + +export const meta: MetaFunction = () => ({ + charset: "utf-8", + title: "Remix with CSS Hooks", + viewport: "width=device-width,initial-scale=1", +}); + +export default function App() { + return ( + + + + +