From 3c9c04d684ed68c455e3859777e76c6755d59068 Mon Sep 17 00:00:00 2001
From: Ajit Mehrotra <ajitmehrotra2009@gmail.com>
Date: Thu, 18 Dec 2025 14:47:32 -0500
Subject: [PATCH] wip(css-modification): add DefaultBaseCssModification class
 for CSS scoping

- Introduced a new class to modify the default base CSS file by wrapping content after the 'body' selector in a CSS scope.
- Implemented methods to read the file, generate a patch, and apply the necessary modifications.
- Added error handling for cases where the 'body' block cannot be found.
---
 .../default-base-css.modification.ts          | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 api/src/unraid-api/unraid-file-modifier/modifications/default-base-css.modification.ts

diff --git a/api/src/unraid-api/unraid-file-modifier/modifications/default-base-css.modification.ts b/api/src/unraid-api/unraid-file-modifier/modifications/default-base-css.modification.ts
new file mode 100644
index 000000000..65bdfebc5
--- /dev/null
+++ b/api/src/unraid-api/unraid-file-modifier/modifications/default-base-css.modification.ts
@@ -0,0 +1,41 @@
+import { readFile } from 'node:fs/promises';
+
+import { FileModification } from '@app/unraid-api/unraid-file-modifier/file-modification.js';
+
+export default class DefaultBaseCssModification extends FileModification {
+    id = 'default-base-css';
+    public readonly filePath = '/usr/local/emhttp/plugins/styles/default-base.css';
+
+    protected async generatePatch(overridePath?: string): Promise<string> {
+        const fileContent = await readFile(this.filePath, 'utf-8');
+        const newContent = this.applyToSource(fileContent);
+        return this.createPatchWithDiff(overridePath ?? this.filePath, fileContent, newContent);
+    }
+
+    private applyToSource(source: string): string {
+        // We want to wrap everything after the 'body' selector in a CSS scope
+        // @scope (:root) to (.unapi) { ... }
+
+        // Find the end of the body block.
+        // It typically looks like:
+        // body {
+        //    ...
+        // }
+
+        const bodyEndIndex = source.indexOf('}', source.indexOf('body {'));
+
+        if (bodyEndIndex === -1) {
+            // Fallback or error if we can't find body.
+            // In worst case, wrap everything except html?
+            // But let's assume standard format per file we've seen.
+            throw new Error('Could not find end of body block in default-base.css');
+        }
+
+        const insertIndex = bodyEndIndex + 1;
+
+        const before = source.slice(0, insertIndex);
+        const after = source.slice(insertIndex);
+
+        return `${before}\n\n@scope (:root) to (.unapi) {${after}\n}`;
+    }
+}