chore: oxc format and add rule

.github/workflows/format.yml

@@ -0,0 +1,42 @@
+name: 💅 Format
+
+on:
+  push:
+    branches:
+      - main
+      - 1.x
+      - dev
+      - release-*
+    tags-ignore:
+      - v*
+
+  pull_request:
+    branches:
+      - main
+      - 1.x
+      - dev
+      - release-*
+
+jobs:
+  format:
+    name: "💅 Check formatting"
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - name: Use Node.js from .nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          registry-url: "https://registry.npmjs.org"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: 💅 Check formatting
+        run: pnpm format:check

.github/workflows/issues.yml

@@ -1,4 +1,4 @@
-name: 'Close issues'
+name: "Close issues"
 
 on:
   issues:

CONTRIBUTING.md

@@ -62,14 +62,14 @@ Once the PR is there, **create an issue** and link the PR (mention the PR as you
 
 - If what you'd like to change needs e2e testing (i.e. you need a working build to test your feature), use playwright (see the `/app/tests/e2e` directory for examples).
 - If what you'd like to change is specific to a component, function (i.e. you need a unit test), use Vitest. You can find examples in the `/app/tests/` directory, look for the .tests.ts/.test.tsx files.
-    - Note: Vitest is also set-up to test individual components - have a look at `/app/tests/routes/(basic).browser.test.tsx` for an example.
+  - Note: Vitest is also set-up to test individual components - have a look at `/app/tests/routes/(basic).browser.test.tsx` for an example.
 
 #### Testing conventions:
 
 - For e2e test, simply place them in the `apps/tests/e2e` directory. The project is configured to run anything found in that directory via playwright as an e2e test.
 - For unit tests, co-locate them in the same place as the component or function they test:
-    - E.g. If you're testing `/app/tests/MyComponent.tsx`, create a file named `/app/tests/MyComponent.test.browser.tsx` in the same directory. Note the `.browser` part - that's important to tell Vitest that this test should run in a browser environment.
-    - For server-side unit tests, use the same placement conventions as described for components, but create a file named `/app/tests/myfeature.test.server.ts` in the same directory. Using `.server` in the filename tells Vitest that this test should run in a node environment.
+  - E.g. If you're testing `/app/tests/MyComponent.tsx`, create a file named `/app/tests/MyComponent.test.browser.tsx` in the same directory. Note the `.browser` part - that's important to tell Vitest that this test should run in a browser environment.
+  - For server-side unit tests, use the same placement conventions as described for components, but create a file named `/app/tests/myfeature.test.server.ts` in the same directory. Using `.server` in the filename tells Vitest that this test should run in a node environment.
 
 > [!IMPORTANT]
 > Mark the **allow edit by the maintainers** so we can more easily investigate the failing test and propose a fix. Otherwise we may need to close your PR and cherry-pick your commit.
@@ -78,6 +78,8 @@ Once the PR is there, **create an issue** and link the PR (mention the PR as you
 
 We have a set of rules defined in the `.editorconfig` and `.oxfmtrc.json` files. Please format your code before opening a PR, so that we keep the codebase consistent. Regardless of what editor you use, running `pnpm format` will format your code according to our rules.
 
+CI runs `pnpm format:check` on every PR and fails if anything is unformatted, so run `pnpm format` before pushing.
+
 ---
 
 If you have read all the way here, you're already a champ! 🏆

README.md

@@ -16,7 +16,7 @@
 
 > [!IMPORTANT]
 > This is the branch for the SolidStart 2.0.0-alpha that is currently under heavy development.
-> 
+>
 > Current SolidStart is maintained at [`1.x`](https://github.com/solidjs/solid-start/tree/1.x).
 
 ## Prerequisites

apps/fixtures/bare/src/app.css

@@ -1,5 +1,6 @@
 body {
-  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 a {

apps/fixtures/bare/tsconfig.json

@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"],
-    },
-  },
+      "~/*": ["./src/*"]
+    }
+  }
 }

apps/fixtures/basic/src/app.css

@@ -1,5 +1,6 @@
 body {
-  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 a {

apps/fixtures/basic/src/components/Counter.css

@@ -18,4 +18,4 @@
 
 .increment:active {
   background-color: rgba(68, 107, 158, 0.2);
-}
+}

apps/fixtures/basic/tsconfig.json

@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"],
-    },
-  },
+      "~/*": ["./src/*"]
+    }
+  }
 }

apps/fixtures/css/tsconfig.json

@@ -12,8 +12,8 @@
     "noEmit": true,
     "isolatedModules": true,
     "paths": {
-      "~/*": ["./src/*"],
+      "~/*": ["./src/*"]
     },
-    "types": ["@solidjs/start/env"],
-  },
+    "types": ["@solidjs/start/env"]
+  }
 }

apps/fixtures/experiments/src/app.css

@@ -1,5 +1,6 @@
 body {
-  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 a {

apps/fixtures/experiments/src/components/Counter.css

@@ -18,4 +18,4 @@
 
 .increment:active {
   background-color: rgba(68, 107, 158, 0.2);
-}
+}

apps/fixtures/experiments/tsconfig.json

@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"],
-    },
-  },
+      "~/*": ["./src/*"]
+    }
+  }
 }

