@gtk-js/gtk-css 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @gtk-js/gtk-css
+
+## 0.1.1
+
+### Patch Changes
+
+- 0982123: Bump all packages past burned npm versions
+
+## 0.2.0
+
+## 0.1.0
+
+### Minor Changes
+
+- f9da446: Testing CI publishing

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@gtk-js/gtk-css",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.1",
+  "type": "module",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./compile": "./src/compile.ts"
+  },
+  "dependencies": {
+    "postcss": "^8.5.8",
+    "sass": "^1.99.0"
+  }
+}

package/src/compile.ts

@@ -0,0 +1,84 @@
+import { readFileSync } from "fs";
+import { type Plugin } from "postcss";
+import { buildGtkToWeb, preprocess } from "./transform.ts";
+
+export interface CompileOptions {
+  /**
+   * Filter output to a single color scheme.
+   * - "light": strip dark media queries and [data-color-scheme="dark"] rules
+   * - "dark": use dark color values as base, strip all [data-color-scheme] rules
+   * - omit: emit both (current behavior — @media + [data-color-scheme] overrides)
+   */
+  scheme?: "light" | "dark";
+  /**
+   * Override the default accent color (#3584e4) baked into the compiled CSS.
+   * Useful when a theme has a fixed accent per variant.
+   */
+  accentColor?: string;
+  /**
+   * Maps virtual URL paths (as used in CSS url()) to absolute filesystem paths.
+   * When provided, -gtk-scaled(url('path.png'), ...) declarations are replaced
+   * with embedded base64 data URIs by reading from the mapped filesystem path.
+   *
+   * Build this from the theme's gtk.gresource.xml — each <file> entry's virtual
+   * path maps to the corresponding physical file on disk.
+   *
+   * Example: { "windows-assets/titlebutton-close.png": "/abs/path/to/titlebutton-close.png" }
+   */
+  assetMap?: Map<string, string>;
+}
+
+function makeGtkAssetPlugin(assetMap: Map<string, string>): Plugin {
+  return {
+    postcssPlugin: "gtk-embed-asset-functions",
+    Declaration(decl) {
+      if (!decl.value.includes("-gtk-scaled(")) return;
+      const scaledMatch = decl.value.match(/-gtk-scaled\(\s*url\(['"]?([^'")\s]+)['"]?\)/);
+      if (!scaledMatch || !scaledMatch[1]) {
+        decl.remove();
+        return;
+      }
+      const virtualPath = scaledMatch[1];
+      const absPath = assetMap.get(virtualPath);
+      if (!absPath) {
+        throw new Error(`Asset not found in assetMap: ${virtualPath}`);
+      }
+      const b64 = readFileSync(absPath).toString("base64");
+      decl.value = `url('data:image/png;base64,${b64}')`;
+    },
+  };
+}
+
+/**
+ * Compiles a GTK/libadwaita SCSS file to web-compatible CSS.
+ *
+ * Uses sassc (the C implementation of Sass) to match upstream's build system,
+ * then runs text preprocessing + PostCSS transforms to convert GTK-specific
+ * CSS to web-compatible CSS.
+ */
+export async function compileGtkCSS(scssPath: string, options?: CompileOptions): Promise<string> {
+  // Step 1: Compile SCSS → raw CSS using sassc (matches upstream)
+  const result = Bun.spawnSync({
+    cmd: ["sassc", "-t", "expanded", scssPath],
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+
+  if (result.exitCode !== 0) {
+    throw new Error(
+      `sassc compilation failed (exit ${result.exitCode}):\n${result.stderr.toString()}`,
+    );
+  }
+
+  const rawCSS = result.stdout.toString();
+
+  // Step 2: Text preprocessing — strip @define-color and other non-CSS syntax
+  const preprocessed = preprocess(rawCSS, options);
+
+  // Step 3: PostCSS transforms — remap selectors, pseudo-classes, properties
+  const assetPlugin = options?.assetMap ? makeGtkAssetPlugin(options.assetMap) : undefined;
+  const pipeline = buildGtkToWeb(assetPlugin);
+  const transformed = await pipeline.process(preprocessed, { from: scssPath });
+
+  return transformed.css;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { ALL_SELECTORS, INTERNAL_SELECTORS, WIDGET_SELECTORS } from "./selectors.ts";
+export { GtkTheme, resolveColorScheme } from "./theme.ts";
+export { gtkToWeb, preprocess } from "./transform.ts";

package/src/selectors.ts

@@ -0,0 +1,203 @@
+/**
+ * Mapping of bare GTK CSS node names to web CSS class selectors.
+ *
+ * GTK CSS targets a widget node tree where selectors like `button` or `headerbar`
+ * refer to widget types, not HTML elements. On the web, we remap these to class
+ * selectors so that React components can apply the matching className.
+ *
+ * Some names (like `button`, `label`, `image`) conflict with HTML elements,
+ * so ALL bare selectors get a `.gtk-` prefix for consistency.
+ */
+
+// Top-level widgets
+export const WIDGET_SELECTORS: Record<string, string> = {
+  // Buttons
+  button: ".gtk-button",
+  menubutton: ".gtk-menubutton",
+  splitbutton: ".gtk-splitbutton",
+  buttoncontent: ".gtk-buttoncontent",
+  tabbutton: ".gtk-tabbutton",
+  modelbutton: ".gtk-modelbutton",
+  colorbutton: ".gtk-colorbutton",
+  fontbutton: ".gtk-fontbutton",
+  appchooserbutton: ".gtk-appchooserbutton",
+  // Entries
+  entry: ".gtk-entry",
+  text: ".gtk-text",
+  editablelabel: ".gtk-editablelabel",
+  // Layout
+  box: ".gtk-box",
+  grid: ".gtk-grid",
+  headerbar: ".gtk-headerbar",
+  windowcontrols: ".gtk-windowcontrols",
+  windowtitle: ".gtk-windowtitle",
+  windowhandle: ".gtk-windowhandle",
+  actionbar: ".gtk-actionbar",
+  searchbar: ".gtk-searchbar",
+  toolbar: ".gtk-toolbar",
+  centerbox: ".gtk-centerbox",
+  viewport: ".gtk-viewport",
+  // Lists
+  listview: ".gtk-listview",
+  list: ".gtk-list",
+  row: ".gtk-row",
+  columnview: ".gtk-columnview",
+  gridview: ".gtk-gridview",
+  flowbox: ".gtk-flowbox",
+  flowboxchild: ".gtk-flowboxchild",
+  iconview: ".gtk-iconview",
+  treeview: ".gtk-treeview",
+  treeexpander: ".gtk-treeexpander",
+  // Containers
+  notebook: ".gtk-notebook",
+  stack: ".gtk-stack",
+  stackswitcher: ".gtk-stackswitcher",
+  stacksidebar: ".gtk-stacksidebar",
+  overlay: ".gtk-overlay",
+  frame: ".gtk-frame",
+  expander: ".gtk-expander",
+  "expander-widget": ".gtk-expander-widget",
+  paned: ".gtk-paned",
+  scrolledwindow: ".gtk-scrolledwindow",
+  revealer: ".gtk-revealer",
+  clamp: ".gtk-clamp",
+  // Controls
+  scale: ".gtk-scale",
+  scrollbar: ".gtk-scrollbar",
+  range: ".gtk-range",
+  switch: ".gtk-switch",
+  spinbutton: ".gtk-spinbutton",
+  checkbutton: ".gtk-checkbutton",
+  dropdown: ".gtk-dropdown",
+  combobox: ".gtk-combobox",
+  // Display
+  label: ".gtk-label",
+  image: ".gtk-image",
+  picture: ".gtk-picture",
+  video: ".gtk-video",
+  separator: ".gtk-separator",
+  spinner: ".gtk-spinner",
+  progressbar: ".gtk-progressbar",
+  levelbar: ".gtk-levelbar",
+  calendar: ".gtk-calendar",
+  infobar: ".gtk-infobar",
+  statusbar: ".gtk-statusbar",
+  textview: ".gtk-textview",
+  // Popover/Menu
+  popover: ".gtk-popover",
+  menubar: ".gtk-menubar",
+  // Windows/Dialogs
+  window: ".gtk-window",
+  dialog: ".gtk-dialog",
+  "dialog-host": ".gtk-dialog-host",
+  messagedialog: ".gtk-messagedialog",
+  // Color
+  colorswatch: ".gtk-colorswatch",
+  colorchooser: ".gtk-colorchooser",
+  // Emoji
+  emojichooser: ".gtk-emojichooser",
+  emoji: ".gtk-emoji",
+  "emoji-completion-row": ".gtk-emoji-completion-row",
+  // File
+  filechooser: ".gtk-filechooser",
+  filelistcell: ".gtk-filelistcell",
+  filethumbnail: ".gtk-filethumbnail",
+  pathbar: ".gtk-pathbar",
+  placessidebar: ".gtk-placessidebar",
+  placesview: ".gtk-placesview",
+  // Toggle group
+  "toggle-group": ".gtk-toggle-group",
+  toggle: ".gtk-toggle",
+  // Tooltip
+  tooltip: ".gtk-tooltip",
+  // Print
+  paper: ".gtk-paper",
+  // Shortcuts
+  shortcut: ".gtk-shortcut",
+  "shortcut-label": ".gtk-shortcut-label",
+  "shortcuts-section": ".gtk-shortcuts-section",
+  // Adwaita-specific widgets
+  avatar: ".gtk-avatar",
+  banner: ".gtk-banner",
+  "status-page": ".gtk-status-page",
+  statuspage: ".gtk-statuspage",
+  "bottom-sheet": ".gtk-bottom-sheet",
+  "adaptive-preview": ".gtk-adaptive-preview",
+  "tab-bar": ".gtk-tab-bar",
+  tabbar: ".gtk-tabbar",
+  "tab-overview": ".gtk-tab-overview",
+  taboverview: ".gtk-taboverview",
+  tabview: ".gtk-tabview",
+  tabbox: ".gtk-tabbox",
+  tabboxchild: ".gtk-tabboxchild",
+  tabgrid: ".gtk-tabgrid",
+  tabgridchild: ".gtk-tabgridchild",
+  tabthumbnail: ".gtk-tabthumbnail",
+  "inline-view-switcher": ".gtk-inline-view-switcher",
+  viewswitcher: ".gtk-viewswitcher",
+  viewswitcherbar: ".gtk-viewswitcherbar",
+  viewswitchertitle: ".gtk-viewswitchertitle",
+  "navigation-view": ".gtk-navigation-view",
+  "overlay-split-view": ".gtk-overlay-split-view",
+  leaflet: ".gtk-leaflet",
+  flap: ".gtk-flap",
+  "floating-sheet": ".gtk-floating-sheet",
+  sheet: ".gtk-sheet",
+  toolbarview: ".gtk-toolbarview",
+  preferencesgroup: ".gtk-preferencesgroup",
+  preferencespage: ".gtk-preferencespage",
+  toast: ".gtk-toast",
+  indicatorbin: ".gtk-indicatorbin",
+};
+
+// Internal structural elements (parts of widgets, not standalone)
+export const INTERNAL_SELECTORS: Record<string, string> = {
+  trough: ".gtk-trough",
+  slider: ".gtk-slider",
+  highlight: ".gtk-highlight",
+  fill: ".gtk-fill",
+  marks: ".gtk-marks",
+  mark: ".gtk-mark",
+  indicator: ".gtk-indicator",
+  value: ".gtk-value",
+  arrow: ".gtk-arrow",
+  contents: ".gtk-contents",
+  header: ".gtk-header",
+  tabs: ".gtk-tabs",
+  tab: ".gtk-tab",
+  undershoot: ".gtk-undershoot",
+  overshoot: ".gtk-overshoot",
+  dimming: ".gtk-dimming",
+  shadow: ".gtk-shadow",
+  border: ".gtk-border",
+  "block-cursor": ".gtk-block-cursor",
+  placeholder: ".gtk-placeholder",
+  progress: ".gtk-progress",
+  cell: ".gtk-cell",
+  check: ".gtk-check",
+  radio: ".gtk-radio",
+  dnd: ".gtk-dnd",
+  selection: ".gtk-selection",
+  block: ".gtk-block",
+  title: ".gtk-title",
+  item: ".gtk-item",
+  color: ".gtk-color",
+  widget: ".gtk-widget",
+  "cursor-handle": ".gtk-cursor-handle",
+  "drag-handle": ".gtk-drag-handle",
+  dndtarget: ".gtk-dndtarget",
+  drawing: ".gtk-drawing",
+  magnifier: ".gtk-magnifier",
+  rubberband: ".gtk-rubberband",
+  "sort-indicator": ".gtk-sort-indicator",
+  spin: ".gtk-spin",
+  plane: ".gtk-plane",
+  acceleditor: ".gtk-acceleditor",
+  accelerator: ".gtk-accelerator",
+};
+
+/** All selector mappings combined. */
+export const ALL_SELECTORS: Record<string, string> = {
+  ...WIDGET_SELECTORS,
+  ...INTERNAL_SELECTORS,
+};

package/src/theme.ts

@@ -0,0 +1,23 @@
+/**
+ * Abstract base class for GTK themes.
+ *
+ * Subclasses own all state (color scheme, accent, variants, etc.)
+ * and return the full CSS string via getCSS().
+ *
+ * Third parties can subclass this with zero dependency on React or widgets.
+ */
+export abstract class GtkTheme {
+  abstract getCSS(): string;
+}
+
+/** Resolve "auto" color scheme to "light" or "dark" using prefers-color-scheme. */
+export function resolveColorScheme(scheme: "light" | "dark" | "auto"): "light" | "dark" {
+  if (scheme !== "auto") return scheme;
+  if (
+    typeof window !== "undefined" &&
+    window.matchMedia?.("(prefers-color-scheme: dark)").matches
+  ) {
+    return "dark";
+  }
+  return "light";
+}

package/src/transform.test.ts

@@ -0,0 +1,172 @@
+import { describe, expect, test } from "bun:test";
+import { gtkToWeb } from "./transform.ts";
+
+async function transform(css: string) {
+  const result = await gtkToWeb.process(css, { from: undefined });
+  return result.css;
+}
+
+describe("remapPseudoClasses", () => {
+  test(":checked → [data-checked]", async () => {
+    const out = await transform(".gtk-button:checked { color: red; }");
+    expect(out).toContain(".gtk-button[data-checked]");
+    expect(out).not.toContain(":checked");
+  });
+
+  test(":visited → [data-visited]", async () => {
+    const out = await transform(".gtk-button.link:visited { color: blue; }");
+    expect(out).toContain(".gtk-button.link[data-visited]");
+    expect(out).not.toContain(":visited");
+  });
+
+  test(":backdrop → [data-backdrop]", async () => {
+    const out = await transform(".gtk-window:backdrop { opacity: 0.5; }");
+    expect(out).toContain(".gtk-window[data-backdrop]");
+    expect(out).not.toContain(":backdrop");
+  });
+
+  test(":drop(active) → [data-drop-active]", async () => {
+    const out = await transform(".gtk-row:drop(active) { background: blue; }");
+    expect(out).toContain(".gtk-row[data-drop-active]");
+    expect(out).not.toContain(":drop(active)");
+  });
+
+  test(":selected → [aria-selected]", async () => {
+    const out = await transform(".gtk-row:selected { background: blue; }");
+    expect(out).toContain('[aria-selected="true"]');
+    expect(out).not.toContain(":selected");
+  });
+});
+
+describe("convertGtkColorFunctions", () => {
+  describe("alpha()", () => {
+    test("hex color → rgba()", async () => {
+      const out = await transform(".x { color: alpha(#242424, 0.25); }");
+      expect(out).toContain("rgba(36, 36, 36, 0.25)");
+      expect(out).not.toContain("alpha(");
+    });
+
+    test("3-digit hex → rgba()", async () => {
+      const out = await transform(".x { color: alpha(#fff, 0.5); }");
+      expect(out).toContain("rgba(255, 255, 255, 0.5)");
+    });
+
+    test("named color black → rgba()", async () => {
+      const out = await transform(".x { color: alpha(black, 0.8); }");
+      expect(out).toContain("rgba(0, 0, 0, 0.8)");
+    });
+
+    test("named color white → rgba()", async () => {
+      const out = await transform(".x { color: alpha(white, 0.5); }");
+      expect(out).toContain("rgba(255, 255, 255, 0.5)");
+    });
+
+    test("currentColor → color-mix()", async () => {
+      const out = await transform(".x { color: alpha(currentColor, 0.06); }");
+      expect(out).toContain("color-mix(in oklab, currentColor 6%, transparent)");
+      expect(out).not.toContain("alpha(");
+    });
+
+    test("single arg (identity) → passthrough", async () => {
+      const out = await transform(".x { color: alpha(black); }");
+      expect(out).toContain("color: black");
+      expect(out).not.toContain("alpha(");
+    });
+
+    test("nested in linear-gradient()", async () => {
+      const out = await transform(
+        ".x { background-image: linear-gradient(alpha(#242424, 0.25), alpha(#242424, 0.35)); }",
+      );
+      expect(out).toContain("rgba(36, 36, 36, 0.25)");
+      expect(out).toContain("rgba(36, 36, 36, 0.35)");
+      expect(out).not.toContain("alpha(");
+    });
+
+    test("multiple in one declaration", async () => {
+      const out = await transform(
+        ".x { box-shadow: inset 0 0 0 1px alpha(currentColor, 0.04), inset 0 1px alpha(currentColor, 0.05); }",
+      );
+      expect(out).not.toContain("alpha(");
+      expect(out).toContain("color-mix(in oklab, currentColor 4%, transparent)");
+      expect(out).toContain("color-mix(in oklab, currentColor 5%, transparent)");
+    });
+
+    test("rgba() arg → color-mix()", async () => {
+      const out = await transform(".x { color: alpha(rgba(0, 0, 0, 0.08), 0.75); }");
+      expect(out).toContain("color-mix(in oklab, rgba(0, 0, 0, 0.08) 75%, transparent)");
+      expect(out).not.toContain("alpha(");
+    });
+
+    test("does not match inside another function name", async () => {
+      // "get-alpha(" should not be matched
+      const out = await transform(".x { color: get-alpha(test); }");
+      expect(out).toContain("get-alpha(test)");
+    });
+
+    test("unexpected arg count throws", async () => {
+      expect(transform(".x { color: alpha(a, b, c); }")).rejects.toThrow();
+    });
+  });
+
+  describe("mix()", () => {
+    test("two hex colors → color-mix()", async () => {
+      const out = await transform(".x { color: mix(#FFFFFF, #0860F2, 0.75); }");
+      expect(out).toContain("color-mix(in oklab, #0860F2 75%, #FFFFFF)");
+      expect(out).not.toMatch(/(?<!color-)mix\(/);
+    });
+
+    test("hex + rgba → color-mix()", async () => {
+      const out = await transform(
+        ".x { background-color: mix(#FFFFFF, rgba(0, 0, 0, 0.87), 0.15); }",
+      );
+      expect(out).toContain("color-mix(in oklab, rgba(0, 0, 0, 0.87) 15%, #FFFFFF)");
+      expect(out).not.toMatch(/(?<!color-)mix\(/);
+    });
+
+    test("unexpected arg count throws", async () => {
+      expect(transform(".x { color: mix(a, b); }")).rejects.toThrow();
+    });
+  });
+
+  describe("shade()", () => {
+    test("lighten hex → pre-computed rgb()", async () => {
+      const out = await transform(".x { color: shade(#5e5c64, 1.2); }");
+      // 94*1.2=113, 92*1.2=110, 100*1.2=120
+      expect(out).toContain("rgb(113, 110, 120)");
+      expect(out).not.toContain("shade(");
+    });
+
+    test("darken hex → pre-computed rgb()", async () => {
+      const out = await transform(".x { color: shade(#27a66c, 0.95); }");
+      // 39*0.95=37, 166*0.95=158, 108*0.95=103
+      expect(out).toContain("rgb(37, 158, 103)");
+      expect(out).not.toContain("shade(");
+    });
+
+    test("clamps to 255", async () => {
+      const out = await transform(".x { color: shade(#f9e2a7, 1.07); }");
+      // 249*1.07=255(clamped), 226*1.07=242, 167*1.07=179
+      expect(out).toContain("rgb(255, 242, 179)");
+    });
+
+    test("dynamic color lighten → color-mix with white", async () => {
+      const out = await transform(".x { color: shade(var(--c), 1.2); }");
+      expect(out).toContain("color-mix(in oklab, var(--c), white");
+      expect(out).not.toContain("shade(");
+    });
+
+    test("dynamic color darken → color-mix with black", async () => {
+      const out = await transform(".x { color: shade(var(--c), 0.8); }");
+      expect(out).toContain("color-mix(in oklab, var(--c), black");
+      expect(out).not.toContain("shade(");
+    });
+
+    test("unexpected arg count throws", async () => {
+      expect(transform(".x { color: shade(a); }")).rejects.toThrow();
+    });
+
+    test("non-numeric factor throws", async () => {
+      expect(transform(".x { color: shade(#fff, abc); }")).rejects.toThrow();
+    });
+  });
+});

package/src/transform.ts

@@ -0,0 +1,642 @@
+import postcss, { type Plugin } from "postcss";
+import type { CompileOptions } from "./compile.ts";
+import { ALL_SELECTORS } from "./selectors.ts";
+
+/**
+ * Pre-processes raw sassc output to remove GTK-specific syntax that
+ * isn't valid CSS and would prevent PostCSS from parsing.
+ *
+ * This is a text-based pass that runs BEFORE PostCSS parsing.
+ */
+export function preprocess(rawCSS: string, options?: CompileOptions): string {
+  const lines = rawCSS.split("\n");
+  const { scheme, accentColor } = options ?? {};
+
+  // Pass 1: Collect @define-color values, separating light (top-level) from
+  // dark (inside @media (prefers-color-scheme: dark)).
+  // Light values are used as defaults when resolving @name references.
+  const accentSeed = accentColor ?? "#3584e4";
+  const lightColors = new Map<string, string>([
+    // Runtime-only colors set by adw-style-manager.c, never in stylesheet
+    ["accent_bg_color", accentSeed],
+    ["accent_fg_color", "white"],
+  ]);
+  const darkColors = new Map<string, string>([
+    ["accent_bg_color", accentSeed],
+    ["accent_fg_color", "white"],
+  ]);
+
+  let insideDarkMedia = false;
+  let braceDepth = 0;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    // Track whether we're inside a @media (prefers-color-scheme: dark) block
+    if (trimmed.includes("prefers-color-scheme: dark")) {
+      insideDarkMedia = true;
+      braceDepth = 0;
+    }
+    if (insideDarkMedia) {
+      for (const ch of trimmed) {
+        if (ch === "{") braceDepth++;
+        if (ch === "}") braceDepth--;
+      }
+      if (braceDepth <= 0 && trimmed.includes("}")) {
+        insideDarkMedia = false;
+      }
+    }
+
+    // Collect @define-color declarations
+    const defineMatches = trimmed.matchAll(/@define-color\s+(\S+)\s+([^;]+);/g);
+    for (const m of defineMatches) {
+      if (insideDarkMedia) {
+        darkColors.set(m[1]!, m[2]!);
+      } else {
+        lightColors.set(m[1]!, m[2]!);
+        if (!darkColors.has(m[1]!)) {
+          darkColors.set(m[1]!, m[2]!);
+        }
+      }
+    }
+  }
+
+  // Resolve @name references within a color value using the given color map
+  function resolveColorRef(value: string, colors: Map<string, string>, depth = 0): string {
+    if (depth > 10) return value; // prevent infinite recursion
+    return value.replace(/@([a-z][a-z0-9]*(?:_[a-z0-9]+)*)/g, (_m, name: string) => {
+      const resolved = colors.get(name);
+      if (resolved) return resolveColorRef(resolved, colors, depth + 1);
+      return `var(--${name.replace(/_/g, "-")})`;
+    });
+  }
+
+  // Pass 2: Strip @define-color lines and resolve @name references.
+  const output: string[] = [];
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    // Strip @define-color lines
+    if (trimmed.startsWith("@define-color ")) {
+      continue;
+    }
+
+    // Handle @define-color inside @media blocks
+    if (trimmed.includes("@define-color ")) {
+      const cleaned = line.replace(/@define-color\s+\S+\s+[^;]+;\s*/g, "");
+      const inner = cleaned.replace(/@media\s*\([^)]+\)\s*\{\s*\}/, "").trim();
+      if (inner === "" || inner === "}" || cleaned.trim() === "}") {
+        if (cleaned.trim() === "}") {
+          output.push(cleaned);
+        }
+        continue;
+      }
+      output.push(cleaned);
+      continue;
+    }
+
+    output.push(line);
+  }
+
+  let result = output.join("\n");
+
+  // Convert remaining GTK @color_name references to resolved values.
+  // Uses light colors as default since they appear at the top level.
+  // Must NOT match @media, @keyframes, @import, etc. — those have no underscores.
+  result = result.replace(/@([a-z][a-z0-9]*(?:_[a-z0-9]+)+)/g, (_match, name: string) => {
+    const defined = lightColors.get(name);
+    if (defined) {
+      return resolveColorRef(defined, lightColors);
+    }
+    return `var(--${name.replace(/_/g, "-")})`;
+  });
+
+  // Collect per-scheme color variable differences
+  const darkOverrides: string[] = [];
+  for (const [name, darkVal] of darkColors) {
+    const lightVal = lightColors.get(name);
+    const resolvedDark = resolveColorRef(darkVal, darkColors);
+    const resolvedLight = lightVal ? resolveColorRef(lightVal, lightColors) : null;
+    if (resolvedDark !== resolvedLight) {
+      darkOverrides.push(`    --${name.replace(/_/g, "-")}: ${resolvedDark};`);
+    }
+  }
+
+  if (scheme === "dark") {
+    // Dark-only output: rewrite base :root variables to dark values, emit nothing else
+    if (darkOverrides.length > 0) {
+      result += `\n:root {\n${darkOverrides.join("\n")}\n}\n`;
+    }
+  } else if (scheme === "light") {
+    // Light-only output: no dark overrides at all — light values are already the base
+  } else {
+    // Default: emit both @media and [data-color-scheme] overrides (auto behavior)
+    if (darkOverrides.length > 0) {
+      result += `\n@media (prefers-color-scheme: dark) {\n  :root {\n${darkOverrides.join("\n")}\n  }\n}\n`;
+      result += `\n[data-gtk-provider][data-color-scheme="dark"] {\n${darkOverrides.join("\n")}\n}\n`;
+    }
+
+    const lightOverrides = [...lightColors.entries()]
+      .filter(([name]) => darkColors.has(name))
+      .map(
+        ([name, val]) => `  --${name.replace(/_/g, "-")}: ${resolveColorRef(val, lightColors)};`,
+      );
+    if (lightOverrides.length > 0) {
+      result += `\n[data-gtk-provider][data-color-scheme="light"] {\n${lightOverrides.join("\n")}\n}\n`;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Builds a regex that matches bare GTK selectors as whole words in a CSS selector string.
+ * Matches `button` but not `.button` or `#button` or `-button`.
+ */
+function buildSelectorRegex(): RegExp {
+  // Sort by length descending so longer names match first (e.g. "toggle-group" before "toggle")
+  const names = Object.keys(ALL_SELECTORS).sort((a, b) => b.length - a.length);
+  // Match bare names that are:
+  // - At the start of the selector, or preceded by whitespace, >, +, ~, or comma
+  // - NOT preceded by . # - or another letter (which would mean it's a class, id, or part of another word)
+  const pattern = names.map((n) => n.replace(/-/g, "\\-")).join("|");
+  return new RegExp(`(?<![.#\\w-])(${pattern})(?=[.#:\\[\\s>,+~){]|$)`, "g");
+}
+
+const selectorRegex = buildSelectorRegex();
+
+/**
+ * PostCSS plugin: Remap bare GTK widget selectors to .gtk-* class selectors.
+ */
+const remapSelectors: Plugin = {
+  postcssPlugin: "gtk-remap-selectors",
+  Rule(rule) {
+    const original = rule.selector;
+    const remapped = original.replace(selectorRegex, (match) => {
+      return ALL_SELECTORS[match] ?? match;
+    });
+    if (remapped !== original) {
+      rule.selector = remapped;
+    }
+  },
+};
+
+/**
+ * PostCSS plugin: Remap GTK-specific pseudo-classes to data attributes.
+ */
+const remapPseudoClasses: Plugin = {
+  postcssPlugin: "gtk-remap-pseudo-classes",
+  Rule(rule) {
+    let sel = rule.selector;
+
+    // :backdrop → [data-backdrop]
+    sel = sel.replace(/:backdrop/g, "[data-backdrop]");
+
+    // :drop(active) → [data-drop-active]
+    sel = sel.replace(/:drop\(active\)/g, "[data-drop-active]");
+
+    // :selected → [aria-selected="true"]
+    sel = sel.replace(/:selected/g, '[aria-selected="true"]');
+
+    // :checked → [data-checked] (GTK uses checked state for toggles/spinners)
+    sel = sel.replace(/:checked/g, "[data-checked]");
+
+    // :indeterminate → [data-indeterminate] (web <span> never matches native :indeterminate)
+    sel = sel.replace(/:indeterminate/g, "[data-indeterminate]");
+
+    // :visited → [data-visited] (browsers restrict :visited styling; use data attribute)
+    sel = sel.replace(/:visited/g, "[data-visited]");
+
+    // :disabled → [data-disabled] (<span> doesn't support :disabled natively)
+    sel = sel.replace(/:disabled/g, "[data-disabled]");
+
+    if (sel !== rule.selector) {
+      rule.selector = sel;
+    }
+  },
+};
+
+/**
+ * PostCSS plugin: Handle -gtk-* vendor properties.
+ */
+const handleGtkProperties: Plugin = {
+  postcssPlugin: "gtk-handle-properties",
+  Declaration(decl) {
+    // Strip GTK3-style uppercase widget properties: -GtkWidget-*, -GtkDialog-*, etc.
+    if (/^-Gtk[A-Z]/.test(decl.prop)) {
+      decl.remove();
+      return;
+    }
+
+    if (!decl.prop.startsWith("-gtk-")) return;
+
+    switch (decl.prop) {
+      case "-gtk-icon-transform":
+        // -gtk-icon-transform → transform (just strip the -gtk- prefix)
+        decl.prop = "transform";
+        break;
+
+      case "-gtk-icon-shadow":
+        // -gtk-icon-shadow → filter: drop-shadow(...)
+        decl.prop = "filter";
+        decl.value = decl.value
+          .split(",")
+          .map((shadow) => `drop-shadow(${shadow.trim()})`)
+          .join(" ");
+        break;
+
+      case "-gtk-icon-size":
+        // Convert to a CSS custom property that components can read
+        decl.prop = "--gtk-icon-size";
+        break;
+
+      case "-gtk-icon-palette":
+      case "-gtk-icon-source":
+      case "-gtk-icon-style":
+      case "-gtk-icon-filter":
+      case "-gtk-icon-weight":
+      case "-gtk-dpi":
+      case "-gtk-secondary-caret-color":
+        // Remove — handled by React components or not applicable on web
+        decl.remove();
+        break;
+
+      default:
+        // Unknown -gtk- property — convert to CSS custom property as fallback
+        decl.prop = `--${decl.prop.slice(1)}`;
+        break;
+    }
+  },
+};
+
+/**
+ * PostCSS plugin: Replace CSS image() function with linear-gradient() fallback.
+ * image(color) → linear-gradient(color, color)
+ */
+/**
+ * Extract the content of a balanced parenthesized expression starting at `start`.
+ * `start` should point to the opening `(`. Returns the content between parens
+ * and the index after the closing `)`.
+ */
+function extractBalancedParens(
+  str: string,
+  start: number,
+): { content: string; end: number } | null {
+  if (str[start] !== "(") return null;
+  let depth = 0;
+  for (let i = start; i < str.length; i++) {
+    if (str[i] === "(") depth++;
+    if (str[i] === ")") depth--;
+    if (depth === 0) {
+      return { content: str.slice(start + 1, i), end: i + 1 };
+    }
+  }
+  return null;
+}
+
+/**
+ * Split a string by commas, respecting nested parentheses.
+ * e.g. "rgba(0, 0, 0, 0.87), 0.15" → ["rgba(0, 0, 0, 0.87)", "0.15"]
+ */
+function splitArgs(s: string): string[] {
+  const args: string[] = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < s.length; i++) {
+    if (s[i] === "(") depth++;
+    if (s[i] === ")") depth--;
+    if (s[i] === "," && depth === 0) {
+      args.push(s.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  args.push(s.slice(start).trim());
+  return args;
+}
+
+/** Parse a hex color (#RGB, #RRGGBB, #RRGGBBAA) to [r, g, b] or null. */
+function parseHex(hex: string): [number, number, number] | null {
+  const m = hex.match(/^#([0-9a-fA-F]+)$/);
+  if (!m) return null;
+  const h = m[1]!;
+  if (h.length === 3) {
+    return [parseInt(h[0]! + h[0]!, 16), parseInt(h[1]! + h[1]!, 16), parseInt(h[2]! + h[2]!, 16)];
+  }
+  if (h.length === 6 || h.length === 8) {
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+  }
+  return null;
+}
+
+/** Named CSS colors used in GTK themes. */
+const NAMED_COLORS: Record<string, [number, number, number]> = {
+  black: [0, 0, 0],
+  white: [255, 255, 255],
+  red: [255, 0, 0],
+  green: [0, 128, 0],
+  blue: [0, 0, 255],
+  transparent: [0, 0, 0],
+};
+
+/** Try to resolve a color string to RGB. Returns null for dynamic values. */
+function resolveRGB(color: string): [number, number, number] | null {
+  const lower = color.toLowerCase();
+  if (NAMED_COLORS[lower]) return NAMED_COLORS[lower]!;
+  return parseHex(color);
+}
+
+/**
+ * Convert a GTK alpha(color, opacity) call to web CSS.
+ * - alpha(#hex, 0.5)       → rgba(r, g, b, 0.5)
+ * - alpha(currentColor, 0.5) → color-mix(in srgb, currentColor 50%, transparent)
+ * - alpha(color)            → color (single-arg form is identity in GTK)
+ */
+function convertAlpha(content: string): string {
+  const args = splitArgs(content);
+  if (args.length === 1) return args[0]!; // single-arg: identity
+  if (args.length !== 2) {
+    throw new Error(`gtk-css: unexpected alpha() arguments: alpha(${content})`);
+  }
+
+  const color = args[0]!;
+  const opacity = args[1]!;
+  const opacityNum = parseFloat(opacity);
+
+  // Special case: named color "transparent"
+  if (color.toLowerCase() === "transparent") return "transparent";
+
+  const rgb = resolveRGB(color);
+  if (rgb) {
+    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;
+  }
+
+  // Dynamic color (currentColor, var(), rgba(), etc.)
+  const pct = isNaN(opacityNum) ? opacity : `${Math.round(opacityNum * 100)}%`;
+  return `color-mix(in srgb, ${color} ${pct}, transparent)`;
+}
+
+/**
+ * Convert a GTK mix(color1, color2, factor) call to web CSS.
+ * GTK: mix(c1, c2, f) = f of c2 blended into c1.
+ * Web: color-mix(in srgb, c2 <f*100>%, c1)
+ */
+function convertMix(content: string): string {
+  const args = splitArgs(content);
+  if (args.length !== 3) {
+    throw new Error(`gtk-css: unexpected mix() arguments: mix(${content})`);
+  }
+
+  const color1 = args[0]!;
+  const color2 = args[1]!;
+  const factor = args[2]!;
+
+  // Special case: mixing with transparent preserves transparency
+  if (color1.toLowerCase() === "transparent" && color2.toLowerCase() === "transparent") {
+    return "transparent";
+  }
+
+  const factorNum = parseFloat(factor);
+  const pct = isNaN(factorNum) ? factor : `${Math.round(factorNum * 100)}%`;
+  return `color-mix(in srgb, ${color2} ${pct}, ${color1})`;
+}
+
+/**
+ * Convert a GTK shade(color, factor) call to web CSS.
+ * factor > 1 = lighten (multiply RGB channels), factor < 1 = darken.
+ * For hex colors: pre-compute. For dynamic colors: approximate with color-mix.
+ */
+function convertShade(content: string): string {
+  const args = splitArgs(content);
+  if (args.length !== 2) {
+    throw new Error(`gtk-css: unexpected shade() arguments: shade(${content})`);
+  }
+
+  const color = args[0]!;
+  const factor = parseFloat(args[1]!);
+  if (isNaN(factor)) {
+    throw new Error(`gtk-css: non-numeric shade() factor: shade(${content})`);
+  }
+
+  // Special case: transparent is rgba(0,0,0,0) — shading it still produces transparent
+  if (color.toLowerCase() === "transparent") return "transparent";
+
+  const rgb = resolveRGB(color);
+  if (rgb) {
+    // Pre-compute: multiply each channel by factor, clamp to 0-255
+    const r = Math.min(255, Math.max(0, Math.round(rgb[0] * factor)));
+    const g = Math.min(255, Math.max(0, Math.round(rgb[1] * factor)));
+    const b = Math.min(255, Math.max(0, Math.round(rgb[2] * factor)));
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  // Dynamic color: approximate with color-mix (uses srgb; fixColorMixGamut converts to oklab later)
+  if (factor >= 1) {
+    // Lighten: mix with white. shade(c, 1.2) ≈ 20% toward white
+    const pct = Math.round((1 - 1 / factor) * 100);
+    return `color-mix(in srgb, ${color}, white ${pct}%)`;
+  }
+  // Darken: mix with black. shade(c, 0.8) ≈ 20% toward black
+  const pct = Math.round((1 - factor) * 100);
+  return `color-mix(in srgb, ${color}, black ${pct}%)`;
+}
+
+/**
+ * Replace all occurrences of a GTK color function in a CSS value string.
+ * Uses balanced-paren matching so nested functions (e.g. alpha(rgba(...), 0.5)) work.
+ */
+function replaceColorFunction(
+  val: string,
+  funcName: string,
+  converter: (content: string) => string,
+): string {
+  let result = "";
+  let i = 0;
+  const needle = funcName + "(";
+  const needleLen = needle.length;
+
+  while (i < val.length) {
+    const match = val.indexOf(needle, i);
+    if (match === -1) {
+      result += val.slice(i);
+      break;
+    }
+
+    // Guard: must not be preceded by a letter or hyphen (part of another function name)
+    if (match > 0 && /[a-z-]/i.test(val[match - 1]!)) {
+      result += val.slice(i, match + needleLen);
+      i = match + needleLen;
+      continue;
+    }
+
+    // Extract balanced parens
+    const parenStart = match + funcName.length;
+    const parens = extractBalancedParens(val, parenStart);
+    if (!parens) {
+      result += val.slice(i, match + needleLen);
+      i = match + needleLen;
+      continue;
+    }
+
+    result += val.slice(i, match);
+    result += converter(parens.content);
+    i = parens.end;
+  }
+
+  return result;
+}
+
+/**
+ * PostCSS plugin: Convert GTK-specific color functions to web CSS equivalents.
+ * - alpha(color, opacity) → rgba() or color-mix()
+ * - mix(color1, color2, factor) → color-mix()
+ * - shade(color, factor) → pre-computed rgb() or color-mix()
+ *
+ * Must run BEFORE fixColorMixGamut (which converts color-mix srgb→oklab).
+ */
+const convertGtkColorFunctions: Plugin = {
+  postcssPlugin: "gtk-convert-color-functions",
+  Declaration(decl) {
+    const val = decl.value;
+    if (!val.includes("alpha(") && !val.includes("mix(") && !val.includes("shade(")) return;
+
+    let result = val;
+    if (result.includes("alpha(")) result = replaceColorFunction(result, "alpha", convertAlpha);
+    if (result.includes("shade(")) result = replaceColorFunction(result, "shade", convertShade);
+    if (result.includes("mix(")) result = replaceColorFunction(result, "mix", convertMix);
+
+    if (result !== val) {
+      decl.value = result;
+    }
+  },
+};
+
+const replaceImageFunction: Plugin = {
+  postcssPlugin: "gtk-replace-image-function",
+  Declaration(decl) {
+    if (!decl.value.includes("image(")) return;
+
+    // GTK's image(color) creates a solid-color image layer.
+    // Convert to linear-gradient(color, color) which is the web equivalent.
+    // This preserves layering behavior: background-image layers ON TOP of
+    // background-color, so hover overlays work correctly.
+    const result = replaceColorFunction(
+      decl.value,
+      "image",
+      (content) => `linear-gradient(${content}, ${content})`,
+    );
+    if (result !== decl.value) {
+      decl.value = result;
+    }
+  },
+};
+
+/**
+ * PostCSS plugin: Fix transition properties that reference -gtk-icon-transform.
+ */
+const fixGtkTransitionRefs: Plugin = {
+  postcssPlugin: "gtk-fix-transition-refs",
+  Declaration(decl) {
+    if (decl.prop.startsWith("transition") && decl.value.includes("-gtk-icon-transform")) {
+      decl.value = decl.value.replace(/-gtk-icon-transform/g, "transform");
+    }
+  },
+};
+
+/**
+ * PostCSS plugin: Remove -gtk-recolor() function references.
+ */
+const removeGtkRecolor: Plugin = {
+  postcssPlugin: "gtk-remove-recolor",
+  Declaration(decl) {
+    if (decl.value.includes("-gtk-recolor(") || decl.value.includes("-gtk-icontheme(")) {
+      decl.remove();
+    }
+  },
+};
+
+/**
+ * PostCSS plugin: Remove -gtk-scaled() declarations (not resolvable at runtime).
+ * Asset embedding is handled at build time in compile.ts via makeGtkAssetPlugin.
+ */
+const removeGtkAssetFunctions: Plugin = {
+  postcssPlugin: "gtk-remove-asset-functions",
+  Declaration(decl) {
+    if (decl.value.includes("-gtk-scaled(")) {
+      decl.remove();
+    }
+  },
+};
+
+/**
+ * PostCSS plugin: Rewrite color-mix(in srgb, ...) to color-mix(in oklab, ...).
+ *
+ * GTK's CSS engine does NOT apply gamut mapping when converting colors to sRGB
+ * for color-mix interpolation:
+ *   https://gitlab.gnome.org/GNOME/gtk/-/blob/5957885ec/gtk/gtkcsscolor.c#L659
+ *   (FIXME comment: "Gamut mapping goes here")
+ *
+ * Browsers per CSS spec DO gamut-map, which clamps out-of-sRGB-gamut values
+ * (e.g. negative green from oklab-derived destructive colors). This produces
+ * visibly different results for wide-gamut colors like the destructive red.
+ *
+ * Switching the interpolation space to oklab avoids the issue: oklab values are
+ * always in-gamut, so no gamut mapping is triggered, matching GTK's behavior.
+ */
+const COLOR_MIX_SRGB_RE = /color-mix\(in srgb\b/g;
+const fixColorMixGamut: Plugin = {
+  postcssPlugin: "gtk-fix-color-mix-gamut",
+  Declaration(decl) {
+    if (decl.value.includes("color-mix(in srgb")) {
+      decl.value = decl.value.replace(COLOR_MIX_SRGB_RE, "color-mix(in oklab");
+    }
+  },
+};
+
+/**
+ * PostCSS plugin: Convert .gtk-switch padding to transparent border.
+ *
+ * In native GTK, padding on the switch reduces the child allocation — the slider
+ * knob is inset from the track edge. With CSS absolute positioning (used in
+ * layout.css), the containing block is the padding edge (inside border, outside
+ * padding), so padding does NOT shrink the space for absolutely-positioned children.
+ *
+ * Border DOES shrink it: the containing block for position:absolute is the
+ * padding edge, which is inside the border. So converting padding to transparent
+ * border achieves the same visual inset while correctly constraining the slider.
+ */
+const fixSwitchPadding: Plugin = {
+  postcssPlugin: "gtk-fix-switch-padding",
+  Declaration(decl) {
+    if (decl.prop !== "padding") return;
+    if (!decl.parent || decl.parent.type !== "rule") return;
+    const rule = decl.parent;
+    if (!rule.selector.includes(".gtk-switch")) return;
+    if (rule.selector.includes(">")) return;
+
+    // Replace padding with transparent border of the same width
+    decl.prop = "border";
+    decl.value = `${decl.value} solid transparent`;
+  },
+};
+
+/**
+ * The complete GTK → web CSS PostCSS transformation pipeline.
+ * Pass a custom asset plugin to replace -gtk-scaled() with embedded data URIs.
+ */
+export function buildGtkToWeb(assetPlugin?: Plugin) {
+  return postcss([
+    remapSelectors,
+    remapPseudoClasses,
+    handleGtkProperties,
+    fixGtkTransitionRefs,
+    convertGtkColorFunctions,
+    replaceImageFunction,
+    fixColorMixGamut,
+    removeGtkRecolor,
+    assetPlugin ?? removeGtkAssetFunctions,
+    fixSwitchPadding,
+  ]);
+}
+
+/** Default pipeline — removes -gtk-scaled() declarations. */
+export const gtkToWeb = buildGtkToWeb();