chore: implement css fixture

Author: katywings

apps/fixtures/css/README.md

@@ -0,0 +1,30 @@
+# SolidStart
+
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+
+## Creating a project
+
+```bash
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.

apps/fixtures/css/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "fixture-css",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^0.15.0",
+    "@solidjs/start": "workspace:*",
+    "solid-js": "^1.9.9",
+    "vite": "7.1.10"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.12",
+    "tailwindcss": "^4.1.12"
+  }
+}

apps/fixtures/css/public/favicon.ico

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+@theme {
+  --color-success: var(--color-emerald-700);
+  --color-error: var(--color-rose-700);
+  --color-warn: var(--color-orange-500);
+}
+
+@layer base {
+  body {
+    @apply bg-gray-800 text-gray-100;
+  }
+
+  a {
+    @apply text-sky-400 underline underline-offset-4 hover:no-underline;
+  }
+
+  h1 {
+    @apply text-2xl font-bold;
+  }
+}

apps/fixtures/css/src/app.css

@@ -0,0 +1,28 @@
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import "./app.css";
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <MetaProvider>
+          <Title>SolidStart - CSS Fixture</Title>
+          <div class="mx-auto max-w-5xl p-10 pt-3">
+            <header class="flex gap-3 mb-4">
+              <a href="/">Index</a>
+              <a href="/empty">Empty</a>
+              <a href="/unstyled">Unstyled</a>
+            </header>
+
+            <Suspense>{props.children}</Suspense>
+          </div>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

apps/fixtures/css/src/app.tsx

@@ -0,0 +1,56 @@
+import { createSignal, FlowProps, onMount } from "solid-js";
+import { getRequestEvent } from "solid-js/web";
+
+const Badge = (props: FlowProps) => (
+  <div class="text-base text-white bg-gray-700 rounded-lg px-2 font-medium">{props.children}</div>
+);
+
+const Layout = (props: FlowProps<{ title: string }>) => {
+  const [mounted, setMounted] = createSignal(false);
+  onMount(() => setMounted(true));
+
+  return (
+    <div class="flex gap-2 flex-col">
+      <div class="flex items-center gap-2 flex-wrap">
+        <h1>{props.title}</h1>
+        <Badge>Environment: {import.meta.env.DEV ? "DEV" : "PROD"}</Badge>
+        <Badge>Rendered: {!mounted() ? "Server" : "Server & Client"}</Badge>
+      </div>
+
+      <div class="text-gray-500 text-sm font-medium">
+        Agent:{" "}
+        <span class="text-xs">
+          {getRequestEvent()?.request.headers.get("user-agent") ?? navigator.userAgent}
+        </span>
+      </div>
+
+      <ul class="list-inside list-disc mb-4 text-gray-400 font-semibold text-xs">
+        <li>
+          Enable throttling & disable cache in the network tab to see eventual frames of unstyled
+          content
+        </li>
+        <li>Click on routes to test client navigation</li>
+      </ul>
+
+      <div class="grid grid-cols-[repeat(5,auto)] gap-4 gap-y-2">
+        <div class="grid col-span-full grid-cols-subgrid px-4 text-gray-400 text-sm">
+          <div>Component</div>
+          <div>File</div>
+          <div>Integration</div>
+          <div>Lazy</div>
+          <div>Comments</div>
+        </div>
+
+        {props.children}
+      </div>
+
+      <div class="flex justify-end gap-2 items-center text-sm uppercase font-bold text-white">
+        <div class="grid content-center rounded-lg bg-success px-2">pass</div>
+        <div class="grid content-center rounded-lg bg-error px-2">fail</div>
+        <div class="grid content-center rounded-lg bg-warn px-2">not supported</div>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

apps/fixtures/css/src/components/layout.tsx

@@ -0,0 +1,7 @@
+import "../styles/lazy.css";
+
+const Lazy = () => {
+  return <></>
+}
+
+export default Lazy;

apps/fixtures/css/src/components/lazy.tsx

@@ -0,0 +1,5 @@
+import url from "../styles/lazyLink.css?url";
+
+const Lazy = () => <link rel="stylesheet" href={url} />
+
+export default Lazy;

apps/fixtures/css/src/components/lazyLink.tsx

@@ -0,0 +1,5 @@
+import url from "../styles/lazyLinkTmp.css?url";
+
+const Lazy = () => <link rel="stylesheet" href={url} />
+
+export default Lazy;

apps/fixtures/css/src/components/lazyLinkTmp.tsx

@@ -0,0 +1,18 @@
+import { mountAssets } from "@solidjs/start/client";
+import url from "../styles/lazyMountAssets.css?url";
+
+const Lazy = () => {
+  mountAssets([
+    {
+      tag: "link",
+      attrs: {
+        href: url,
+        rel: "stylesheet"
+      }
+    }
+  ]);
+
+  return <></>
+}
+
+export default Lazy;