create-newt-app 0.32.0 → 0.33.0

package/dist/index.js

@@ -11,7 +11,7 @@ import { existsSync, promises } from "fs";
 import path from "path";
 import https from "node:https";
 //#region package.json
-var version = "0.32.0";
+var version = "0.33.0";
 var engines = { "node": ">=24.0.0" };
 //#endregion
 //#region src/templates/root/index.ts
@@ -231,7 +231,7 @@ This version has breaking changes — APIs, conventions, and file structure may
 const web$1 = {
 	templates: [
 		{
-			when: (s) => s.nest !== "di-only",
+			when: (s) => s.nest !== "di-only" && !s.stylex,
 			filename: "apps/web/package.json",
 			template: `{
   "name": "web",
@@ -369,6 +369,7 @@ const nextConfig = {
 export default nextConfig;`
 		},
 		{
+			when: (s) => !s.stylex,
 			filename: "apps/web/postcss.config.mjs",
 			template: `export { default } from "@<%= projectName %>/ui/postcss.config";`
 		},
@@ -399,7 +400,7 @@ export default nextConfig;`
 }`
 		},
 		{
-			when: (s) => !s.shadcn,
+			when: (s) => !s.shadcn && !s.stylex,
 			filename: "apps/web/app/layout.tsx",
 			template: `import type { Metadata } from "next";
 import localFont from "next/font/local";
@@ -442,7 +443,7 @@ export default function RootLayout({
 }`
 		},
 		{
-			when: (s) => !s.todoExample && !s.shadcn,
+			when: (s) => !s.todoExample && !s.shadcn && !s.stylex,
 			filename: "apps/web/app/page.tsx",
 			template: `'use client';
 
@@ -543,7 +544,7 @@ export default function Providers({ children }: { children: React.ReactNode }) {
 }`
 		},
 		{
-			when: (s) => !s.shadcn,
+			when: (s) => !s.shadcn && !s.stylex,
 			filename: "apps/web/app/auth-form.tsx",
 			template: `'use client';
 
@@ -941,6 +942,7 @@ export type Auth = typeof auth;`
 		filename: "packages/auth/tsconfig.json",
 		template: `{
   "compilerOptions": {
+    "erasableSyntaxOnly": true,
     "esModuleInterop": true,
     "lib": ["es2022"],
     "module": "NodeNext",
@@ -961,6 +963,7 @@ var tsconfig_default$2 = {
 	filename: "packages/db/tsconfig.json",
 	template: `{
   "compilerOptions": {
+    "erasableSyntaxOnly": true,
     "esModuleInterop": true,
     "lib": ["es2022"],
     "module": "NodeNext",
@@ -1256,11 +1259,10 @@ const dbPostgres = { templates: [
 	src_index_postgres_default
 ] };
 //#endregion
-//#region src/templates/ui/index.ts
-const ui$1 = { templates: [
-	{
-		filename: "packages/ui/package.json",
-		template: `{
+//#region src/templates/ui/templates/package-json.ts
+var package_json_default$4 = {
+	filename: "packages/ui/package.json",
+	template: `{
   "name": "@<%= projectName %>/ui",
   "version": "0.0.0",
   "private": true,
@@ -1292,10 +1294,12 @@ const ui$1 = { templates: [
     "tailwind-merge": "<%= versions["tailwind-merge"] %>"
   }
 }`
-	},
-	{
-		filename: "packages/ui/src/button.tsx",
-		template: `"use client";
+};
+//#endregion
+//#region src/templates/ui/templates/button.ts
+var button_default$2 = {
+	filename: "packages/ui/src/button.tsx",
+	template: `"use client";
 
 import { ReactNode } from "react";
 import { cn } from "./utils";
@@ -1327,10 +1331,12 @@ export const Button = ({ children, onClick, type = "button", disabled, className
     </button>
   );
 };`
-	},
-	{
-		filename: "packages/ui/src/link.tsx",
-		template: `import NextLink, { type LinkProps } from "next/link";
+};
+//#endregion
+//#region src/templates/ui/templates/link.ts
+var link_default$2 = {
+	filename: "packages/ui/src/link.tsx",
+	template: `import NextLink, { type LinkProps } from "next/link";
 import { type PropsWithChildren } from "react";
 import { cn } from "./utils";
 
@@ -1353,10 +1359,12 @@ export function Link({
     </NextLink>
   );
 }`
-	},
-	{
-		filename: "packages/ui/src/logo.tsx",
-		template: `import { cn } from "./utils";
+};
+//#endregion
+//#region src/templates/ui/templates/logo.ts
+var logo_default$2 = {
+	filename: "packages/ui/src/logo.tsx",
+	template: `import { cn } from "./utils";
 
 interface LogoProps {
   className?: string;
@@ -1379,19 +1387,23 @@ export function Logo({ className }: LogoProps) {
     </svg>
   );
 }`
-	},
-	{
-		filename: "packages/ui/src/utils.ts",
-		template: `import { clsx, type ClassValue } from "clsx";
+};
+//#endregion
+//#region src/templates/ui/templates/utils.ts
+var utils_default$1 = {
+	filename: "packages/ui/src/utils.ts",
+	template: `import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }`
-	},
-	{
-		filename: "packages/ui/src/globals.css",
-		template: `@import 'tailwindcss';
+};
+//#endregion
+//#region src/templates/ui/templates/globals-css.ts
+var globals_css_default$2 = {
+	filename: "packages/ui/src/globals.css",
+	template: `@import 'tailwindcss';
 @source "../../../apps/**/*.{ts,tsx}";
 @source "../**/*.{ts,tsx}";
 
@@ -1428,20 +1440,24 @@ export function cn(...inputs: ClassValue[]) {
     border-color: var(--border);
   }
 }`
-	},
-	{
-		filename: "packages/ui/postcss.config.mjs",
-		template: `const config = {
+};
+//#endregion
+//#region src/templates/ui/templates/postcss-config.ts
+var postcss_config_default$2 = {
+	filename: "packages/ui/postcss.config.mjs",
+	template: `const config = {
   plugins: {
     "@tailwindcss/postcss": {},
   },
 };
 
 export default config;`
-	},
-	{
-		filename: "packages/ui/tsconfig.json",
-		template: `{
+};
+//#endregion
+//#region src/templates/ui/templates/tsconfig.ts
+var tsconfig_default$1 = {
+	filename: "packages/ui/tsconfig.json",
+	template: `{
   "extends": "@<%= projectName %>/typescript-config/react-library.json",
   "compilerOptions": {
     "outDir": "dist",
@@ -1450,11 +1466,24 @@ export default config;`
   "include": ["src"],
   "exclude": ["node_modules", "dist"]
 }`
-	}
+};
+//#endregion
+//#region src/templates/ui/index.ts
+const ui$1 = { templates: [
+	package_json_default$4,
+	button_default$2,
+	link_default$2,
+	logo_default$2,
+	utils_default$1,
+	globals_css_default$2,
+	postcss_config_default$2,
+	tsconfig_default$1
 ] };
 //#endregion
 //#region src/templates/versions.ts
 const versions = {
+	"@babel/plugin-proposal-decorators": "^8.0.2",
+	"@babel/plugin-transform-class-properties": "^8.0.1",
 	"@base-ui/react": "^1.6.0",
 	"@eslint/js": "^9.39.1",
 	"@nestjs/cli": "^11.0.0",
@@ -1467,6 +1496,9 @@ const versions = {
 	"@next/eslint-plugin-next": "^16.3.4",
 	"@oxlint/plugins": "^1.74.0",
 	"@shadcn/react": "^0.2.1",
+	"@stylexjs/babel-plugin": "0.19.0",
+	"@stylexjs/postcss-plugin": "0.19.0",
+	"@stylexjs/stylex": "0.19.0",
 	"@swc/core": "^1.10.0",
 	"@tailwindcss/postcss": "^4.2.1",
 	"@tanstack/react-form": "^1.28.5",
@@ -1482,6 +1514,7 @@ const versions = {
 	"@types/supertest": "^6.0.2",
 	"@vitest/coverage-v8": "^4.1.10",
 	auth: "^1.5.5",
+	"babel-plugin-transform-typescript-metadata": "^0.4.0",
 	"better-auth": "^1.2.8",
 	"better-sqlite3": "^12.11.1",
 	"class-variance-authority": "^0.7.1",
@@ -9827,154 +9860,953 @@ export {
 	}]
 };
 //#endregion
-//#region src/templates/eslint-config/templates/package-json.ts
-var package_json_default$1 = {
-	filename: "packages/eslint-config/package.json",
-	template: `{
-  "name": "@<%= projectName %>/eslint-config",
+//#region src/templates/stylex-ui/index.ts
+const stylexUi = { templates: [
+	{
+		filename: "packages/ui/package.json",
+		template: `{
+  "name": "@<%= projectName %>/ui",
   "version": "0.0.0",
-  "type": "module",
   "private": true,
   "exports": {
-    "./base": "./base.js",
-    "./next-js": "./next.js",
-    "./react-internal": "./react-internal.js"
+    "./globals.css": "./src/globals.css",
+    "./tokens.stylex": "./src/tokens.stylex.ts",
+    "./*": "./src/*.tsx"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@eslint/js": "<%= versions["@eslint/js"] %>",
-    "@next/eslint-plugin-next": "<%= versions["@next/eslint-plugin-next"] %>",
-    "eslint": "<%= versions.eslint %>",
-    "eslint-config-prettier": "<%= versions["eslint-config-prettier"] %>",
-    "eslint-plugin-only-warn": "<%= versions["eslint-plugin-only-warn"] %>",
-    "eslint-plugin-react": "<%= versions["eslint-plugin-react"] %>",
-    "eslint-plugin-react-hooks": "<%= versions["eslint-plugin-react-hooks"] %>",
-    "eslint-plugin-turbo": "<%= versions["eslint-plugin-turbo"] %>",
-    "globals": "<%= versions.globals %>",
-    "typescript": "<%= versions.typescript %>",
-    "typescript-eslint": "<%= versions["typescript-eslint"] %>"
+    "@<%= projectName %>/typescript-config": "workspace:*",
+    "@types/node": "<%= versions["@types/node"] %>",
+    "@types/react": "<%= versions["@types/react"] %>",
+    "@types/react-dom": "<%= versions["@types/react-dom"] %>",
+    "typescript": "<%= versions.typescript %>"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "dependencies": {
+    "@stylexjs/stylex": "<%= versions["@stylexjs/stylex"] %>"
   }
 }`
+	},
+	{
+		filename: "packages/ui/src/tokens.stylex.ts",
+		template: `import * as stylex from "@stylexjs/stylex";
+
+export const colors = stylex.defineVars({
+  background: "oklch(0.145 0 0)",
+  foreground: "oklch(0.985 0 0)",
+  muted: "oklch(0.269 0 0)",
+  mutedForeground: "oklch(0.708 0 0)",
+  border: "oklch(0.469 0 0)",
+  accent: "oklch(0.985 0 0)",
+  accentForeground: "oklch(0.205 0 0)",
+  danger: "oklch(0.637 0.237 25.331)",
+});
+
+export const fonts = stylex.defineVars({
+  sans: "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif",
+  mono: "var(--font-geist-mono), ui-monospace, monospace",
+});
+
+export const radii = stylex.defineVars({
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+});
+`
+	},
+	{
+		filename: "packages/ui/src/button.tsx",
+		template: `"use client";
+
+import { ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import type { StyleXStyles } from "@stylexjs/stylex";
+import { colors, fonts, radii } from "./tokens.stylex";
+
+interface ButtonProps {
+  children: ReactNode;
+  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  style?: StyleXStyles;
+}
+
+export const Button = ({ children, onClick, type = "button", disabled, style }: ButtonProps) => {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      {...stylex.props(styles.base, disabled && styles.disabled, style)}
+    >
+      {children}
+    </button>
+  );
 };
-//#endregion
-//#region src/templates/eslint-config/templates/base.ts
-var base_default$1 = {
-	filename: "packages/eslint-config/base.js",
-	template: `import js from "@eslint/js";
-import eslintConfigPrettier from "eslint-config-prettier";
-import turboPlugin from "eslint-plugin-turbo";
-import tseslint from "typescript-eslint";
-import onlyWarn from "eslint-plugin-only-warn";
 
-/**
- * A shared ESLint configuration for the repository.
- *
- * @type {import("eslint").Linter.Config[]}
- * */
-export const config = [
-  js.configs.recommended,
-  eslintConfigPrettier,
-  ...tseslint.configs.recommended,
-  {
-    plugins: {
-      turbo: turboPlugin,
-    },
-    rules: {
-      "turbo/no-undeclared-env-vars": "warn",
+const styles = stylex.create({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    height: 36,
+    paddingBlock: 0,
+    paddingInline: 16,
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: 500,
+    whiteSpace: "nowrap",
+    color: colors.accentForeground,
+    backgroundColor: {
+      default: colors.accent,
+      ":hover": "oklch(0.922 0 0)",
     },
-  },
-  {
-    plugins: {
-      onlyWarn,
+    borderStyle: "none",
+    borderRadius: radii.sm,
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.3)",
+    cursor: "pointer",
+    transitionProperty: "background-color",
+    transitionDuration: "150ms",
+    outlineColor: "rgba(255, 255, 255, 0.5)",
+    outlineOffset: 2,
+    outlineStyle: {
+      default: "none",
+      ":focus-visible": "solid",
     },
+    outlineWidth: 2,
   },
-  {
-    ignores: ["dist/**"],
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: "none",
   },
-];`
-};
-//#endregion
-//#region src/templates/eslint-config/templates/next.ts
-var next_default = {
-	filename: "packages/eslint-config/next.js",
-	template: `import js from "@eslint/js";
-import { globalIgnores } from "eslint/config";
-import eslintConfigPrettier from "eslint-config-prettier";
-import tseslint from "typescript-eslint";
-import pluginReactHooks from "eslint-plugin-react-hooks";
-import pluginReact from "eslint-plugin-react";
-import globals from "globals";
-import pluginNext from "@next/eslint-plugin-next";
-import { config as baseConfig } from "./base.js";
+});
+`
+	},
+	{
+		filename: "packages/ui/src/link.tsx",
+		template: `import NextLink, { type LinkProps } from "next/link";
+import { type PropsWithChildren } from "react";
+import * as stylex from "@stylexjs/stylex";
+import type { StyleXStyles } from "@stylexjs/stylex";
+import { colors } from "./tokens.stylex";
 
-/**
- * A custom ESLint configuration for libraries that use Next.js.
- *
- * @type {import("eslint").Linter.Config[]}
- * */
-export const nextJsConfig = [
-  ...baseConfig,
-  js.configs.recommended,
-  eslintConfigPrettier,
-  ...tseslint.configs.recommended,
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
-  {
-    ...pluginReact.configs.flat.recommended,
-    languageOptions: {
-      ...pluginReact.configs.flat.recommended.languageOptions,
-      globals: {
-        ...globals.serviceworker,
-        ...globals.node,
-      },
-    },
-  },
-  {
-    plugins: {
-      "@next/next": pluginNext,
-    },
-    rules: {
-      ...pluginNext.configs.recommended.rules,
-      ...pluginNext.configs["core-web-vitals"].rules,
-    },
-  },
-  {
-    plugins: {
-      "react-hooks": pluginReactHooks,
-    },
-    settings: { react: { version: "detect" } },
-    rules: {
-      ...pluginReactHooks.configs.recommended.rules,
-      // React scope no longer necessary with new JSX transform.
-      "react/react-in-jsx-scope": "off",
+export function Link({
+  href,
+  children,
+  style,
+  ...rest
+}: PropsWithChildren<LinkProps & { style?: StyleXStyles }>) {
+  return (
+    <NextLink href={href} {...rest} {...stylex.props(styles.link, style)}>
+      {children}
+    </NextLink>
+  );
+}
+
+const styles = stylex.create({
+  link: {
+    color: "inherit",
+    textDecorationLine: "underline",
+    textDecorationColor: {
+      default: colors.mutedForeground,
+      ":hover": colors.foreground,
     },
+    transitionProperty: "text-decoration-color",
+    transitionDuration: "150ms",
   },
-];`
-};
-//#endregion
-//#region src/templates/eslint-config/templates/react-internal.ts
-var react_internal_default = {
-	filename: "packages/eslint-config/react-internal.js",
-	template: `import js from "@eslint/js";
-import eslintConfigPrettier from "eslint-config-prettier";
-import tseslint from "typescript-eslint";
-import pluginReactHooks from "eslint-plugin-react-hooks";
-import pluginReact from "eslint-plugin-react";
-import globals from "globals";
-import { config as baseConfig } from "./base.js";
+});
+`
+	},
+	{
+		filename: "packages/ui/src/logo.tsx",
+		template: `import * as stylex from "@stylexjs/stylex";
+import type { StyleXStyles } from "@stylexjs/stylex";
+import { colors } from "./tokens.stylex";
 
-/**
- * A custom ESLint configuration for libraries that use React.
- *
- * @type {import("eslint").Linter.Config[]} */
-export const config = [
-  ...baseConfig,
-  js.configs.recommended,
-  eslintConfigPrettier,
+interface LogoProps {
+  style?: StyleXStyles;
+}
+
+export function Logo({ style }: LogoProps) {
+  return (
+    <svg
+      width="196"
+      height="138"
+      viewBox="0 0 196 138"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...stylex.props(styles.logo, style)}
+    >
+      <path
+        d="M98 35C102.665 35 107.243 35.2232 111.707 35.6514C111.243 38.1972 111 40.8202 111 43.5C111 67.5244 130.476 87 154.5 87C165.156 87 174.914 83.1658 182.478 76.8057C183.476 79.9455 184 83.186 184 86.5C184 114.943 145.496 138 98 138C50.5035 138 12 114.943 12 86.5C12 83.1861 12.5228 79.9454 13.5215 76.8057C21.0851 83.1661 30.8441 87 41.5 87C65.5244 87 85 67.5244 85 43.5C85 40.8202 84.7559 38.1973 84.292 35.6514C88.7559 35.2232 93.3345 35 98 35ZM38.5 0C59.763 0 77 17.237 77 38.5C77 59.763 59.763 77 38.5 77C17.237 77 0 59.763 0 38.5C0 17.237 17.237 0 38.5 0ZM157.5 0C178.763 0 196 17.237 196 38.5C196 59.763 178.763 77 157.5 77C136.237 77 119 59.763 119 38.5C119 17.237 136.237 0 157.5 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+const styles = stylex.create({
+  logo: {
+    color: colors.foreground,
+  },
+});
+`
+	},
+	{
+		filename: "packages/ui/src/globals.css",
+		template: `@layer resets {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@stylex;
+`
+	},
+	tsconfig_default$1,
+	{
+		when: (s) => s.nest !== "di-only",
+		filename: "apps/web/package.json",
+		template: `{
+  "name": "web",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "typecheck": "next typegen && tsc --noEmit"
+  },
+  "dependencies": {
+    "@<%= projectName %>/auth": "workspace:*",
+    "@<%= projectName %>/ui": "workspace:*",
+    "@stylexjs/stylex": "<%= versions["@stylexjs/stylex"] %>",
+    "dotenv": "<%= versions.dotenv %>",
+    "@tanstack/react-form": "<%= versions["@tanstack/react-form"] %>",
+    "@tanstack/react-query": "<%= versions["@tanstack/react-query"] %>",
+    "better-auth": "<%= versions["better-auth"] %>",
+    "next": "<%= versions.next %>",
+    "react": "<%= versions.react %>",
+    "react-dom": "<%= versions["react-dom"] %>"
+  },
+  "devDependencies": {
+    "@<%= projectName %>/typescript-config": "workspace:*",
+    "@stylexjs/babel-plugin": "<%= versions["@stylexjs/babel-plugin"] %>",
+    "@stylexjs/postcss-plugin": "<%= versions["@stylexjs/postcss-plugin"] %>",
+    "@types/node": "<%= versions["@types/node"] %>",
+    "@types/react": "<%= versions["@types/react"] %>",
+    "@types/react-dom": "<%= versions["@types/react-dom"] %>",
+    "typescript": "<%= versions.typescript %>"
+  }
+}`
+	},
+	{
+		when: (s) => s.nest === "di-only",
+		filename: "apps/web/package.json",
+		template: `{
+  "name": "web",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@<%= projectName %>/api": "workspace:*",
+    "@<%= projectName %>/auth": "workspace:*",
+    "@<%= projectName %>/db": "workspace:*",
+    "@<%= projectName %>/ui": "workspace:*",
+    "@nestjs/common": "<%= versions["@nestjs/common"] %>",
+    "@nestjs/core": "<%= versions["@nestjs/core"] %>",
+    "reflect-metadata": "<%= versions["reflect-metadata"] %>",
+    "@stylexjs/stylex": "<%= versions["@stylexjs/stylex"] %>",
+    "dotenv": "<%= versions.dotenv %>",
+    "@tanstack/react-form": "<%= versions["@tanstack/react-form"] %>",
+    "@tanstack/react-query": "<%= versions["@tanstack/react-query"] %>",
+    "better-auth": "<%= versions["better-auth"] %>",
+    "next": "<%= versions.next %>",
+    "react": "<%= versions.react %>",
+    "react-dom": "<%= versions["react-dom"] %>"
+  },
+  "devDependencies": {
+    "@<%= projectName %>/typescript-config": "workspace:*",
+    "@babel/plugin-proposal-decorators": "<%= versions["@babel/plugin-proposal-decorators"] %>",
+    "@babel/plugin-transform-class-properties": "<%= versions["@babel/plugin-transform-class-properties"] %>",
+    "babel-plugin-transform-typescript-metadata": "<%= versions["babel-plugin-transform-typescript-metadata"] %>",
+    "@stylexjs/babel-plugin": "<%= versions["@stylexjs/babel-plugin"] %>",
+    "@stylexjs/postcss-plugin": "<%= versions["@stylexjs/postcss-plugin"] %>",
+    "@types/node": "<%= versions["@types/node"] %>",
+    "@types/react": "<%= versions["@types/react"] %>",
+    "@types/react-dom": "<%= versions["@types/react-dom"] %>",
+    "typescript": "<%= versions.typescript %>"
+  }
+}`
+	},
+	{
+		filename: "apps/web/babel.config.js",
+		template: `import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const config = {
+  presets: ["next/babel"],
+  plugins: [
+<% if (nest === 'di-only') { %>    "babel-plugin-transform-typescript-metadata",
+    ["@babel/plugin-proposal-decorators", { version: "legacy" }],
+    ["@babel/plugin-transform-class-properties", { loose: true }],
+<% } %>    [
+      "@stylexjs/babel-plugin",
+      {
+        dev: process.env.NODE_ENV !== "production",
+        runtimeInjection: false,
+        treeshakeCompensation: true,
+        unstable_moduleResolution: {
+          type: "commonJS",
+          rootDir: path.join(dirname, "../.."),
+        },
+      },
+    ],
+  ],
+};
+
+export default config;`
+	},
+	{
+		filename: "apps/web/postcss.config.mjs",
+		template: `import babelConfig from "./babel.config.js";
+
+const config = {
+  plugins: {
+    "@stylexjs/postcss-plugin": {
+      include: [
+        "app/**/*.{js,jsx,ts,tsx}",
+        "../../packages/ui/src/**/*.{js,jsx,ts,tsx}",
+      ],
+      babelConfig: {
+        babelrc: false,
+        parserOpts: { plugins: ["typescript", "jsx"] },
+        plugins: babelConfig.plugins,
+      },
+      useCSSLayers: true,
+    },
+  },
+};
+
+export default config;`
+	},
+	{
+		filename: "apps/web/app/layout.tsx",
+		template: `import type { Metadata } from "next";
+import localFont from "next/font/local";
+import * as stylex from "@stylexjs/stylex";
+import Providers from "@/app/providers";
+import { colors, fonts } from "@<%= projectName %>/ui/tokens.stylex";
+import "@<%= projectName %>/ui/globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+});
+
+export const metadata: Metadata = {
+  title: "<%= projectName %>",
+  description: "Next + Nest = Newt",
+  icons: {
+    icon: [
+      { url: "/icon0.svg", type: "image/svg+xml" },
+      { url: "/icon1.png", type: "image/png" },
+    ],
+    apple: "/apple-icon.png",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={\`\${geistSans.variable} \${geistMono.variable}\`}>
+      <body {...stylex.props(styles.body)}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+
+const styles = stylex.create({
+  body: {
+    backgroundColor: colors.background,
+    color: colors.foreground,
+    fontFamily: fonts.sans,
+  },
+});
+`
+	},
+	{
+		when: (s) => !s.todoExample,
+		filename: "apps/web/app/page.tsx",
+		template: `'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import * as stylex from '@stylexjs/stylex';
+import { authClient } from '@/lib/auth-client';
+import { AuthForm } from '@/app/auth-form';
+import { Button } from '@<%= projectName %>/ui/button';
+import { Link } from '@<%= projectName %>/ui/link';
+import { Logo } from '@<%= projectName %>/ui/logo';
+import { colors, fonts, radii } from '@<%= projectName %>/ui/tokens.stylex';
+
+export default function Home() {
+  const { data: session, isPending } = authClient.useSession();
+
+  const { data: hello } = useQuery({
+    queryKey: ['hello'],
+    queryFn: () => fetch('/api/hello').then((r) => r.json()),
+  });
+
+  return (
+    <main {...stylex.props(styles.main)}>
+      <div {...stylex.props(styles.header)}>
+        <p {...stylex.props(styles.mono, styles.muted)}>apps/web/app/page.tsx</p>
+        <p {...stylex.props(styles.muted)}>Delete me to get started!</p>
+      </div>
+
+      <div {...stylex.props(styles.titleRow)}>
+        <Logo style={styles.logo} />
+        <div>
+          <h1 {...stylex.props(styles.h1)}><%= projectName %></h1>
+          <p {...stylex.props(styles.muted, styles.tagline)}>
+            Next + Nest = Newt 💜
+          </p>
+        </div>
+      </div>
+
+      <div {...stylex.props(styles.card)}>
+        <p {...stylex.props(styles.eyebrow)}>next.js</p>
+        <p {...stylex.props(styles.mono, styles.muted)}>apps/web/app/layout.tsx</p>
+        <p {...stylex.props(styles.muted)}>Next.js rendering</p>
+      </div>
+
+      <div {...stylex.props(styles.card)}>
+        <p {...stylex.props(styles.eyebrow)}>nest.js</p>
+        <p {...stylex.props(styles.mono, styles.muted)}>GET /api/hello</p>
+        <pre {...stylex.props(styles.pre)}>
+          <code>{JSON.stringify(hello, null, 2)}</code>
+        </pre>
+      </div>
+
+      <div {...stylex.props(styles.card)}>
+        <p {...stylex.props(styles.eyebrow, styles.eyebrowSpaced)}>better-auth</p>
+        {isPending ? (
+          <p {...stylex.props(styles.muted)}>Loading…</p>
+        ) : session ? (
+          <div {...stylex.props(styles.signedIn)}>
+            <p>Signed in as {session.user.name}</p>
+            <Button onClick={() => void authClient.signOut()}>
+              Sign out
+            </Button>
+          </div>
+        ) : (
+          <AuthForm />
+        )}
+      </div>
+
+      <div {...stylex.props(styles.footer)}>
+        <p {...stylex.props(styles.muted)}>Learn more</p>
+        <ul {...stylex.props(styles.list)}>
+          <li>
+            <Link href="https://newt-app.com">Documentation</Link>
+          </li>
+          <li>
+            <Link href="https://github.com/zeevo/newt-app">GitHub</Link>
+          </li>
+          <li>
+            <Link href="https://nextjs.org">Next.js</Link>
+          </li>
+          <li>
+            <Link href="https://nestjs.com">NestJS</Link>
+          </li>
+        </ul>
+      </div>
+    </main>
+  );
+}
+
+const styles = stylex.create({
+  main: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    maxWidth: '32rem',
+    minHeight: '100%',
+    marginInline: 'auto',
+    paddingBlock: '2rem',
+    paddingInline: '1rem',
+    fontSize: '0.875rem',
+  },
+  header: {
+    paddingBottom: '1rem',
+    borderBottomColor: colors.border,
+    borderBottomStyle: 'solid',
+    borderBottomWidth: 1,
+  },
+  titleRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+    paddingBlock: '0.5rem',
+  },
+  logo: {
+    width: '2.5rem',
+    height: 'auto',
+  },
+  h1: {
+    fontSize: '2.25rem',
+    fontWeight: 900,
+    letterSpacing: '-0.025em',
+  },
+  tagline: {
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25rem',
+    padding: '1.5rem',
+    borderColor: colors.border,
+    borderRadius: radii.lg,
+    borderStyle: 'solid',
+    borderWidth: 1,
+  },
+  eyebrow: {
+    fontFamily: fonts.mono,
+    fontSize: '0.75rem',
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+    color: colors.mutedForeground,
+  },
+  eyebrowSpaced: {
+    marginBottom: '0.75rem',
+  },
+  pre: {
+    marginTop: '0.5rem',
+    padding: '0.75rem',
+    fontFamily: fonts.mono,
+    backgroundColor: 'oklch(0.269 0 0 / 0.5)',
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    overflowX: 'auto',
+  },
+  signedIn: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: '0.75rem',
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    paddingBlock: '1rem',
+    paddingInline: '0.5rem',
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    listStylePosition: 'inside',
+    listStyleType: 'disc',
+  },
+  mono: {
+    fontFamily: fonts.mono,
+  },
+  muted: {
+    color: colors.mutedForeground,
+  },
+});
+`
+	},
+	{
+		filename: "apps/web/app/auth-form.tsx",
+		template: `'use client';
+
+import { useForm } from '@tanstack/react-form';
+import { useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { authClient } from '@/lib/auth-client';
+import { Button } from '@<%= projectName %>/ui/button';
+import { colors, radii } from '@<%= projectName %>/ui/tokens.stylex';
+
+export function AuthForm() {
+  const [tab, setTab] = useState<'signin' | 'signup'>('signup');
+  const [error, setError] = useState('');
+
+  const form = useForm({
+    defaultValues: { name: '', email: '', password: '' },
+    onSubmit: async ({ value }) => {
+      setError('');
+      if (tab === 'signin') {
+        const { error } = await authClient.signIn.email(value);
+        if (error) setError(error.message ?? 'Sign in failed');
+      } else {
+        const { error } = await authClient.signUp.email(value);
+        if (error) setError(error.message ?? 'Sign up failed');
+      }
+    },
+  });
+
+  return (
+    <>
+      <div {...stylex.props(styles.tabs)}>
+        <button
+          onClick={() => setTab('signup')}
+          {...stylex.props(styles.tab, tab === 'signup' && styles.tabActive)}
+        >
+          Sign up
+        </button>
+        <span {...stylex.props(styles.divider)}>|</span>
+        <button
+          onClick={() => setTab('signin')}
+          {...stylex.props(styles.tab, tab === 'signin' && styles.tabActive)}
+        >
+          Sign in
+        </button>
+      </div>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.handleSubmit();
+        }}
+        {...stylex.props(styles.form)}
+      >
+        {tab === 'signup' && (
+          <form.Field name="name">
+            {(field) => (
+              <div {...stylex.props(styles.field)}>
+                <label {...stylex.props(styles.label)}>Name</label>
+                <input
+                  type="text"
+                  autoComplete="name"
+                  value={field.state.value}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  required
+                  {...stylex.props(styles.input)}
+                />
+              </div>
+            )}
+          </form.Field>
+        )}
+
+        <form.Field name="email">
+          {(field) => (
+            <div {...stylex.props(styles.field)}>
+              <label {...stylex.props(styles.label)}>Email</label>
+              <input
+                type="email"
+                autoComplete="email"
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                required
+                {...stylex.props(styles.input)}
+              />
+            </div>
+          )}
+        </form.Field>
+
+        <form.Field name="password">
+          {(field) => (
+            <div {...stylex.props(styles.field)}>
+              <label {...stylex.props(styles.label)}>Password</label>
+              <input
+                type="password"
+                autoComplete={
+                  tab === 'signin' ? 'current-password' : 'new-password'
+                }
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                required
+                minLength={8}
+                {...stylex.props(styles.input)}
+              />
+            </div>
+          )}
+        </form.Field>
+
+        {error && <p {...stylex.props(styles.error)}>{error}</p>}
+
+        <form.Subscribe selector={(s) => s.isSubmitting}>
+          {(isSubmitting) => (
+            <Button type="submit" disabled={isSubmitting} style={styles.submit}>
+              {isSubmitting
+                ? 'Loading…'
+                : tab === 'signin'
+                  ? 'Sign in'
+                  : 'Create account'}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+    </>
+  );
+}
+
+const styles = stylex.create({
+  tabs: {
+    display: 'flex',
+    gap: '0.5rem',
+    marginBottom: '1.5rem',
+    fontSize: '0.875rem',
+  },
+  tab: {
+    color: {
+      default: colors.mutedForeground,
+      ':hover': colors.foreground,
+    },
+    backgroundColor: 'transparent',
+    borderStyle: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+  },
+  tabActive: {
+    color: colors.foreground,
+    fontWeight: 600,
+  },
+  divider: {
+    color: colors.border,
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+  },
+  field: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25rem',
+  },
+  label: {
+    fontSize: '0.875rem',
+    fontWeight: 500,
+  },
+  input: {
+    width: '100%',
+    height: 36,
+    paddingBlock: '0.25rem',
+    paddingInline: '0.75rem',
+    fontFamily: 'inherit',
+    fontSize: '0.875rem',
+    color: colors.foreground,
+    backgroundColor: 'oklch(0.269 0 0 / 0.5)',
+    borderColor: {
+      default: colors.border,
+      ':focus-visible': colors.mutedForeground,
+    },
+    borderRadius: radii.sm,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    outlineStyle: 'none',
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+  },
+  error: {
+    fontSize: '0.875rem',
+    color: colors.danger,
+  },
+  submit: {
+    width: '100%',
+  },
+});
+`
+	}
+] };
+//#endregion
+//#region src/templates/eslint-config/templates/package-json.ts
+var package_json_default$1 = {
+	filename: "packages/eslint-config/package.json",
+	template: `{
+  "name": "@<%= projectName %>/eslint-config",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "exports": {
+    "./base": "./base.js",
+    "./next-js": "./next.js",
+    "./react-internal": "./react-internal.js"
+  },
+  "devDependencies": {
+    "@eslint/js": "<%= versions["@eslint/js"] %>",
+    "@next/eslint-plugin-next": "<%= versions["@next/eslint-plugin-next"] %>",
+    "eslint": "<%= versions.eslint %>",
+    "eslint-config-prettier": "<%= versions["eslint-config-prettier"] %>",
+    "eslint-plugin-only-warn": "<%= versions["eslint-plugin-only-warn"] %>",
+    "eslint-plugin-react": "<%= versions["eslint-plugin-react"] %>",
+    "eslint-plugin-react-hooks": "<%= versions["eslint-plugin-react-hooks"] %>",
+    "eslint-plugin-turbo": "<%= versions["eslint-plugin-turbo"] %>",
+    "globals": "<%= versions.globals %>",
+    "typescript": "<%= versions.typescript %>",
+    "typescript-eslint": "<%= versions["typescript-eslint"] %>"
+  }
+}`
+};
+//#endregion
+//#region src/templates/eslint-config/templates/base.ts
+var base_default$1 = {
+	filename: "packages/eslint-config/base.js",
+	template: `import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import turboPlugin from "eslint-plugin-turbo";
+import tseslint from "typescript-eslint";
+import onlyWarn from "eslint-plugin-only-warn";
+
+/**
+ * A shared ESLint configuration for the repository.
+ *
+ * @type {import("eslint").Linter.Config[]}
+ * */
+export const config = [
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      turbo: turboPlugin,
+    },
+    rules: {
+      "turbo/no-undeclared-env-vars": "warn",
+    },
+  },
+  {
+    plugins: {
+      onlyWarn,
+    },
+  },
+  {
+    ignores: ["dist/**"],
+  },
+];`
+};
+//#endregion
+//#region src/templates/eslint-config/templates/next.ts
+var next_default = {
+	filename: "packages/eslint-config/next.js",
+	template: `import js from "@eslint/js";
+import { globalIgnores } from "eslint/config";
+import eslintConfigPrettier from "eslint-config-prettier";
+import tseslint from "typescript-eslint";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginReact from "eslint-plugin-react";
+import globals from "globals";
+import pluginNext from "@next/eslint-plugin-next";
+import { config as baseConfig } from "./base.js";
+
+/**
+ * A custom ESLint configuration for libraries that use Next.js.
+ *
+ * @type {import("eslint").Linter.Config[]}
+ * */
+export const nextJsConfig = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+  {
+    ...pluginReact.configs.flat.recommended,
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    plugins: {
+      "@next/next": pluginNext,
+    },
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs["core-web-vitals"].rules,
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      // React scope no longer necessary with new JSX transform.
+      "react/react-in-jsx-scope": "off",
+    },
+  },
+];`
+};
+//#endregion
+//#region src/templates/eslint-config/templates/react-internal.ts
+var react_internal_default = {
+	filename: "packages/eslint-config/react-internal.js",
+	template: `import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import tseslint from "typescript-eslint";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginReact from "eslint-plugin-react";
+import globals from "globals";
+import { config as baseConfig } from "./base.js";
+
+/**
+ * A custom ESLint configuration for libraries that use React.
+ *
+ * @type {import("eslint").Linter.Config[]} */
+export const config = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
   {
@@ -11093,6 +11925,7 @@ export async function GET() {
 }`
 	},
 	{
+		when: (s) => !s.stylex,
 		filename: "apps/web/package.json",
 		template: `{
   "name": "web",
@@ -11966,7 +12799,7 @@ export function TodoList({
 //#endregion
 //#region src/templates/todo-example/templates/web-page.ts
 var web_page_default = {
-	when: (s) => s.todoExample && !s.shadcn,
+	when: (s) => s.todoExample && !s.shadcn && !s.stylex,
 	filename: "apps/web/app/page.tsx",
 	template: `'use client';
 
@@ -12304,6 +13137,424 @@ export default function Home() {
 }`
 };
 //#endregion
+//#region src/templates/todo-example/templates/stylex-todo-list.ts
+var stylex_todo_list_default = {
+	filename: "apps/web/app/todo-list.tsx",
+	template: `'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useForm } from '@tanstack/react-form';
+import * as stylex from '@stylexjs/stylex';
+import { authClient } from '@/lib/auth-client';
+import { Button } from '@<%= projectName %>/ui/button';
+import { colors, radii } from '@<%= projectName %>/ui/tokens.stylex';
+
+interface Todo {
+  id: string;
+  title: string;
+  done: boolean;
+}
+
+const api = {
+  getTodos: (): Promise<Todo[]> => fetch('/api/todos').then((r) => r.json()),
+  createTodo: (title: string): Promise<Todo> =>
+    fetch('/api/todos', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title }),
+    }).then((r) => r.json()),
+  toggleTodo: (id: string): Promise<Todo> =>
+    fetch(\`/api/todos/\${id}/toggle\`, { method: 'PATCH' }).then((r) => r.json()),
+  deleteTodo: (id: string): Promise<void> =>
+    fetch(\`/api/todos/\${id}\`, { method: 'DELETE' }).then(() => undefined),
+};
+
+export function TodoList({
+  session,
+}: {
+  session: { user: { email: string } };
+}) {
+  const queryClient = useQueryClient();
+
+  const { data: todos = [], isPending } = useQuery({
+    queryKey: ['todos'],
+    queryFn: api.getTodos,
+  });
+
+  const createMutation = useMutation({
+    mutationFn: api.createTodo,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: api.toggleTodo,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: api.deleteTodo,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  });
+
+  const form = useForm({
+    defaultValues: { title: '' },
+    onSubmit: async ({ value }) => {
+      if (!value.title.trim()) return;
+      createMutation.mutate(value.title.trim());
+      form.reset();
+    },
+  });
+
+  return (
+    <>
+      <div {...stylex.props(styles.header)}>
+        <h1 {...stylex.props(styles.h1)}>Todos</h1>
+        <div {...stylex.props(styles.session)}>
+          <span>{session.user.email}</span>
+          <button
+            {...stylex.props(styles.signOut)}
+            onClick={() => authClient.signOut()}
+          >
+            Sign out
+          </button>
+        </div>
+      </div>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.handleSubmit();
+        }}
+        {...stylex.props(styles.form)}
+      >
+        <form.Field name="title">
+          {(field) => (
+            <input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              placeholder="New todo…"
+              {...stylex.props(styles.input)}
+            />
+          )}
+        </form.Field>
+
+        <form.Subscribe selector={(s) => s.isSubmitting}>
+          {(isSubmitting) => (
+            <Button type="submit" disabled={isSubmitting || createMutation.isPending}>
+              Add
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      {isPending ? (
+        <p {...stylex.props(styles.muted)}>Loading…</p>
+      ) : (
+        <ul {...stylex.props(styles.list)}>
+          {todos.map((todo) => (
+            <li key={todo.id} {...stylex.props(styles.item)}>
+              <input
+                type="checkbox"
+                checked={todo.done}
+                onChange={() => toggleMutation.mutate(todo.id)}
+              />
+              <span {...stylex.props(styles.title, todo.done && styles.titleDone)}>
+                {todo.title}
+              </span>
+              <button
+                onClick={() => deleteMutation.mutate(todo.id)}
+                {...stylex.props(styles.remove)}
+              >
+                ×
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {!isPending && todos.length === 0 && (
+        <p {...stylex.props(styles.muted)}>No todos yet.</p>
+      )}
+    </>
+  );
+}
+
+const styles = stylex.create({
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '2rem',
+  },
+  h1: {
+    fontSize: '1.5rem',
+    fontWeight: 600,
+  },
+  session: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+    fontSize: '0.875rem',
+    color: colors.mutedForeground,
+  },
+  signOut: {
+    color: {
+      default: 'inherit',
+      ':hover': colors.foreground,
+    },
+    backgroundColor: 'transparent',
+    borderStyle: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+  },
+  form: {
+    display: 'flex',
+    gap: '0.5rem',
+    marginBottom: '1.5rem',
+  },
+  input: {
+    flexGrow: 1,
+    height: 36,
+    paddingBlock: '0.25rem',
+    paddingInline: '0.75rem',
+    fontFamily: 'inherit',
+    fontSize: '0.875rem',
+    color: colors.foreground,
+    backgroundColor: 'oklch(0.269 0 0 / 0.5)',
+    borderColor: {
+      default: colors.border,
+      ':focus-visible': colors.mutedForeground,
+    },
+    borderRadius: radii.sm,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    outlineStyle: 'none',
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+  },
+  list: {
+    listStyleType: 'none',
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+    paddingBlock: '0.75rem',
+    borderTopColor: colors.border,
+    borderTopStyle: 'solid',
+    borderTopWidth: {
+      default: 1,
+      ':first-child': 0,
+    },
+  },
+  title: {
+    flexGrow: 1,
+    fontSize: '0.875rem',
+  },
+  titleDone: {
+    color: colors.mutedForeground,
+    textDecorationLine: 'line-through',
+  },
+  remove: {
+    color: {
+      default: colors.mutedForeground,
+      ':hover': colors.danger,
+    },
+    backgroundColor: 'transparent',
+    borderStyle: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    fontSize: '1.125rem',
+    lineHeight: 1,
+  },
+  muted: {
+    fontSize: '0.875rem',
+    color: colors.mutedForeground,
+  },
+});
+`
+};
+//#endregion
+//#region src/templates/todo-example/templates/stylex-page.ts
+var stylex_page_default = {
+	when: (s) => s.todoExample && s.stylex,
+	filename: "apps/web/app/page.tsx",
+	template: `'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import * as stylex from '@stylexjs/stylex';
+import { authClient } from '@/lib/auth-client';
+import { AuthForm } from '@/app/auth-form';
+import { Link } from '@<%= projectName %>/ui/link';
+import { Logo } from '@<%= projectName %>/ui/logo';
+import { TodoList } from '@/app/todo-list';
+import { colors, fonts, radii } from '@<%= projectName %>/ui/tokens.stylex';
+
+export default function Home() {
+  const { data: session, isPending } = authClient.useSession();
+
+  const { data: hello } = useQuery({
+    queryKey: ['hello'],
+    queryFn: () => fetch('/api/hello').then((r) => r.json()),
+  });
+
+  return (
+    <main {...stylex.props(styles.main)}>
+      <div {...stylex.props(styles.header)}>
+        <p {...stylex.props(styles.mono, styles.muted)}>apps/web/app/page.tsx</p>
+        <p {...stylex.props(styles.muted)}>Delete me to get started!</p>
+      </div>
+
+      <div {...stylex.props(styles.titleRow)}>
+        <Logo style={styles.logo} />
+        <div>
+          <h1 {...stylex.props(styles.h1)}><%= projectName %></h1>
+          <p {...stylex.props(styles.muted, styles.tagline)}>
+            Next + Nest = Newt 💜
+          </p>
+        </div>
+      </div>
+
+      <div {...stylex.props(styles.card)}>
+        <p {...stylex.props(styles.eyebrow)}>next.js</p>
+        <p {...stylex.props(styles.mono, styles.muted)}>apps/web/app/layout.tsx</p>
+        <p {...stylex.props(styles.muted)}>Next.js rendering</p>
+      </div>
+
+      <div {...stylex.props(styles.card)}>
+        <p {...stylex.props(styles.eyebrow)}>nest.js</p>
+        <p {...stylex.props(styles.mono, styles.muted)}>GET /api/hello</p>
+        <pre {...stylex.props(styles.pre)}>
+          <code>{JSON.stringify(hello, null, 2)}</code>
+        </pre>
+      </div>
+
+      <div {...stylex.props(styles.card)}>
+        <p {...stylex.props(styles.eyebrow, styles.eyebrowSpaced)}>better-auth</p>
+        {isPending ? (
+          <p {...stylex.props(styles.muted)}>Loading…</p>
+        ) : session ? (
+          <TodoList session={session} />
+        ) : (
+          <AuthForm />
+        )}
+      </div>
+
+      <div {...stylex.props(styles.footer)}>
+        <p {...stylex.props(styles.muted)}>Learn more</p>
+        <ul {...stylex.props(styles.list)}>
+          <li>
+            <Link href="https://newt-app.com">Documentation</Link>
+          </li>
+          <li>
+            <Link href="https://github.com/zeevo/newt-app">GitHub</Link>
+          </li>
+          <li>
+            <Link href="https://nextjs.org">Next.js</Link>
+          </li>
+          <li>
+            <Link href="https://nestjs.com">NestJS</Link>
+          </li>
+        </ul>
+      </div>
+    </main>
+  );
+}
+
+const styles = stylex.create({
+  main: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    maxWidth: '32rem',
+    minHeight: '100%',
+    marginInline: 'auto',
+    paddingBlock: '2rem',
+    paddingInline: '1rem',
+    fontSize: '0.875rem',
+  },
+  header: {
+    paddingBottom: '1rem',
+    borderBottomColor: colors.border,
+    borderBottomStyle: 'solid',
+    borderBottomWidth: 1,
+  },
+  titleRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+    paddingBlock: '0.5rem',
+  },
+  logo: {
+    width: '2.5rem',
+    height: 'auto',
+  },
+  h1: {
+    fontSize: '2.25rem',
+    fontWeight: 900,
+    letterSpacing: '-0.025em',
+  },
+  tagline: {
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25rem',
+    padding: '1.5rem',
+    borderColor: colors.border,
+    borderRadius: radii.lg,
+    borderStyle: 'solid',
+    borderWidth: 1,
+  },
+  eyebrow: {
+    fontFamily: fonts.mono,
+    fontSize: '0.75rem',
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+    color: colors.mutedForeground,
+  },
+  eyebrowSpaced: {
+    marginBottom: '0.75rem',
+  },
+  pre: {
+    marginTop: '0.5rem',
+    padding: '0.75rem',
+    fontFamily: fonts.mono,
+    backgroundColor: 'oklch(0.269 0 0 / 0.5)',
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    overflowX: 'auto',
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    paddingBlock: '1rem',
+    paddingInline: '0.5rem',
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    listStylePosition: 'inside',
+    listStyleType: 'disc',
+  },
+  mono: {
+    fontFamily: fonts.mono,
+  },
+  muted: {
+    color: colors.mutedForeground,
+  },
+});
+`
+};
+//#endregion
 //#region src/templates/todo-example/index.ts
 const todoExampleApi = { templates: [
 	todos_module_default,
@@ -12326,6 +13577,7 @@ const todoExampleDi = { templates: [
 ] };
 const todoExampleWeb = { templates: [web_todo_list_default, web_page_default] };
 const todoExampleShadcn = { templates: [shadcn_todo_list_default, shadcn_page_default] };
+const todoExampleStylex = { templates: [stylex_todo_list_default, stylex_page_default] };
 //#endregion
 //#region src/templates/index.ts
 const staticDir = new URL("./static/", import.meta.url);
@@ -12339,7 +13591,7 @@ const E2E_FILES = [
 	"apps/api/vitest.config.e2e.mts"
 ];
 function selectModules(selection) {
-	const { deployment, nest, todoExample, shadcn, database, linter, testing, extras } = selection;
+	const { deployment, nest, todoExample, shadcn, stylex, database, linter, testing, extras } = selection;
 	const deploymentModule = deployment === "standalone" ? deploymentStandalone : deployment === "spa" ? singleProcessStaticExport : null;
 	const webModule = deployment === "spa" ? {
 		...web$1,
@@ -12358,7 +13610,7 @@ function selectModules(selection) {
 		...nest === "off" ? [] : [api$1],
 		database === "postgres" ? dbPostgres : dbSqlite,
 		auth,
-		shadcn ? shadcnUi : ui$1,
+		shadcn ? shadcnUi : stylex ? stylexUi : ui$1,
 		linter === "oxc" ? oxc : eslintConfig,
 		...extras.includes("anti-slop") ? [antiSlop] : [],
 		typescriptConfig,
@@ -12369,7 +13621,7 @@ function selectModules(selection) {
 		...todoExample ? [
 			todoExampleApi,
 			...nest === "di-only" ? [todoExampleDi] : [todoExampleControllers],
-			shadcn ? todoExampleShadcn : todoExampleWeb
+			shadcn ? todoExampleShadcn : stylex ? todoExampleStylex : todoExampleWeb
 		] : []
 	];
 }
@@ -12476,6 +13728,13 @@ function validateExtrasCombo(extras, linter) {
 	};
 	return { valid: true };
 }
+function validateStylingCombo(shadcn, stylex) {
+	if (shadcn && stylex) return {
+		valid: false,
+		error: "--shadcn cannot be combined with --stylex.\nshadcn/ui components are written in Tailwind utility classes, which StyleX does\nnot compile. Pick one styling system: drop --stylex for shadcn/ui, or drop\n--shadcn for StyleX."
+	};
+	return { valid: true };
+}
 function validateDeploymentCombo(deployment, nest) {
 	if (deployment === "spa" && nest === "di-only") return {
 		valid: false,
@@ -12631,6 +13890,7 @@ function buildPayload(report) {
 		ci: detectCi(),
 		explicitFlags: [...report.explicitFlags].sort().join(","),
 		shadcn: selection.shadcn,
+		stylex: selection.stylex,
 		testing: selection.testing,
 		database: selection.database,
 		linter: selection.linter,
@@ -12704,6 +13964,10 @@ async function doInit(options) {
 				message: "Use shadcn/ui?",
 				initialValue: true
 			}),
+			stylex: ({ results }) => results.shadcn ? void 0 : p.confirm({
+				message: "Use StyleX instead of Tailwind?",
+				initialValue: false
+			}),
 			nest: () => p.select({
 				message: "NestJS?",
 				options: [
@@ -12809,6 +14073,7 @@ async function doInit(options) {
 			process.exit(0);
 		} });
 		const useShadcn = options.nonInteractive ? options.shadcn : answers.shadcn ?? true;
+		const useStylex = options.nonInteractive ? options.stylex : answers.stylex ?? false;
 		const testing = options.nonInteractive ? options.testing : answers.testing ?? "jest";
 		const database = options.nonInteractive ? options.database : answers.database ?? "sqlite";
 		const linter = options.nonInteractive ? options.linter : answers.linter ?? "eslint";
@@ -12816,6 +14081,8 @@ async function doInit(options) {
 		const nest = options.nonInteractive ? options.nest : answers.nest ?? "on";
 		const todoExample = options.nonInteractive ? options.includeExample : nest !== "off" && (answers.todoExample ?? true);
 		const extras = options.nonInteractive ? options.extras : answers.extras ?? [];
+		const stylingCombo = validateStylingCombo(useShadcn, useStylex);
+		if (!stylingCombo.valid) throw new Error(stylingCombo.error);
 		const deploymentCombo = validateDeploymentCombo(deployment, nest);
 		if (!deploymentCombo.valid) throw new Error(deploymentCombo.error);
 		const exampleCombo = validateExampleCombo(todoExample, nest);
@@ -12827,6 +14094,7 @@ async function doInit(options) {
 			nest,
 			todoExample,
 			shadcn: useShadcn,
+			stylex: useStylex,
 			database,
 			linter,
 			testing,
@@ -12895,10 +14163,11 @@ async function doInit(options) {
 	}
 }
 const program = new Command();
-program.name("create-newt-app").version(version).description("Create a new newt-app monorepo").argument("[name]").option("-ni, --no-install", "Skip pnpm install", true).option("-ng, --no-git", "Skip git initialization", true).option("--shadcn", "Include shadcn/ui", false).option("--testing <framework>", "Testing framework: vitest or jest", "jest").option("--database <database>", "Database: sqlite or postgres", "sqlite").option("--linter <linter>", "Linter: eslint or oxc", "eslint").option("--deployment <strategy>", "Deployment: none, standalone, or spa", "none").option("--nest <mode>", "NestJS: on, off, or di-only", "on").option("--include-example", "Include the todo example", false).option("--extras <list>", "Extras, comma-separated: anti-slop", "").action(async (name, options, command) => {
+program.name("create-newt-app").version(version).description("Create a new newt-app monorepo").argument("[name]").option("-ni, --no-install", "Skip pnpm install", true).option("-ng, --no-git", "Skip git initialization", true).option("--shadcn", "Include shadcn/ui", false).option("--stylex", "Use StyleX instead of Tailwind", false).option("--testing <framework>", "Testing framework: vitest or jest", "jest").option("--database <database>", "Database: sqlite or postgres", "sqlite").option("--linter <linter>", "Linter: eslint or oxc", "eslint").option("--deployment <strategy>", "Deployment: none, standalone, or spa", "none").option("--nest <mode>", "NestJS: on, off, or di-only", "on").option("--include-example", "Include the todo example", false).option("--extras <list>", "Extras, comma-separated: anti-slop", "").action(async (name, options, command) => {
 	intro(`Create a ${chalk.blue("newt")} app.`);
 	const explicitFlags = Object.entries({
 		shadcn: "--shadcn",
+		stylex: "--stylex",
 		testing: "--testing",
 		database: "--database",
 		linter: "--linter",
@@ -12951,6 +14220,7 @@ program.name("create-newt-app").version(version).description("Create a new newt-
 		git: options.git,
 		nonInteractive,
 		shadcn: options.shadcn,
+		stylex: options.stylex,
 		testing: options.testing,
 		database: options.database,
 		linter: options.linter,