Tooltip colors, width, and minifier bugfix.

- Tooltips: Use theme-independent inverted surface colors. Add comfortable width (max-content + max-width).
- Add --mu-inverted-background/--mu-inverted-color variables (always opposite of page background, independent of theme).
- Fix minifier stripping descendant combinator space before pseudo-classes (:is, :where, :not, etc.).
- Fix tooltip top placement specificity vs PicoCSS [data-placement=top] selector.

Author: Amaury

CLAUDE.md

@@ -57,7 +57,8 @@ These µCSS rules exist to fix PicoCSS default behaviors:
 - `nav details.dropdown { display: inline-block }` — Fix Firefox full-width nav dropdowns (picocss/pico#701) — remove when fixed upstream
 - `:where([role=group], [role=search]) + small` — Fix helper text not styled after input groups (picocss/pico#540, picocss/pico#700) — remove when fixed upstream
 - `[data-tooltip] { display: inline-block }` — Fix tooltip mispositioned on inline elements in Chromium (picocss/pico#678) — remove when fixed upstream
-- `[data-tooltip]::before { white-space: pre-line; max-width: 20rem }` — Fix tooltip overflow on long text, support explicit line breaks (picocss/pico#665, picocss/pico#715) — remove when fixed upstream
+- `[data-tooltip]::before/::after` use `--mu-inverted-background`/`--mu-inverted-color` instead of themed contrast — PicoCSS contrast is theme-dependent in µCSS, not always readable as tooltip background
+- `[data-tooltip]::before { white-space: pre-line; width: max-content; max-width: 20rem }` — Fix tooltip overflow on long text, support explicit line breaks, comfortable width (picocss/pico#665, picocss/pico#715) — remove when fixed upstream
 - `code, kbd, samp { padding: 0.125rem 0.375rem }` — Fix inline code vertical padding too thick (picocss/pico#651) — remove when fixed upstream
 - PicoCSS sets `:where(table) { width: 100% }` — all tables are fullwidth by default, no `.table-fullwidth` class needed
 - PicoCSS `.outline` button style (3 colors) coexists with µCSS `.btn-outline` (11 colors) — different selectors, no conflict

build/mu-build.php

@@ -219,7 +219,13 @@ function formatSize(int $b): string {
 		// Strip all comments (including /*! */ banners)
 		$output = preg_replace('/\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\//', '', $output);
 		$output = preg_replace('/\s+/', ' ', $output);
-		$output = preg_replace('/\s*([{};:,])\s*/', '$1', $output);
+		// Strip spaces around structural tokens (but not ':' — it appears in selectors
+		// as pseudo-class prefix where a preceding space is a descendant combinator)
+		$output = preg_replace('/\s*([{};,])\s*/', '$1', $output);
+		// Strip spaces around ':' only inside declaration blocks (property: value)
+		$output = preg_replace_callback('/\{([^}]*)\}/', function ($m) {
+			return '{' . preg_replace('/\s*:\s*/', ':', $m[1]) . '}';
+		}, $output);
 		$output = str_replace(';}', '}', $output);
 		$banner = $noBanner ? '' : "/* µCSS (muCSS) - mucss.org */\n";
 		$output = $banner . trim($output) . "\n";

build/mu-color-gen.php

@@ -207,6 +207,10 @@ function buildCss(array $theme, array $palette): string {
 			$out[] = "\t{$name}: {$value};";
 		}
 	}
+	$out[] = '';
+	$out[] = "\t/* Inverted surface (always opposite of page background, theme-independent) */";
+	$out[] = "\t--mu-inverted-background: #181c25;";
+	$out[] = "\t--mu-inverted-color: #fff;";
 	$out[] = '}';
 	$out[] = '';
 
@@ -223,6 +227,10 @@ function buildCss(array $theme, array $palette): string {
 			$out[] = "\t\t{$name}: {$value};";
 		}
 	}
+	$out[] = '';
+	$out[] = "\t\t/* Inverted surface (always opposite of page background, theme-independent) */";
+	$out[] = "\t\t--mu-inverted-background: #eff1f4;";
+	$out[] = "\t\t--mu-inverted-color: #000;";
 	$out[] = "\t}";
 	$out[] = '}';
 	$out[] = '';
@@ -239,6 +247,10 @@ function buildCss(array $theme, array $palette): string {
 			$out[] = "\t{$name}: {$value};";
 		}
 	}
+	$out[] = '';
+	$out[] = "\t/* Inverted surface (always opposite of page background, theme-independent) */";
+	$out[] = "\t--mu-inverted-background: #eff1f4;";
+	$out[] = "\t--mu-inverted-color: #000;";
 	$out[] = '}';
 	$out[] = '';
 

css/mu.utilities.css

@@ -28,10 +28,23 @@ li ol {
 	display: inline-block;
 }
 
+/* Tooltip: use inverted surface instead of themed contrast (contrast is theme-dependent, not always readable) */
+/* Extra [data-placement] selector matches PicoCSS specificity for top placement */
+[data-tooltip]::before,
+[data-tooltip][data-placement]::before {
+	background: var(--mu-inverted-background);
+	color: var(--mu-inverted-color);
+}
+/* Caret color must match tooltip body (PicoCSS uses currentColor for the border arrow) */
+[data-tooltip]::after,
+[data-tooltip][data-placement]::after {
+	color: var(--mu-inverted-background);
+}
 /* PicoCSS bugfix: tooltips overflow on long text (picocss/pico#665, picocss/pico#715) — remove when fixed upstream */
-/* pre-line preserves explicit line breaks (
) while wrapping long text */
+/* pre-line preserves explicit line breaks (
) while wrapping long text; width: max-content for comfortable sizing */
 [data-tooltip]::before {
 	white-space: pre-line;
+	width: max-content;
 	max-width: 20rem;
 }