├── .eslintrc.json ├── .gitignore ├── .stylex.json5 ├── README.md ├── next.config.mjs ├── package-lock.json ├── package.json ├── public ├── file-text.svg ├── globe.svg ├── next.svg ├── vercel.svg └── window.svg ├── source └── app │ ├── favicon.ico │ ├── fonts │ ├── GeistMonoVF.woff │ └── GeistVF.woff │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── tokens.stylex.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | /src/ 10 | 11 | # testing 12 | /coverage 13 | 14 | # next.js 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | /build 20 | 21 | # misc 22 | .DS_Store 23 | *.pem 24 | 25 | # debug 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | 30 | # env files (can opt-in for commiting if needed) 31 | .env* 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | next-env.d.ts 39 | -------------------------------------------------------------------------------- /.stylex.json5: -------------------------------------------------------------------------------- 1 | { 2 | input: ["./source"], 3 | output: ["./src"], 4 | cssBundleName: "stylex_bundle.css", 5 | useCSSLayers: true, 6 | babelPresets: [ 7 | ["@babel/preset-typescript", { allExtensions: true, isTSX: true }], 8 | // '@babel/preset-react', 9 | ], 10 | // modules_EXPERIMENTAL: [ 11 | // ['@stylexjs/open-props', { ignore: ['src', '__tests__'] }], 12 | // ], 13 | // watch: true, 14 | } 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. 37 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-15-with-stylex-cli", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "predev": "stylex --config ./.stylex.json5", 7 | "dev": "stylex --config ./.stylex.json5 -w & next dev", 8 | "prestart": "stylex --config ./.stylex.json5 && next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@stylexjs/stylex": "0.7.5", 14 | "next": "15.0.0-rc.0", 15 | "react": "19.0.0-rc-f994737d14-20240522", 16 | "react-dom": "19.0.0-rc-f994737d14-20240522" 17 | }, 18 | "devDependencies": { 19 | "@babel/preset-typescript": "^7.24.7", 20 | "@stylexjs/babel-plugin": "0.7.5", 21 | "@stylexjs/cli": "0.7.5", 22 | "@stylexjs/eslint-plugin": "0.7.5", 23 | "@types/node": "^20", 24 | "@types/react": "^18", 25 | "@types/react-dom": "^18", 26 | "eslint": "^8", 27 | "eslint-config-next": "15.0.0-rc.0", 28 | "typescript": "^5", 29 | "yargs": "^17.7.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /public/file-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /source/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nmn/next-15-with-stylex-cli/b3501eec7fc71f865163220793652c36ddcf2661/source/app/favicon.ico -------------------------------------------------------------------------------- /source/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nmn/next-15-with-stylex-cli/b3501eec7fc71f865163220793652c36ddcf2661/source/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /source/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nmn/next-15-with-stylex-cli/b3501eec7fc71f865163220793652c36ddcf2661/source/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /source/app/globals.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | a { 8 | color: inherit; 9 | text-decoration: none; 10 | } 11 | -------------------------------------------------------------------------------- /source/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | 5 | import * as stylex from "@stylexjs/stylex"; 6 | import { colors } from "./tokens.stylex"; 7 | 8 | const geistSans = localFont({ 9 | src: "./fonts/GeistVF.woff", 10 | variable: "--geist-sans", 11 | }); 12 | const geistMono = localFont({ 13 | src: "./fonts/GeistMonoVF.woff", 14 | variable: "--geist-mono", 15 | }); 16 | 17 | export const metadata: Metadata = { 18 | title: "Create Next App with StyleX CLI", 19 | description: "Generated by create next app", 20 | }; 21 | 22 | export default function RootLayout({ 23 | children, 24 | }: Readonly<{ 25 | children: React.ReactNode; 26 | }>) { 27 | return ( 28 | 29 | 34 | {children} 35 | 36 | 37 | ); 38 | } 39 | 40 | const styles = stylex.create({ 41 | base: { 42 | maxWidth: "100vw", 43 | overflowX: "hidden", 44 | }, 45 | html: { 46 | colorScheme: "light dark", 47 | }, 48 | body: { 49 | color: colors.fg, 50 | backgroundColor: colors.bg, 51 | }, 52 | }); 53 | -------------------------------------------------------------------------------- /source/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import * as stylex from "@stylexjs/stylex"; 3 | import { colors, fonts } from "./tokens.stylex"; 4 | 5 | export default function Home() { 6 | return ( 7 |
8 |
9 | Next.js logo 17 |
    18 |
  1. 19 | Get started by editing{" "} 20 | src/app/page.tsx 21 |
    2. 22 |
  2. 23 | Save and see your changes instantly. 24 |
    3. 25 |
