[experiment] Docs/fumadocs waku

.github/CONTRIBUTING.md

@@ -16,54 +16,54 @@ Fork, then clone the repo:
 git clone https://github.com/your-username/stylex.git
 ```
 
-Make sure you have npm@>=7 and node@>=16 installed. Then install the package
+Make sure you have [email protected] and node@>=16 installed. Then install the package
 dependencies:
 
 ```
-npm install
+yarn install
 ```
 
 ## Automated tests
 
 To run the linter:
 
 ```
-npm run lint
+yarn lint
 ```
 
 To run flow:
 
 ```
-npm run flow
+yarn flow
 ```
 
 ## Compile and build
 
 To compile the source code:
 
 ```
-npm run build
+yarn build
 ```
 
 To run all the tests (will build automatically):
 
 ```
-npm run test
+yarn test
 ```
 
 …in watch mode (will build only once):
 
 ```
-npm run test -- --watch
+yarn test --watch
 ```
 
 ## Documentation
 
-If necessary, first build the StyleX packages (`npm run build`), then start the
+If necessary, first build the StyleX packages (`yarn build`), then start the
 docs locally:
 
 ```
-npm run start -w docs
+yarn workspace docs start
 ```
 
 ### New Features
@@ -81,7 +81,7 @@ want to accept.
 1. Fork the repository and create your branch from `main`.
 2. If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-4. Ensure the tests pass (`npm run test`).
+4. Ensure the tests pass (`yarn test`).
 
 You can now submit a pull request, referencing any issues it addresses.
 

.github/workflows/benchmarks.yml

@@ -12,6 +12,9 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version: '22.x'
+        cache: 'yarn'
+        cache-dependency-path: yarn.lock
+    - run: corepack prepare [email protected] --activate
     - name: 'Setup temporary files'
       run: |
         echo "BASE_JSON=$(mktemp)" >> $GITHUB_ENV
@@ -20,8 +23,8 @@ jobs:
       run: |
         git checkout -f ${{ github.event.pull_request.base.sha }}
         git clean -fdx
-        npm install --loglevel error
-        if npm run perf -w benchmarks -- -o ${{ env.BASE_JSON }}; then
+        yarn install --frozen-lockfile --silent
+        if yarn workspace benchmarks run perf -- -o ${{ env.BASE_JSON }}; then
           echo "Ran successfully on base branch"
         else
           echo "{}" > ${{ env.BASE_JSON }}  # Empty JSON as default
@@ -31,14 +34,14 @@ jobs:
       run: |
         git checkout -f ${{ github.event.pull_request.head.sha }}
         git clean -fdx
-        npm install --loglevel error
-        npm run perf -w benchmarks -- -o ${{ env.PATCH_JSON }}
+        yarn install --frozen-lockfile --silent
+        yarn workspace benchmarks run perf -- -o ${{ env.PATCH_JSON }}
         echo "Ran successfully on patch branch"
     - name: 'Collect results'
       id: collect
       run: |
         echo "table<<EOF" >> $GITHUB_OUTPUT
-        npm run compare -w benchmarks -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown
+        yarn workspace benchmarks run compare -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown
         cat markdown >> $GITHUB_OUTPUT
         echo "EOF" >> $GITHUB_OUTPUT
     - name: 'Post comment'
@@ -63,6 +66,9 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version: '22.x'
+        cache: 'yarn'
+        cache-dependency-path: yarn.lock
+    - run: corepack prepare [email protected] --activate
     - name: 'Setup temporary files'
       run: |
         echo "BASE_JSON=$(mktemp)" >> $GITHUB_ENV
@@ -71,8 +77,8 @@ jobs:
       run: |
         git checkout -f ${{ github.event.pull_request.base.sha }}
         git clean -fdx
-        npm install --loglevel error
-        if npm run size -w benchmarks -- -o ${{ env.BASE_JSON }}; then
+        yarn install --frozen-lockfile --silent
+        if yarn workspace benchmarks run size -- -o ${{ env.BASE_JSON }}; then
           echo "Ran successfully on base branch"
         else
           echo "{}" > ${{ env.BASE_JSON }}  # Empty JSON as default
@@ -82,14 +88,14 @@ jobs:
       run: |
         git checkout -f ${{ github.event.pull_request.head.sha }}
         git clean -fdx
-        npm install --loglevel error
-        npm run size -w benchmarks -- -o ${{ env.PATCH_JSON }}
+        yarn install --frozen-lockfile --silent
+        yarn workspace benchmarks run size -- -o ${{ env.PATCH_JSON }}
         echo "Ran successfully on patch branch"
     - name: 'Collect results'
       id: collect
       run: |
         echo "table<<EOF" >> $GITHUB_OUTPUT
-        npm run compare -w benchmarks -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown
+        yarn workspace benchmarks run compare -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown
         cat markdown >> $GITHUB_OUTPUT
         echo "EOF" >> $GITHUB_OUTPUT
     - name: 'Post comment'

.github/workflows/tests.yml

@@ -15,8 +15,11 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '22.x'
-      - run: npm install
-      - run: npm run flow
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
+      - run: corepack prepare [email protected] --activate
+      - run: yarn install --frozen-lockfile
+      - run: yarn flow
 
   packages:
     runs-on: ubuntu-latest
@@ -25,8 +28,11 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '22.x'
-      - run: npm install
-      - run: npm run test:packages
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
+      - run: corepack prepare [email protected] --activate
+      - run: yarn install --frozen-lockfile
+      - run: yarn test:packages
 
   prettier:
     runs-on: ubuntu-latest
@@ -35,8 +41,11 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '22.x'
-      - run: npm install
-      - run: npm run prettier:report
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
+      - run: corepack prepare [email protected] --activate
+      - run: yarn install --frozen-lockfile
+      - run: yarn prettier:report
 
   lint:
     runs-on: ubuntu-latest
@@ -45,8 +54,11 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '22.x'
-      - run: npm install
-      - run: npm run lint:report
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
+      - run: corepack prepare [email protected] --activate
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint:report
 
   spelling:
     runs-on: ubuntu-latest

.github/workflows/typos.toml

@@ -11,3 +11,4 @@ extend-exclude = [
 [default.extend-words]
 # Ignore false-positives
 stylex = "stylex"
+nd = "nd"

.prettierignore

@@ -7,9 +7,9 @@ coverage
 lib
 flow_modules
 node_modules
-*.mdx
 **/__mocks__/snapshot*
 packages/benchmarks/size/fixtures/lotsOfStyles.js
 flow-typed
 examples/example-storybook/storybook-static
-examples/example-cli/src
+examples/example-cli/src
+packages/docs/.source

examples/example-cli/source/app/Counter.tsx

@@ -8,7 +8,12 @@
 'use client';
 
 import * as stylex from '@stylexjs/stylex';
-import { spacing, text, globalTokens as $, colors } from '@/app/globalTokens.stylex';
+import {
+  spacing,
+  text,
+  globalTokens as $,
+  colors,
+} from '@/app/globalTokens.stylex';
 import { useState } from 'react';
 
 export default function Counter() {

examples/example-cli/source/app/globalTokens.stylex.ts

@@ -298,5 +298,5 @@ export const colors = stylex.defineVars({
   gray4: '#ced4da',
   gray8: '#343a40',
   gray9: '#212529',
-  lime7: '#74b816'
-})
+  lime7: '#74b816',
+});

examples/example-cli/source/components/Card.tsx

@@ -8,7 +8,12 @@
  */
 
 import * as stylex from '@stylexjs/stylex';
-import { globalTokens as $, spacing, text, colors } from '../app/globalTokens.stylex';
+import {
+  globalTokens as $,
+  spacing,
+  text,
+  colors,
+} from '../app/globalTokens.stylex';
 import { tokens } from '../app/CardTokens.stylex';
 
 type Props = Readonly<{

examples/example-nextjs/app/Counter.tsx

@@ -10,7 +10,12 @@
 'use client';
 
 import * as stylex from '@stylexjs/stylex';
-import { spacing, text, globalTokens as $, colors } from './globalTokens.stylex';
+import {
+  spacing,
+  text,
+  globalTokens as $,
+  colors,
+} from './globalTokens.stylex';
 import { useState } from 'react';
 
 export default function Counter() {

examples/example-nextjs/app/globalTokens.stylex.ts

@@ -298,5 +298,5 @@ export const colors = stylex.defineVars({
   gray4: '#ced4da',
   gray8: '#343a40',
   gray9: '#212529',
-  lime7: '#74b816'
-})
+  lime7: '#74b816',
+});

examples/example-react-router/src/entry.rsc.tsx

@@ -5,10 +5,10 @@ import {
   decodeReply,
   loadServerAction,
   renderToReadableStream,
-} from "@vitejs/plugin-rsc/rsc";
-import { unstable_matchRSCServerRequest as matchRSCServerRequest } from "react-router";
+} from '@vitejs/plugin-rsc/rsc';
+import { unstable_matchRSCServerRequest as matchRSCServerRequest } from 'react-router';
 
-import { routes } from "./routes/config";
+import { routes } from './routes/config';
 
 function fetchServer(request: Request) {
   return matchRSCServerRequest({
@@ -35,8 +35,8 @@ function fetchServer(request: Request) {
 export default async function handler(request: Request) {
   // Import the generateHTML function from the client environment
   const ssr = await import.meta.viteRsc.loadModule<
-    typeof import("./entry.ssr")
-  >("ssr", "index");
+    typeof import('./entry.ssr')
+  >('ssr', 'index');
 
   return ssr.generateHTML(request, fetchServer);
 }

examples/example-react-router/src/entry.ssr.tsx

@@ -1,9 +1,9 @@
-import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
-import { renderToReadableStream as renderHTMLToReadableStream } from "react-dom/server.edge";
+import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr';
+import { renderToReadableStream as renderHTMLToReadableStream } from 'react-dom/server.edge';
 import {
   unstable_routeRSCServerRequest as routeRSCServerRequest,
   unstable_RSCStaticRouter as RSCStaticRouter,
-} from "react-router";
+} from 'react-router';
 
 export async function generateHTML(
   request: Request,
@@ -20,10 +20,10 @@ export async function generateHTML(
     async renderHTML(getPayload) {
       const payload = await getPayload();
       const formState =
-        payload.type === "render" ? await payload.formState : undefined;
+        payload.type === 'render' ? await payload.formState : undefined;
 
       const bootstrapScriptContent =
-        await import.meta.viteRsc.loadBootstrapScriptContent("index");
+        await import.meta.viteRsc.loadBootstrapScriptContent('index');
 
       return await renderHTMLToReadableStream(
         <RSCStaticRouter getPayload={getPayload} />,

examples/example-react-router/src/routes/config.ts

@@ -1,21 +1,21 @@
-import type { unstable_RSCRouteConfig as RSCRouteConfig } from "react-router";
+import type { unstable_RSCRouteConfig as RSCRouteConfig } from 'react-router';
 
 export function routes() {
   return [
     {
-      id: "root",
-      path: "",
-      lazy: () => import("./root/route"),
+      id: 'root',
+      path: '',
+      lazy: () => import('./root/route'),
       children: [
         {
-          id: "home",
+          id: 'home',
           index: true,
-          lazy: () => import("./home/route"),
+          lazy: () => import('./home/route'),
         },
         {
-          id: "about",
-          path: "about",
-          lazy: () => import("./about/route"),
+          id: 'about',
+          path: 'about',
+          lazy: () => import('./about/route'),
         },
       ],
     },

examples/example-react-router/src/routes/root/route.tsx

@@ -1,9 +1,9 @@
-import { Outlet } from "react-router";
-import "../../stylex.css";
+import { Outlet } from 'react-router';
+import '../../stylex.css';
 
-import { Layout as ClientLayout } from "./client";
+import { Layout as ClientLayout } from './client';
 
-export { ErrorBoundary } from "./client";
+export { ErrorBoundary } from './client';
 
 export function Layout({ children }: { children: React.ReactNode }) {
   // This is necessary for the bundler to inject the needed CSS assets.

examples/example-redwoodsdk/src/app/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { Welcome } from "./Welcome.js";
+import { Welcome } from './Welcome.js';
 
 export const Home = () => {
   // _Feel free to delete this element and its import_

examples/example-redwoodsdk/src/app/shared/links.ts

@@ -1,3 +1,3 @@
-import { defineLinks } from "rwsdk/router";
+import { defineLinks } from 'rwsdk/router';
 
-export const link = defineLinks(["/"]);
+export const link = defineLinks(['/']);

examples/example-redwoodsdk/src/client.tsx

@@ -1,3 +1,3 @@
-import { initClient } from "rwsdk/client";
+import { initClient } from 'rwsdk/client';
 
 initClient();