Support for custom CSS

Summary

• Situation: User sites are rendered using the same layout and so look exactly the same.
• Problem: As a user, I want to be able to adjust styles of my site and it's not currently possible.
• Solution: Support for custom.css file stored in a site's repo, then uploaded to R2 and fetched by the layout component and injected it into the DOM as an inline <style> tag.
• Appetite: 1d

Situation

User sites are rendered using the same layout and so look exactly the same.

Problem

I want to be able to apply custom styles to my sites, e.g.:

• change background colour,
• change font and text size,
• change content width.

Currently it's not possible.

Appetite

1d (I already tested it and have a working version)

Solution

Proposed Solution

Custom styles storage

Allow users to include custom.css file, which in the root of the published content folder. It will then be saved to R2 along with other files at site creation or site sync along with all the other files.

Loading custom styles

<style> tag with dangerouslySetInnerHTML**

Given Next.js App Router's limitations (see alternative options below), the advised solution involves:

1. Fetching the custom CSS content from R2 bucket.
2. Injecting the CSS content into the DOM via an inline <style> tag.

This approach circumvents the current <link rel="stylesheet" /> restriction in Next.js' App Router while enabling dynamic, user-specific styling.

❌ Alternative Options

• External Stylesheets via <link> Tags: The conventional method using <link rel="stylesheet" href="..."> for external CSS files is not supported by Next.js App Router, as highlighted by the documentation stating the need for stylesheets to be imported from npm packages or colocated with the codebase. https://nextjs.org/docs/app/building-your-application/styling/css-modules#external-stylesheets
• next/head component: Not supported in App Router.

Rabbit-holes

• should we create an example custom.css file with some default styles and add it to the template repo?

No-goes