Extract shared CSS into separate style block with validation

.github/workflows/check-shared-css.yml

@@ -0,0 +1,34 @@
+name: Shared CSS coherence
+on:
+  push:
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Verify shared CSS blocks are identical
+        run: |
+          python3 -c "
+          import glob, sys
+
+          blocks = {}
+          for f in sorted(glob.glob('**/*.html', recursive=True)):
+              text = open(f).read()
+              if '<style data-shared>' not in text: continue
+              blocks[f] = text.split('<style data-shared>', 1)[1].split('</style>', 1)[0]
+
+          if len(blocks) < 2:
+              print(f'Need at least 2 files with <style data-shared>; found {len(blocks)}')
+              sys.exit(1)
+
+          ref_file, ref_css = next(iter(blocks.items()))
+          ok = True
+          for f, css in blocks.items():
+              if css != ref_css:
+                  print(f'Shared CSS mismatch: {ref_file} vs {f}')
+                  ok = False
+          if not ok:
+              sys.exit(1)
+          print(f'Shared CSS is consistent across {len(blocks)} files.')
+          "

index.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>NSV Explorer</title>
-<style>
+<style data-shared>
   :root {
     --bg: #1a1a1a;
     --fg: #d4d4d4;
@@ -19,7 +19,8 @@
   }
 
   * { margin: 0; padding: 0; box-sizing: border-box; }
-
+</style>
+<style>
   body {
     font-family: var(--sans);
     background-color: var(--bg);

playground.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>NSV Playground</title>
-<style>
+<style data-shared>
   :root {
     --bg: #1a1a1a;
     --fg: #d4d4d4;
@@ -14,13 +14,14 @@
     --surface: #242424;
     --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
     --sans: system-ui, -apple-system, sans-serif;
-    --add: #2d4a2d;
-    --del: #4a2d2d;
     --add-fg: #6fbf6f;
     --del-fg: #bf6f6f;
-    --drop-active: #2a3a2a;
   }
+
   * { margin: 0; padding: 0; box-sizing: border-box; }
+</style>
+<style>
+  :root { --add: #2d4a2d; --del: #4a2d2d; --drop-active: #2a3a2a; }
   body { font-family: var(--sans); background: var(--bg); color: var(--fg); line-height: 1.5; }
 
   header { padding: 20px 24px 0; display: flex; align-items: baseline; gap: 16px; }