apps/fixtures/hackernews/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fixture-hackernews",
-  "type": "module",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "preview": "vite preview",

apps/fixtures/hackernews/src/app.css

@@ -1,5 +1,7 @@
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
   font-size: 15px;
   background-color: #f2f3f5;
   margin: 0;
@@ -98,7 +100,8 @@ a {
   padding-top: 45px;
 }
 
-.news-list, .news-list-nav {
+.news-list,
+.news-list-nav {
   background-color: #fff;
   border-radius: 2px;
 }
@@ -160,17 +163,20 @@ a {
   margin-top: -10px;
 }
 
-.news-item .host, .news-item .meta {
+.news-item .host,
+.news-item .meta {
   font-size: 0.85em;
   color: #626262;
 }
 
-.news-item .host a, .news-item .meta a {
+.news-item .host a,
+.news-item .meta a {
   color: #626262;
   text-decoration: underline;
 }
 
-.news-item .host a:hover, .news-item .meta a:hover {
+.news-item .host a:hover,
+.news-item .meta a:hover {
   color: #335d92;
 }
 
@@ -187,7 +193,9 @@ a {
   margin-right: 0.5em;
 }
 
-.item-view-header .host, .item-view-header .meta, .item-view-header .meta a {
+.item-view-header .host,
+.item-view-header .meta,
+.item-view-header .meta a {
   color: #626262;
 }
 
@@ -234,7 +242,9 @@ a {
   position: relative;
 }
 
-.comment .by, .comment .text, .comment .toggle {
+.comment .by,
+.comment .text,
+.comment .toggle {
   font-size: 0.9em;
   margin: 1em 0;
 }

apps/fixtures/hackernews/tsconfig.json

@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"],
-    },
-  },
+      "~/*": ["./src/*"]
+    }
+  }
 }

apps/fixtures/notes/src/app.css

@@ -17,7 +17,9 @@ ol[class] {
   z-index: 1;
 }
 
-solid-island, solid-children, outlet-wrapper {
+solid-island,
+solid-children,
+outlet-wrapper {
   display: contents;
 }
 
@@ -119,10 +121,9 @@ select {
   --outline-box-shadow-contrast: 0 0 0 2px var(--navy-blue);
 
   /* Fonts */
-  --sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Ubuntu, Helvetica, sans-serif;
-  --monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
-    monospace;
+  --sans-serif:
+    -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Helvetica, sans-serif;
+  --monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 }
 
 html {
@@ -246,7 +247,7 @@ hr {
   border-radius: 100px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  padding: 6px 20px ;
+  padding: 6px 20px;
   cursor: pointer;
   font-weight: 700;
   outline-style: none;
@@ -298,7 +299,9 @@ ul.notes-list {
 }
 
 .sidebar {
-  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 8px 24px rgba(0, 0, 0, 0.1),
+    0px 2px 2px rgba(0, 0, 0, 0.1);
   overflow-y: scroll;
   z-index: 1000;
   flex-shrink: 0;
@@ -310,7 +313,7 @@ ul.notes-list {
   background: var(--white);
 }
 .dark .sidebar {
-  background:#151d28;
+  background: #151d28;
 }
 .sidebar-header {
   letter-spacing: 0.15em;
@@ -402,7 +405,9 @@ ul.notes-list {
   visibility: hidden;
   opacity: 0;
   cursor: default;
-  transition: visibility 0s linear 20ms, opacity 300ms;
+  transition:
+    visibility 0s linear 20ms,
+    opacity 300ms;
   outline-style: none;
 }
 .sidebar-note-toggle-expand:focus {
@@ -414,7 +419,9 @@ ul.notes-list {
 .sidebar-note-toggle-expand:focus {
   visibility: visible;
   opacity: 1;
-  transition: visibility 0s linear 0s, opacity 300ms;
+  transition:
+    visibility 0s linear 0s,
+    opacity 300ms;
 }
 .sidebar-note-toggle-expand img {
   width: 10px;
@@ -435,7 +442,7 @@ ul.notes-list {
 
 .dark > .sidebar-note-excerpt {
   color: var(--secondary-text-dark);
-} 
+}
 
 .search input {
   padding: 0 16px;
@@ -461,7 +468,9 @@ ul.notes-list {
 }
 .note {
   background: var(--white);
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 0px 5px rgba(0, 0, 0, 0.1),
+    0px 0px 1px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   height: 95%;
   width: 95%;
@@ -652,7 +661,7 @@ ul.notes-list {
 }
 
 .skeleton::after {
-  content: 'Loading...';
+  content: "Loading...";
 }
 .skeleton {
   height: 100%;

apps/fixtures/notes/tsconfig.json

@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"],
-    },
-  },
+      "~/*": ["./src/*"]
+    }
+  }
 }

apps/fixtures/todomvc/tsconfig.json

@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"],
-    },
-  },
+      "~/*": ["./src/*"]
+    }
+  }
 }

apps/landing-page/src/components/ui/button.tsx

@@ -33,8 +33,7 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends ComponentProps<"button">,
-    VariantProps<typeof buttonVariants> {}
+  extends ComponentProps<"button">, VariantProps<typeof buttonVariants> {}
 
 const Button: Component<ButtonProps> = props => {
   const [, rest] = splitProps(props, ["variant", "size", "class"]);