WIP: Devinxi - Unified css handling

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/src/app.css

@@ -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.tsx

@@ -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/components/layout.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 FOUC's (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/lazy.tsx

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

apps/fixtures/css/src/components/lazyLink.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/lazyLinkTmp.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/lazyMountAssets.tsx

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

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

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

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

@@ -0,0 +1,128 @@
+import { JSX } from "solid-js";
+
+const clsx = (...args: (string | false | undefined)[]) => args.filter(Boolean).join(" ");
+
+const integrations = {
+  import: "import",
+  module: "import module",
+  url: "?url without render",
+  link: "?url + <link>",
+  useAssets: "?url + useAssets"
+};
+const Test = (props: {
+  invert?: boolean;
+  class?: string;
+  component: string;
+  file: string;
+  integration?: keyof typeof integrations;
+  lazy?: boolean;
+  noSupport?: boolean;
+  comment?: JSX.Element;
+}) => (
+  <div
+    class={clsx(
+      "grid grid-cols-subgrid col-span-full items-center rounded text-white font-medium py-1 px-2 border-4 transition-colors duration-[1.5s]",
+      props.invert ? "bg-success" : "bg-error",
+      props.noSupport ? "border-warn" : "border-transparent",
+      props.class
+    )}
+  >
+    <div>{props.component}</div>
+    <div>{props.file}</div>
+    <div>{integrations[props.integration ?? "import"]}</div>
+    <div class="font-bold">{props.lazy ? <>&check;</> : null}</div>
+    <div class="text-xs">{props.comment}</div>
+  </div>
+);
+
+export const CommonTests = (props: { routeModuleClass?: string }) => (
+  <>
+    <Test
+      component="Entry Server"
+      file="entryServer.css"
+      class="entryServer"
+      noSupport
+      comment="Doesn't work at all."
+    />
+    <Test
+      component="Entry Server"
+      file="entryServerUrl.css"
+      class="entryServerUrl"
+      integration="link"
+      noSupport
+      comment="Doesn't work in PROD."
+    />
+    <Test component="Entry Client" file="entryClient.css" class="entryClient" />
+    <Test component="App" file="app.css" invert />
+    <Test component="Route" file="route.css" class="route" />
+    <Test
+      component="Route"
+      file="route.module.css"
+      class={props.routeModuleClass}
+      integration="module"
+    />
+    <Test
+      component="Route"
+      file="url.css"
+      class="url"
+      integration="link"
+      noSupport
+      comment="FOUC during client-side navigation, on Chrome."
+    />
+    <Test component="Route" file="notRendered.css" class="notRendered" integration="url" invert />
+    <Test
+      component="Lazy"
+      file="lazy.css"
+      class="lazy"
+      lazy
+    />
+    <Test
+      component="LazyLink"
+      file="lazyLink.css"
+      class="lazyLink"
+      integration="link"
+      lazy
+      noSupport
+      comment="FOUC during client-side navigation, on Chrome."
+    />
+    <Test
+      component="LazyMountAssets"
+      file="LazyMountAssets.css"
+      class="lazyMountAssets"
+      integration="useAssets"
+      lazy
+    />
+    <Test
+      component="LazyLinkTmp"
+      file="lazyLinkTmp.css"
+      class="lazyLinkTmp"
+      integration="link"
+      invert
+      lazy
+      comment={
+        <>
+          Tests fallbacks, only mounted while loading.
+          <br />
+          Red while mounted.
+        </>
+      }
+    />
+    <Test
+      component="LazyMountAssetsTmp"
+      file="lazyMountAssetsTmp.css"
+      class="lazyMountAssetsTmp"
+      integration="useAssets"
+      invert
+      lazy
+      comment={
+        <>
+          Tests fallbacks, only mounted while loading.
+          <br />
+          Red while mounted.
+        </>
+      }
+    />
+  </>
+);
+
+export default Test;

apps/fixtures/css/src/entry-client.tsx

@@ -0,0 +1,5 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+import "./styles/entryClient.css";
+
+mount(() => <StartClient />, document.getElementById("app")!);

apps/fixtures/css/src/entry-server.tsx

@@ -0,0 +1,24 @@
+// @refresh reload
+import { createHandler, StartServer } from "@solidjs/start/server";
+import "./styles/entryServer.css";
+import url from "./styles/entryServerUrl.css?url";
+
+export default createHandler(() => (
+  <StartServer
+    document={({ assets, children, scripts }) => (
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+          <link rel="stylesheet" href={url} />
+          {assets}
+        </head>
+        <body>
+          <div id="app">{children}</div>
+          {scripts}
+        </body>
+      </html>
+    )}
+  />
+));

apps/fixtures/css/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@solidjs/start/env" />