chore: implement css-tests example

Author: katywings

examples/css-tests/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`.

examples/css-tests/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "example-css-tests",
+  "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": "file:../../packages/start",
+    "solid-js": "^1.9.5",
+    "vite": "7.1.3"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.12",
+    "tailwindcss": "^4.1.12"
+  }
+}

examples/css-tests/public/favicon.ico

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+:root {
+  --background-rgb: 214, 219, 220;
+  --foreground-rgb: 0, 0, 0;
+}
+
+body {
+  background: rgb(var(--background-rgb));
+  color: rgb(var(--foreground-rgb));
+}
+
+.appStyle {
+  background-color: seagreen;
+}

examples/css-tests/src/app.css

@@ -0,0 +1,31 @@
+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 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>
+            </header>
+
+            <Suspense>{props.children}</Suspense>
+          </div>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

examples/css-tests/src/app.tsx

@@ -0,0 +1,21 @@
+.increment {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 1em 2em;
+  color: #335d92;
+  background-color: rgba(68, 107, 158, 0.1);
+  border-radius: 2em;
+  border: 2px solid rgba(68, 107, 158, 0);
+  outline: none;
+  width: 200px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.increment:focus {
+  border: 2px solid #335d92;
+}
+
+.increment:active {
+  background-color: rgba(68, 107, 158, 0.2);
+}

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

@@ -0,0 +1,17 @@
+import { createSignal } from "solid-js";
+import stylesUrl from "./stylesWithUrlLazy.css?url";
+
+export default function Counter() {
+  const [count, setCount] = createSignal(0);
+  return (
+    <>
+      <link rel="stylesheet" href={stylesUrl} />
+      <button
+        class="w-[200px] rounded-full bg-gray-100 border-2 border-gray-300 focus:border-gray-400 active:border-gray-400 px-[2rem] py-[1rem]"
+        onClick={() => setCount(count() + 1)}
+      >
+        Clicks: {count()}
+      </button>
+    </>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { Title } from "@solidjs/meta";
+import { mountAssets } from "@solidjs/start/client";
+import url from "./notFound.css?url";
+
+const NotFound = () => {
+  mountAssets([
+    {
+      tag: "link",
+      attrs: {
+        href: url,
+        rel: "stylesheet"
+      }
+    }
+  ]);
+
+  return (
+    <>
+      <Title>Not Found</Title>
+      <h1>Page Not Found</h1>
+      <p>
+        Visit{" "}
+        <a href="https://start.solidjs.com" target="_blank">
+          start.solidjs.com
+        </a>{" "}
+        to learn how to build SolidStart apps.
+      </p>
+    </>
+  );
+};
+
+export default NotFound;

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

@@ -0,0 +1,3 @@
+body {
+  background-color: orangered;
+}

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

@@ -0,0 +1,3 @@
+.urlStyle--lazy {
+  background-color: crimson;
+}