Skip to content

Stylex create app help and templates #1464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abhakat wants to merge 8 commits into
base: main
Choose a base branch
from
+132 −143
Open

Stylex create app help and templates #1464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e461f82
[create-stylex-app] Improve --help output with formatted template list
Jan 26, 2026
745a083
[example-react-router] Remove vite-plugin-devtools-json
Jan 26, 2026
b26d8a1
[example-redwoodsdk] Fix dependency conflicts for create-stylex-app
Jan 26, 2026
a7fd00f
[example-storybook] Fix create-stylex-app compatibility
Jan 26, 2026
5a65781
[example-rollup] Add missing @babel/preset-flow dependency
Jan 26, 2026
2f8083a
Update yarn.lock for example dependency changes
Jan 26, 2026
f9aa382
Publish create-stylex-app to npm
Jan 28, 2026
400f84d
[create-stylex-app] Align version with StyleX versioning scheme
Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions examples/example-react-router/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@
"@vitejs/plugin-rsc": "^0.5.3",
"cross-env": "^10.1.0",
"typescript": "^5.9.3",
"vite": "^7.2.4",
"vite-plugin-devtools-json": "0.2.0"
"vite": "^7.2.4"
},
"version": "0.17.5"
}
4 changes: 0 additions & 4 deletions examples/example-react-router/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ import stylex from '@stylexjs/unplugin';
import rsc from '@vitejs/plugin-rsc/plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
plugins: [
// @ts-expect-error - no types for this yet
stylex.vite({
useCSSLayers: true,
enableDebugClassNames: false,
Expand All @@ -26,7 +24,5 @@ export default defineConfig({
ssr: 'src/entry.ssr.tsx',
},
}),
// @ts-expect-error - no types for this yet
devtoolsJson(),
],
});
5 changes: 3 additions & 2 deletions examples/example-redwoodsdk/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,17 @@
},
"dependencies": {
"@stylexjs/stylex": "0.17.5",
"capnweb": "~0.2.0",
"react": "19.3.0-canary-561ee24d-20251101",
"react-dom": "19.3.0-canary-561ee24d-20251101",
"react-server-dom-webpack": "19.2.1",
"react-server-dom-webpack": "19.3.0-canary-561ee24d-20251101",
"rwsdk": "1.0.0-beta.31",
"@stylexjs/shared-ui": "0.17.5"
},
"devDependencies": {
"@stylexjs/unplugin": "0.17.5",
"@cloudflare/vite-plugin": "^1.15.2",
"@cloudflare/workers-types": "4.20251121.0",
"@cloudflare/workers-types": "^4.20260120.0",
"@types/node": "^24.10.1",
"@types/react": "^19.2.6",
"@types/react-dom": "^19.2.3",
Expand Down
1 change: 1 addition & 0 deletions examples/example-rollup/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"devDependencies": {
"@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-flow": "^7.27.1",
"@babel/preset-react": "^7.17.12",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^26.0.1",
Expand Down
5 changes: 3 additions & 2 deletions examples/example-storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"name": "example-storybook",
"version": "0.17.5",
"scripts": {
"example:dev": "storybook dev -p 6006 --no-open",
"storybook": "storybook dev -p 6006 --no-open",
"build-storybook": "storybook build",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
Expand All @@ -22,8 +23,8 @@
"@typescript-eslint/eslint-plugin": "^8.44.0",
"@typescript-eslint/parser": "^8.44.0",
"@vitejs/plugin-react": "^5.0.3",
"@vitest/browser": "^3.2.4",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/browser": "^4.0.13",
"@vitest/coverage-v8": "^4.0.13",
"autoprefixer": "^10.4.21",
"eslint": "^9.36.0",
"eslint-plugin-import": "^2.32.0",
Expand Down
8 changes: 4 additions & 4 deletions packages/@stylexjs/create-stylex-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{
"name": "@stylexjs/create-stylex-app",
"version": "0.1.0",
"name": "create-stylex-app",
"version": "0.17.6-alpha.2",
"description": "Scaffold a new StyleX project from official templates",
"repository": "https://www.github.com/facebook/stylex",
"license": "MIT",
"private": true,
"bin": {
"create-stylex-app": "./lib/index.js"
},
"files": [
"lib"
"lib",
"templates.json"
],
"scripts": {
"build": "cross-env BABEL_ENV=cjs babel src/ --out-dir lib/ --copy-files",
Expand Down
18 changes: 13 additions & 5 deletions packages/@stylexjs/create-stylex-app/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,17 @@ function parseArgs(args) {
}

function showHelp() {
const templateIds = getBundledTemplates()
.map((t) => t.id)
.join(', ');
const templates = getBundledTemplates();
const maxIdLength = Math.max(...templates.map((t) => t.id.length));

const frameworkList = templates
.map((t) => {
const padding = ' '.repeat(maxIdLength - t.id.length + 2);
const desc = t.description + (t.recommended ? ' (recommended)' : '');
return ` ${t.id}${padding}${desc}`;
})
.join('\n');

console.log(`
${pc.bold('create-stylex-app')} - Create a new StyleX project

Expand All @@ -105,12 +113,12 @@ ${pc.bold('Usage:')}

${pc.bold('Options:')}
-f, --framework <name> Framework to use
-t, --template <source> Custom template (GitHub URL or github:owner/repo/path)
-t, --template <source> Custom template (github:owner/repo/path)
--no-install Skip dependency installation
-h, --help Show this help message

${pc.bold('Available frameworks:')}
${templateIds}
${frameworkList}

${pc.bold('Examples:')}
npx create-stylex-app my-app
Expand Down
Loading