Remix Support (#4)

* Rename a few consts * Prepare astro-demo * Remove unnecessary code * bail out if input doesn't include stylex * Remove astro demo * rmeove astro even more lol * Prepare remix-demo * Support Remix * Build compat * Use virtual module * Docs for Remix * changeset
HorusGoul · Dec 6, 2023 · 01cc461 · 01cc461
1 parent 1ab20d0
commit 01cc461
Show file tree

Hide file tree

Showing 16 changed files with 5,613 additions and 287 deletions.
diff --git a/.changeset/clean-spiders-argue.md b/.changeset/clean-spiders-argue.md
@@ -0,0 +1,5 @@
+---
+"vite-plugin-stylex": minor
+---
+
+Remix Vite Support
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ pnpm add --save-dev vite-plugin-stylex
 
 ## Setup
 
-1. Import the plugin in your `vite.config.ts` file:
+For a basic SPA setup, you only need to add the plugin to your Vite config:
 
 ```ts
 // ... other imports
@@ -30,7 +30,23 @@ export default defineConfig({
 });
 ```
 
-2. That's it! You can now use StyleX in your Vite project 😄
+### Extra steps for frameworks or SSR
+
+Other setups may require extra steps to get StyleX working. For example, Remix requires you to import the CSS output in your root component.
+
+#### Remix
+
+Import the CSS output in your `root.tsx` file:
+
+```tsx
+import "virtual:stylex.css";
+
+// your root component
+```
+
+#### Other Frameworks
+
+It's possible that other frameworks don't work out of the box. If you find that this is the case, please open an issue.
 
 # Acknowledgments
 

diff --git a/apps/remix-demo/.gitignore b/apps/remix-demo/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/apps/remix-demo/README.md b/apps/remix-demo/README.md
@@ -0,0 +1,28 @@
+# templates/unstable-vite
+
+⚠️ Remix support for Vite is unstable and not recommended for production.
+
+📖 See the [Remix Vite docs][remix-vite-docs] for details on supported features.
+
+## Setup
+
+```shellscript
+npx create-remix@latest --template remix-run/remix/templates/unstable-vite
+```
+
+## Run
+
+Spin up the Vite dev server:
+
+```shellscript
+npm run dev
+```
+
+Or build your app for production and run it:
+
+```shellscript
+npm run build
+npm run start
+```
+
+[remix-vite-docs]: https://remix.run/docs/en/main/future/vite
diff --git a/apps/remix-demo/app/Card.tsx b/apps/remix-demo/app/Card.tsx
@@ -0,0 +1,16 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "./theme.stylex";
+
+export default function Card({ children }: { children: React.ReactNode }) {
+  return <div {...stylex.props(styles.root)}>{children}</div>;
+}
+
+const styles = stylex.create({
+  root: {
+    backgroundColor: "white",
+    borderRadius: 8,
+    padding: 16,
+    boxShadow: "0 0 16px rgba(0, 0, 0, 0.1)",
+    color: tokens.primaryTextColor,
+  },
+});
diff --git a/apps/remix-demo/app/root.tsx b/apps/remix-demo/app/root.tsx
@@ -0,0 +1,29 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+import "virtual:stylex.css";
+
+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 />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/apps/remix-demo/app/routes/_index.tsx b/apps/remix-demo/app/routes/_index.tsx
@@ -0,0 +1,13 @@
+import type { MetaFunction } from "@remix-run/node";
+import Card from "~/Card";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
+
+export default function Index() {
+  return <Card>Remix App with StyleX!</Card>;
+}
diff --git a/apps/remix-demo/app/theme.stylex.ts b/apps/remix-demo/app/theme.stylex.ts
@@ -0,0 +1,5 @@
+import * as stylex from "@stylexjs/stylex";
+
+export const tokens = stylex.defineVars({
+  primaryTextColor: "#000",
+});
diff --git a/apps/remix-demo/env.d.ts b/apps/remix-demo/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />
diff --git a/apps/remix-demo/package.json b/apps/remix-demo/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "remix-demo",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "vite build && vite build --ssr",
+    "dev": "vite dev",
+    "start": "remix-serve ./build/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/node": "^2.3.1",
+    "@remix-run/react": "^2.3.1",
+    "@remix-run/serve": "^2.3.1",
+    "@stylexjs/stylex": "^0.3.0",
+    "isbot": "^3.6.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^2.3.1",
+    "@remix-run/eslint-config": "^2.3.1",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.38.0",
+    "typescript": "^5.1.6",
+    "vite": "^5.0.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vite-plugin-stylex": "workspace:*"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}
diff --git a/apps/remix-demo/public/favicon.ico b/apps/remix-demo/public/favicon.ico
diff --git a/apps/remix-demo/tsconfig.json b/apps/remix-demo/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/apps/remix-demo/vite.config.ts b/apps/remix-demo/vite.config.ts
@@ -0,0 +1,8 @@
+import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { Plugin, defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import styleX from "vite-plugin-stylex";
+
+export default defineConfig({
+  plugins: [remix(), tsconfigPaths(), styleX() as Plugin],
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/node" />
		/// <reference types="vite/client" />