feat: background color per routes

package.json

@@ -14,10 +14,11 @@
 		"build:compress": "./scripts/build.compress.sh",
 		"build:csp": "node scripts/build.csp.mjs",
 		"build:metadata": "node scripts/build.metadata.mjs",
+		"build:style": "node scripts/build.style.mjs",
 		"build:ic-domains": "node scripts/build.ic-domains.mjs",
 		"build:ii-alternative-origins": "node scripts/build.ii-alternative-origins.mjs",
 		"build:copy-workers": "node ./scripts/build.copy-workers.mjs",
-		"build:post-process": "npm run build:metadata && npm run build:ic-domains && npm run build:ii-alternative-origins && npm run build:csp && npm run build:copy-workers && npm run build:compress",
+		"build:post-process": "npm run build:style && npm run build:metadata && npm run build:ic-domains && npm run build:ii-alternative-origins && npm run build:csp && npm run build:copy-workers && npm run build:compress",
 		"build:tokens-sns": "node scripts/build.tokens.sns.mjs && npm run format",
 		"build:tokens-ckerc20": "node scripts/build.tokens.ckerc20.mjs && npm run format",
 		"dev": "vite dev",

scripts/build.style.mjs

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+import { config } from 'dotenv';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { ENV, findHtmlFiles } from './build.utils.mjs';
+import { findFiles } from './utils.mjs';
+
+config({ path: `.env.${ENV}` });
+
+const PLACEHOLDER = '<!-- ROUTE_STYLE -->';
+
+const src = join(process.cwd(), 'src', 'frontend', 'src', 'routes');
+const build = join(process.cwd(), 'build');
+
+const parseStyle = (srcFile) => {
+	const parsedSrcFile = srcFile.replace(/\/\([^)]+\)\//, '/'); // Remove e.g. /(sign)/ from path
+	const srcDir = dirname(parsedSrcFile);
+
+	const destDir = srcDir.replace(src, build);
+	const destFile = join(destDir, 'index.html');
+
+	const style = readFileSync(srcFile, 'utf8');
+
+	// Just in case there is an empty CSS source file. Placeholder is cleaned with another hook.
+	if (style.trim().length === 0) {
+		return;
+	}
+
+	const content = readFileSync(destFile, 'utf8');
+	const updatedContent = content.replace(PLACEHOLDER, `<style>\n${style}\n</style>`);
+
+	writeFileSync(destFile, updatedContent);
+};
+
+const cleanPlaceholder = (targetFile) => {
+	const content = readFileSync(targetFile, 'utf8');
+	const updatedContent = content.replace(PLACEHOLDER, '');
+
+	writeFileSync(targetFile, updatedContent);
+};
+
+const styleFiles = findFiles({ dir: src, extensions: ['.page.css'] });
+styleFiles.forEach(parseStyle);
+
+const htmlFiles = findHtmlFiles();
+htmlFiles.forEach(cleanPlaceholder);

src/frontend/src/app.html

@@ -55,6 +55,8 @@
 		<meta content="#016DFC" name="theme-color" />
 		%sveltekit.head%
 
+		<!-- ROUTE_STYLE -->
+
 		<style>
 			#app-spinner {
 				--spinner-size: 30px;

src/frontend/src/lib/components/core/Background.svelte

@@ -5,7 +5,7 @@
 	import { replaceOisyPlaceholders } from '$lib/utils/i18n.utils';
 </script>
 
-<div class="fixed inset-0 z-[-1] overflow-hidden bg-white">
+<div class="fixed inset-0 z-[-1] overflow-hidden">
 	<picture
 		class="absolute left-1/2 top-0 w-full min-w-2_5xl -translate-x-1/2 transform"
 		aria-label={replaceOisyPlaceholders($i18n.core.alt.background)}

src/frontend/src/routes/(sign)/sign/+layout.svelte

@@ -22,3 +22,7 @@
 </main>
 
 <Modals />
+
+<style global lang="scss">
+	@import './+oisy.page.css';
+</style>

src/frontend/src/routes/(sign)/sign/+oisy.page.css

@@ -0,0 +1,3 @@
+:root {
+	background: #e8f1ff;
+}