Docs

Adding Styles & CSS

To add styles for a route, just import the CSS file directly into the route. Hyperspan will automatically split styles for each route and will add all imported styles in a route to the route's layout via the hyperspanStyleTags function. Additoinally, any other file that is imported by route that imports CSS (like layouts that import their own CSS) will also be added for that route.

Example

Any .css file imported directly in TypeScript will be minified and sent to the browser when a user visits that route:

import { createRoute } from '@hyperspan/framework';
import { MarketingLayout } from '~/app/layouts/marketing-layout';
import '~/app/styles/hello-route.css';

export default createRoute().get((c) => {
  const content = html`<p>Hello from my route!</p>`;

  return MarketingLayout(c, { title: 'Hello Route' });
});

Automatic Route-Split CSS

Each Hyperspan file-based route is processed independently, so you can safely import '~/my/styles.css' in one route, and it will not be automatically added to any other route.

This also means you can co-locate styles with their own features, and import them from their own files, like a lib/syntax-highligher.ts that imports lib/syntax-highligher.css. Only routes that use and import the syntax highlighing file will also bundle the syntax highlighting CSS.

Supported CSS Features

Hyperspan uses Bun CSS for the runtime, which means all CSS imports in Hyperspan have full support for:

  • Nested CSS
  • Tailwind CSS (via a plugin that Hyperspan manages)
  • Color mixing functions
  • Math functions
  • Media Query ranges
  • CSS Modules & Composition
  • and more - see Bun CSS docs