SolidJS•3mo ago

Per-route CSS when using FileRoutes

If I want to have a CSS file for an individual route (i.e. that route has unique page flow compared to others), where should I put the CSS file? It seems incredibly inconvenient to have CSS files in a separate folder.

// routes/index.tsx
import "./index.css"; // Where should this file be?!

export default function Home() {
  return (
    <main>
      <div class="hero">...</div>
    </main>
  );
}

// routes/index.tsx
import "./index.css"; // Where should this file be?!

export default function Home() {
  return (
    <main>
      <div class="hero">...</div>
    </main>
  );
}

6 Replies

Brendonovich•3mo ago

You should be able to just have routes/index.css, no?

deminearchiver•3mo ago

wait wut I can swear that I tried to import a file and it did NOTHING I'm actually using Vanilla Extract, maybe that's why it doesn't work sometimes, but still it makes no sense.

deminearchiver•3mo ago

The [...404].css.ts and download.css.ts contain the same content:

import { style } from "@vanilla-extract/css";
import { THEME } from "~/theme";

export const headingStyle = style({
  fontFamily: THEME.text.headline.large.family,
  fontSize: THEME.text.headline.large.size,
  fontWeight: THEME.text.headline.large.weight,
  lineHeight: THEME.text.headline.large.lineHeight,
  letterSpacing: THEME.text.headline.large.letterSpacing,
  color: THEME.color.onSurface,
})

import { style } from "@vanilla-extract/css";
import { THEME } from "~/theme";

export const headingStyle = style({
  fontFamily: THEME.text.headline.large.family,
  fontSize: THEME.text.headline.large.size,
  fontWeight: THEME.text.headline.large.weight,
  lineHeight: THEME.text.headline.large.lineHeight,
  letterSpacing: THEME.text.headline.large.letterSpacing,
  color: THEME.color.onSurface,
})

download.ts:

import { Title } from "@solidjs/meta";
import { headingStyle } from "./download.css";

export default function Home() {
  return (
    <main>
      <Title>Download</Title>
      <h1 class={headingStyle}>Hello world!</h1>
    </main>
  );
}

import { Title } from "@solidjs/meta";
import { headingStyle } from "./download.css";

export default function Home() {
  return (
    <main>
      <Title>Download</Title>
      <h1 class={headingStyle}>Hello world!</h1>
    </main>
  );
}

[...404].ts

import { Title } from "@solidjs/meta";
import { HttpStatusCode } from "@solidjs/start";

import { headingStyle } from "./[...404].css";

export default function NotFound() {
  return (
    <main>
      <Title>Not Found</Title>
      <HttpStatusCode code={404} />

      <h1 class={headingStyle}>Page Not Found</h1>
    </main>
  );
}

import { Title } from "@solidjs/meta";
import { HttpStatusCode } from "@solidjs/start";

import { headingStyle } from "./[...404].css";

export default function NotFound() {
  return (
    <main>
      <Title>Not Found</Title>
      <HttpStatusCode code={404} />

      <h1 class={headingStyle}>Page Not Found</h1>
    </main>
  );
}

The 404 page actually has styling, while the download page doesn't.

deminearchiver•3mo ago

In devtools download.css.ts tag is empty:

<style type="text/css" data-vite-dev-id="F:/GitHub/Repositories/website/src/routes/download.css.ts.vanilla.css"></style>

<style type="text/css" data-vite-dev-id="F:/GitHub/Repositories/website/src/routes/download.css.ts.vanilla.css"></style>

Brendonovich•3mo ago

Ah it being vanilla extract may have something to do with it Though as long as they don't have a default export they should work fine?

deminearchiver•3mo ago

I don't really understand what's going on my first guess is that it happens because of the file names or maybe because 404 is a dynamic route

Gaming

Programming

Per-route CSS when using FileRoutes