From 5c3a8f3953819d1b1f3154e25f4b08029a608ffe Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 7 Dec 2023 18:12:02 -0800
Subject: [PATCH] Update setup instructions (#95)

* Update setup instructions

* Remove stylex() use from examples
---
 .github/CONTRIBUTING.md                       |  3 +-
 .gitignore                                    |  7 ++--
 .prettierignore                               |  2 +
 apps/docs/README.md                           | 41 ++-----------------
 apps/docs/components/YouTube.js               |  2 +-
 .../docs/api/configuration/babel-plugin.mdx   |  8 ++--
 .../docs/docs/learn/02-thinking-in-stylex.mdx |  2 +-
 apps/docs/package.json                        |  5 +--
 apps/nextjs-example/app/page.tsx              | 18 ++++----
 apps/nextjs-example/typetests/test3.tsx       |  1 -
 apps/rollup-example/index.js                  |  2 +-
 package-lock.json                             |  1 +
 package.json                                  |  1 +
 13 files changed, 29 insertions(+), 64 deletions(-)

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 828ee061..82bd21b8 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -59,7 +59,8 @@ npm run build
 
 ## Documentation
 
-First build the StyleX packages, then run the docs locally:
+If necessary, first build the StyleX packages (`npm run build`), then start the
+docs locally:
 
 ```
 npm run start -w docs
diff --git a/.gitignore b/.gitignore
index f5b0fdf4..30af9c9c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,9 @@
 *.log*
+.build
+.docusaurus
+.stylex
 build
 coverage
 dist
 lib
 node_modules
-.turbo
-apps/docs/.stylex/*
-apps/rollup-example/.build
-apps/webpack-example/.build
diff --git a/.prettierignore b/.prettierignore
index 2bc48a0f..1b1bd751 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,7 @@
 .build
+.docusaurus
 .next
+.stylex
 build
 coverage
 lib
diff --git a/apps/docs/README.md b/apps/docs/README.md
index 9d0b858b..8c22d7d4 100644
--- a/apps/docs/README.md
+++ b/apps/docs/README.md
@@ -1,36 +1,11 @@
-# Website
+# StyleX website
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
-### build stylex packages
+## Local Development
 
-- stylex actual package, and then the @stylexjs/babel-plugin plugin in node_modules
-
-```bash
-$ npm run build -w @stylexjs/stylex -w @stylexjs/shared -w @stylexjs/eslint-plugin -w @stylexjs/babel-plugin
-```
-
-### Installation
-
-```bash
-$ npm install 
-```
-
-### Local Development
-
-```bash
-$ npm start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```bash
-$ npm run build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
+Local development should be performed from the monorepo root.
+Please see the monorepo's CONTRIBUTING.md file for more instructions.
 
 ### Deployment
 
@@ -47,11 +22,3 @@ $ GIT_USER=<Your GitHub username> npm run deploy
 ```
 
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push it to the `gh-pages` branch.
-
-### Continuous Integration
-
-Some common defaults for linting/formatting have been set for you. If you integrate your project with an open source Continuous Integration system (e.g. Travis CI, CircleCI), you may check for issues using the following command.
-
-```bash
-$ npm run ci
-```
diff --git a/apps/docs/components/YouTube.js b/apps/docs/components/YouTube.js
index ff8b63e5..9d4a2eff 100644
--- a/apps/docs/components/YouTube.js
+++ b/apps/docs/components/YouTube.js
@@ -32,12 +32,12 @@ export default function YouTube({width: _w, height: _h, src, title}) {
       <iframe
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen={true}
-        className={stylex(styles.iframe)}
         frameBorder={0}
         height={'100%'}
         src={src}
         title={title}
         width={'100%'}
+        {...stylex.props(styles.iframe)}
       />
     </div>
   );
diff --git a/apps/docs/docs/api/configuration/babel-plugin.mdx b/apps/docs/docs/api/configuration/babel-plugin.mdx
index f54bb221..bc0a97fd 100644
--- a/apps/docs/docs/api/configuration/babel-plugin.mdx
+++ b/apps/docs/docs/api/configuration/babel-plugin.mdx
@@ -26,7 +26,7 @@ When `true`, StyleX will insert debug class names to identify the source of the
 test: boolean // Default: false
 ```
 
-When `true`, StyleX will only output debug classNames identifying the 
+When `true`, StyleX will only output debug classNames identifying the
 source of the styles.
 
 It will *not* generate any styles or functional classNames.
@@ -105,8 +105,8 @@ genConditionalClasses: boolean // Default: false
 ```
 
 Enable experimental compile-time optimization to pre-compute
-`stylex.props` and `stylex()` function calls with conditional styles
-when all possible styles used are defined in the same file and known
+`stylex.props` function calls with conditional styles when all
+possible styles used are defined in the same file and known
 at compile-time.
 
 <hr />
@@ -152,5 +152,3 @@ This is required if you plan to use StyleX's theming APIs.
 
 **NOTE**: While theming APIs are stable, the shape of this configuration option
 may change in the future.
-
-
diff --git a/apps/docs/docs/learn/02-thinking-in-stylex.mdx b/apps/docs/docs/learn/02-thinking-in-stylex.mdx
index 558affb3..c04ef0a0 100755
--- a/apps/docs/docs/learn/02-thinking-in-stylex.mdx
+++ b/apps/docs/docs/learn/02-thinking-in-stylex.mdx
@@ -160,7 +160,7 @@ function MyComponent({style}) {
 ```
 
 This is a little more code, but the runtime cost is still minimal
-because of how fast the `stylex()` and `stylex.props()` functions are.
+because of how fast the `stylex.props()` function is.
 
 Most other styling solutions don't enable composition of styles across file
 boundaries. The state of the art is to combine lists of class names.
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 3bc72c7f..433b3d8b 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -13,10 +13,7 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "ci": "npm run lint && npm run format:diff",
-    "lint": "eslint --cache \"**/*.js\" && stylelint \"**/*.css\"",
-    "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
-    "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,md,mdx}\""
+    "lint": "eslint --cache \"**/*.js\" && stylelint \"**/*.css\""
   },
   "dependencies": {
     "@docusaurus/core": "2.4.1",
diff --git a/apps/nextjs-example/app/page.tsx b/apps/nextjs-example/app/page.tsx
index 21bd1858..6fe38e8d 100644
--- a/apps/nextjs-example/app/page.tsx
+++ b/apps/nextjs-example/app/page.tsx
@@ -15,7 +15,7 @@ const MEDIA_MOBILE = '@media (max-width: 700px)' as const;
 const MEDIA_TABLET =
   '@media (min-width: 701px) and (max-width: 1120px)' as const;
 
-const s = stylex.create({
+const style = stylex.create({
   main: {
     display: 'flex',
     flexDirection: 'column',
@@ -137,20 +137,20 @@ const HOMEPAGE = 'https://stylexjs.com';
 
 export default function Home() {
   return (
-    <main className={stylex(s.main)}>
-      <div className={stylex(s.description)}>
-        <p className={stylex(s.descP)}>
+    <main {...stylex.props(style.main)}>
+      <div {...stylex.props(style.description)}>
+        <p {...stylex.props(style.descP)}>
           Get started by editing&nbsp;
-          <code className={stylex(s.code)}>app/page.tsx</code>
+          <code {...stylex.props(style.code)}>app/page.tsx</code>
         </p>
       </div>
-      <div className={stylex(s.hero)}>
-        <h1 className={stylex(s.h1)}>
-          Next.js App Dir<span className={stylex(s.emoji)}>♥️</span>️StyleX
+      <div {...stylex.props(style.hero)}>
+        <h1 {...stylex.props(style.h1)}>
+          Next.js App Dir<span {...stylex.props(style.emoji)}>♥️</span>️StyleX
         </h1>
       </div>
 
-      <div className={stylex(s.grid)}>
+      <div {...stylex.props(style.grid)}>
         <Card
           body="Learn how to use StyleX to build UIs"
           href={`${HOMEPAGE}/docs/learn/`}
diff --git a/apps/nextjs-example/typetests/test3.tsx b/apps/nextjs-example/typetests/test3.tsx
index 6aab2e09..46ce9b19 100644
--- a/apps/nextjs-example/typetests/test3.tsx
+++ b/apps/nextjs-example/typetests/test3.tsx
@@ -14,7 +14,6 @@ import type { StaticStyles, StyleXStyles } from '@stylexjs/stylex';
 
 type Props = {
   xstyle?: StyleXStyles;
-
   staticXstyle?: StaticStyles;
 };
 
diff --git a/apps/rollup-example/index.js b/apps/rollup-example/index.js
index 43576c20..f6c20d21 100644
--- a/apps/rollup-example/index.js
+++ b/apps/rollup-example/index.js
@@ -15,5 +15,5 @@ import { lotsOfStyles } from './lotsOfStyles';
 const styles = lotsOfStyles.map((defs) => Object.values(defs));
 
 export default function App() {
-  return stylex(styles);
+  return stylex.props(styles);
 }
diff --git a/package-lock.json b/package-lock.json
index 384b0f7b..1f0a5586 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "stylex-monorepo",
       "version": "0.3.0",
+      "hasInstallScript": true,
       "license": "MIT",
       "workspaces": [
         "packages/shared",
diff --git a/package.json b/package.json
index 54731ce9..06e02a40 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "prettier:report": "prettier --check \"**/*.js\"",
     "lint": "npm run lint:report -- --fix",
     "lint:report": "eslint packages apps",
+    "postinstall": "npm run build",
     "precommit": "npm run prettier && npm run flow && npm run lint && npm run test",
     "pretest": "npm run build",
     "test": "npm run test --workspaces --if-present",