26 |
27 | 33 | Vercel logomark 40 | Deploy now 41 | 42 | 48 | Read our docs 49 | 50 |
51 |
52 | 102 |
103 | ); 104 | } 105 | 106 | const MOBILE = "@media (max-width: 600px)"; 107 | 108 | const styles = stylex.create({ 109 | page: { 110 | display: "grid", 111 | gridTemplateRows: "20px 1fr 20px", 112 | alignItems: "center", 113 | justifyContent: "center", 114 | minHeight: stylex.firstThatWorks("100svh", "100vh"), 115 | padding: { 116 | default: 80, 117 | [MOBILE]: 32, 118 | }, 119 | paddingBottom: 80, 120 | gap: 64, 121 | fontSynthesis: "none", 122 | }, 123 | main: { 124 | display: "flex", 125 | flexDirection: "column", 126 | gap: 32, 127 | gridRowStart: "2", 128 | alignItems: { 129 | default: null, 130 | [MOBILE]: "center", 131 | }, 132 | }, 133 | ol: { 134 | fontFamily: fonts["--geist-mono"], 135 | paddingLeft: 0, 136 | margin: 0, 137 | fontSize: 14, 138 | lineHeight: "24px", 139 | letterSpacing: "-0.01em", 140 | listStylePosition: "inside", 141 | textAlign: { 142 | default: null, 143 | [MOBILE]: "center", 144 | }, 145 | }, 146 | li: { 147 | marginBottom: { 148 | default: 8, 149 | ":last-of-type": 0, 150 | }, 151 | }, 152 | code: { 153 | fontFamily: "inherit", 154 | background: colors.grayAlpha100, 155 | paddingBlock: 2, 156 | paddingInline: 4, 157 | borderRadius: 4, 158 | fontWeight: 600, 159 | }, 160 | ctas: { 161 | display: "flex", 162 | gap: 16, 163 | flexDirection: { 164 | default: null, 165 | [MOBILE]: "column", 166 | }, 167 | }, 168 | ctaLink: { 169 | appearance: "none", 170 | borderRadius: 128, 171 | height: { 172 | default: 48, 173 | [MOBILE]: 40, 174 | }, 175 | paddingInline: { 176 | default: 20, 177 | [MOBILE]: 16, 178 | }, 179 | fontFamily: fonts["--geist-sans"], 180 | borderWidth: 1, 181 | borderStyle: "solid", 182 | borderColor: "transparent", 183 | transitionProperty: "background, color, borderColor", 184 | transitionDuration: "0.2s", 185 | cursor: "pointer", 186 | display: "flex", 187 | alignItems: "center", 188 | justifyContent: "center", 189 | fontSize: { 190 | default: 16, 191 | [MOBILE]: 14, 192 | }, 193 | lineHeight: "20px", 194 | fontWeight: 500, 195 | }, 196 | linkPrimary: { 197 | background: { 198 | default: colors.fg, 199 | ":hover": colors.btnPrimaryHover, 200 | }, 201 | color: colors.bg, 202 | gap: 8, 203 | }, 204 | linkSecondary: { 205 | borderColor: { 206 | default: "transparent", 207 | ":hover": colors.grayAlpha200, 208 | }, 209 | minWidth: { 210 | default: 180, 211 | [MOBILE]: "auto", 212 | }, 213 | }, 214 | footer: { 215 | fontFamily: fonts["--geist-sans"], 216 | gridRowStart: "3", 217 | display: "flex", 218 | gap: 24, 219 | flexWrap: { 220 | default: null, 221 | [MOBILE]: "wrap", 222 | }, 223 | alignItems: { 224 | default: null, 225 | [MOBILE]: "center", 226 | }, 227 | justifyContent: { 228 | default: null, 229 | [MOBILE]: "center", 230 | }, 231 | }, 232 | footerA: { 233 | display: "flex", 234 | alignItems: "center", 235 | gap: 8, 236 | textDecoration: { 237 | default: "none", 238 | ":hover": "underline", 239 | }, 240 | textUnderlineOffset: 4, 241 | }, 242 | footerImg: { 243 | flexShrink: 0, 244 | }, 245 | logo: { 246 | filter: { 247 | default: null, 248 | "@media (prefers-color-scheme: dark)": "invert()", 249 | }, 250 | }, 251 | }); 252 | -------------------------------------------------------------------------------- /source/app/tokens.stylex.ts: -------------------------------------------------------------------------------- 1 | import * as stylex from "@stylexjs/stylex"; 2 | 3 | export const colors = stylex.defineVars({ 4 | bg: { 5 | default: "#ffffff", 6 | "@media (prefers-color-scheme: dark)": "#0a0a0a", 7 | }, 8 | fg: { 9 | default: "#171717", 10 | "@media (prefers-color-scheme: dark)": "#ededed", 11 | }, 12 | grayAlpha200: { 13 | default: "rgba(0, 0, 0, 0.08)", 14 | "@media (prefers-color-scheme: dark)": "rgba(255, 255, 255, 0.145)", 15 | }, 16 | grayAlpha100: { 17 | default: "rgba(0, 0, 0, 0.05)", 18 | "@media (prefers-color-scheme: dark)": "rgba(255, 255, 255, 0.145)", 19 | }, 20 | btnPrimaryHover: { 21 | default: "#383838", 22 | "@media (prefers-color-scheme: dark)": "#cccccc", 23 | }, 24 | btnSecondaryHover: { 25 | default: "#f2f2f2", 26 | "@media (prefers-color-scheme: dark)": "#1a1a1a", 27 | }, 28 | }); 29 | 30 | // The fonts will be loaded by `next/font`. 31 | export const fonts = stylex.defineVars({ 32 | "--geist-sans": "sans-serif", 33 | "--geist-mono": "Courier New, monospace", 34 | }); 35 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./source/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | --------------------------------------------------------------------------------