Update setup instructions (#95)

* Update setup instructions

* Remove stylex() use from examples

.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

.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

.prettierignore

@@ -1,5 +1,7 @@
 .build
+.docusaurus
 .next
+.stylex
 build
 coverage
 lib

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
-```

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>
   );

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.
-
-

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.

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",

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/`}

apps/nextjs-example/typetests/test3.tsx

@@ -14,7 +14,6 @@ import type { StaticStyles, StyleXStyles } from '@stylexjs/stylex';
 
 type Props = {
   xstyle?: StyleXStyles;
-
   staticXstyle?: StaticStyles;
 };
 

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);
 }

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",