Add an example with Remix (#1317)

vanilla-extract-css · Feb 19, 2024 · d11976c · d11976c
1 parent 69d4dc9
commit d11976c
Show file tree

Hide file tree

Showing 15 changed files with 2,091 additions and 64 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -11,3 +11,4 @@ site/docs-manifest.json
 pnpm-lock.yaml
 *-snapshots
 test-results
+examples/remix/build
diff --git a/examples/remix/.gitignore b/examples/remix/.gitignore
@@ -0,0 +1 @@
+build
diff --git a/examples/remix/app/components/HelloWorld.css.ts b/examples/remix/app/components/HelloWorld.css.ts
@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  background: 'lightcyan',
+  color: 'oklab(59.686% 0.1009 0.1192)', // Testing Lightning CSS
+  padding: '16px',
+  transition: 'opacity .1s ease',
+  ':hover': {
+    opacity: 0.8,
+  },
+});
diff --git a/examples/remix/app/components/HelloWorld.tsx b/examples/remix/app/components/HelloWorld.tsx
@@ -0,0 +1,9 @@
+import * as styles from './HelloWorld.css';
+
+export function HelloWorld() {
+  return (
+    <div className={styles.root}>
+      <h1>🧁 Hello from vanilla-extract!</h1>
+    </div>
+  );
+}
diff --git a/examples/remix/app/root.tsx b/examples/remix/app/root.tsx
@@ -0,0 +1,18 @@
+import { Links, Meta, Outlet, Scripts } from '@remix-run/react';
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/remix/app/routes/_index.tsx b/examples/remix/app/routes/_index.tsx
@@ -0,0 +1,11 @@
+import type { MetaFunction } from '@remix-run/node';
+
+import { HelloWorld } from '../components/HelloWorld';
+
+export const meta: MetaFunction = () => {
+  return [{ title: 'Remix Example' }];
+};
+
+export default function Index() {
+  return <HelloWorld />;
+}
diff --git a/examples/remix/env.d.ts b/examples/remix/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />
diff --git a/examples/remix/package.json b/examples/remix/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vanilla-extract-example-remix",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "remix vite:dev",
+    "build": "remix vite:build",
+    "start": "remix-serve ./build/server/index.js"
+  },
+  "dependencies": {
+    "@remix-run/node": "^2.6.0",
+    "@remix-run/react": "^2.6.0",
+    "@remix-run/serve": "^2.6.0",
+    "@vanilla-extract/css": "*",
+    "isbot": "^4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^2.6.0",
+    "@types/react": "^18.2.55",
+    "@vanilla-extract/vite-plugin": "*",
+    "vite": "^5.0.11"
+  }
+}
diff --git a/examples/remix/public/favicon.ico b/examples/remix/public/favicon.ico
diff --git a/examples/remix/tsconfig.json b/examples/remix/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}
diff --git a/examples/remix/vite.config.ts b/examples/remix/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { unstable_vitePlugin as remix } from '@remix-run/dev';
+
+export default defineConfig({
+  css: {
+    transformer: 'lightningcss',
+    lightningcss: {
+      targets: {
+        ios_saf: 12,
+      },
+    },
+  },
+  plugins: [remix(), vanillaExtractPlugin()],
+});
diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
@@ -18,7 +18,7 @@
     "@vanilla-extract/integration": "^7.1.0"
   },
   "devDependencies": {
-    "vite": "npm:vite@^5.0.11"
+    "vite": "^5.0.11"
   },
   "peerDependencies": {
     "vite": "^4.0.3 || ^5.0.0"