chore: implement css-tests example (pt2)

Author: katywings

examples/css-tests/src/app.css

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

examples/css-tests/src/app.tsx

@@ -10,14 +10,11 @@ export default function App() {
       root={props => (
         <MetaProvider>
           <Title>SolidStart - CSS Tests</Title>
-          <div class="mx-auto max-w-5xl p-10 text-gray-800">
-            <header class="flex gap-3 underline mb-4">
-              <a class="text-blue-800" href="/">
-                Index
-              </a>
-              <a class="text-blue-800" href="/about">
-                About
-              </a>
+          <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>

examples/css-tests/src/components/Counter.css

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

examples/css-tests/src/components/Counter.tsx

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

examples/css-tests/src/components/NotFound.tsx

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

examples/css-tests/src/components/layout.tsx

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

examples/css-tests/src/components/lazy.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;