fix(16): solid lower static style="..." to object form (mirror react)

ITEM-1-RESIDUAL partial closure. Static `style="k: v"` HTML attributes now
lower to JSX `style={{k: v}}` object form on the Solid target, mirroring
the existing React path. The bug class: when a child component is invoked
with a string-form `style="..."` attribute and the child auto-forwards
via `{...attrs}`, Solid's dom-expressions `style()` helper routed the
string value through `nodeStyle.cssText = value` which REPLACES the entire
inline style — wiping any wrapper-set `style={{...}}` defaults. With the
object-form lowering the child receives an object, Solid iterates and
`setProperty`-per-key, MERGING with the wrapper's defaults instead.

Net effect on the ThemedButtonConsumer · solid matrix VR cell: unchanged
at 3 108 px diff. The wrapper's `--btn-fg: #ffffff` was already rendering
white via the CSS `var(--btn-fg, #fff)` fallback, so this fix moves no
visible pixels. Still worth landing — future engine wrappers that depend
on the precise inline-style cascade (rather than CSS-var fallback) now
work correctly on Solid, matching React.

Files:
  - packages/targets/solid/src/emit/emitTemplateAttribute.ts —
    refactored `lowerStringLiteralStyle` to take `(sourceLoc, literal)`
    (mirror react sibling) and added the bare-`style="..."` static path
    next to the existing `:style="'literal'"` binding-path call site
  - tests/dist-parity/fixtures/ThemedButtonConsumer.solid.tsx — rebless
    (sole consumer of static `style="..."` in the dist-parity slate)
  - matrix.spec.ts PHASE_14_1_FOLLOWUP comment — updated to reflect the
    closure attempt + remaining ~20 px width residual (unaffected by this
    fix; ruled out the style-clobber theory)

Verification:
  - turbo run typecheck --force --continue: 47/47 green
  - turbo run test --continue: 46/46 green (target-solid 188/188,
    dist-parity 512/512)
  - tools/ci-repro/vr.sh -g ThemedButtonConsumer.*solid: cell still
    fails at 3 108 px (gated); themed-button × solid DOM-assertion
    cells remain green
  - Full VR matrix (cached run): 241 passed / 13 skipped / 0 failed
    — no new regressions

The remaining 20 px width drift is a different, narrower issue. Carried
into a separate post-Phase-16 investigation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: serpentblade

packages/targets/solid/src/emit/emitTemplateAttribute.ts

@@ -415,7 +415,7 @@ function cssPropToStyleKey(prop: string): string {
  * PostCSS throw).
  */
 function lowerStringLiteralStyle(
-  attr: Extract<AttributeBinding, { kind: 'binding' }>,
+  sourceLoc: AttributeBinding['sourceLoc'],
   literal: string,
 ): { jsx: string; diagnostics: Diagnostic[] } {
   const diagnostics: Diagnostic[] = [];
@@ -432,9 +432,9 @@ function lowerStringLiteralStyle(
       code: RozieErrorCode.STYLE_PARSE_ERROR,
       severity: 'error',
       message:
-        `Could not parse inline \`:style\` string ${JSON.stringify(literal)}: ` +
+        `Could not parse inline \`style\` string ${JSON.stringify(literal)}: ` +
         `${err instanceof Error ? err.message : String(err)}`,
-      loc: attr.sourceLoc,
+      loc: sourceLoc,
     });
     return { jsx: 'style={{}}', diagnostics };
   }
@@ -448,7 +448,7 @@ function lowerStringLiteralStyle(
         message:
           `\`!important\` on \`${decl.prop}\` is dropped by Solid's style-object form. ` +
           `Solid silently ignores \`!important\` in inline style objects.`,
-        loc: attr.sourceLoc,
+        loc: sourceLoc,
       });
     }
     props.push(`${keyOut}: ${JSON.stringify(decl.value)}`);
@@ -475,6 +475,24 @@ function emitNonClassAttribute(
     // Unknown ref — pass through as static
   }
 
+  // bare `style="k1: v1; k2: v2"` static → object form. Mirrors React's
+  // matching emit path (Phase 14-06 ThemedButtonConsumer divergence): when a
+  // child component is invoked with a string-form `style="..."` attribute,
+  // the consumer's prop reaches the child as a STRING. The child's auto-
+  // fallthrough spread (`{...attrs}`) then routes the string through Solid's
+  // dom-expressions `style()` helper, which for string values does
+  // `nodeStyle.cssText = value` — REPLACING the entire inline style and
+  // wiping any wrapper-set `style={{...}}` defaults (the
+  // `ThemedButtonConsumer · solid` matrix VR cell residual after Item 1:
+  // wrapper's `--btn-fg: #ffffff` survived only via the `var(...)` fallback,
+  // not via the inline style). Converting the string to an object literal
+  // here ensures the child receives `props.style` as an object; Solid's
+  // `style()` helper then iterates and `setProperty`s per key, MERGING with
+  // the wrapper's defaults instead of clobbering them.
+  if (attr.kind === 'static' && attr.name === 'style') {
+    return lowerStringLiteralStyle(attr.sourceLoc, attr.value);
+  }
+
   if (attr.kind === 'static') {
     const jsxName = htmlAttrToSolidName(attr.name);
     if (NUMERIC_HTML_ATTRS.has(attr.name.toLowerCase()) && /^-?\d+(?:\.\d+)?$/.test(attr.value)) {
@@ -493,7 +511,7 @@ function emitNonClassAttribute(
     //     register the runtime helper import.
     if (attr.name === 'style') {
       if (t.isStringLiteral(attr.expression)) {
-        return lowerStringLiteralStyle(attr, attr.expression.value);
+        return lowerStringLiteralStyle(attr.sourceLoc, attr.expression.value);
       }
       if (!t.isObjectExpression(attr.expression)) {
         ctx.collectors.runtime.add('parseInlineStyle');

tests/dist-parity/fixtures/ThemedButtonConsumer.solid.tsx

@@ -25,13 +25,13 @@ export default function ThemedButtonConsumer(_props: ThemedButtonConsumerProps):
     }`}</style>
     <>
     <div {...attrs} class={"themed-button-consumer" + (((attrs as unknown as Record<string, unknown>).class as string | undefined) ? " " + ((attrs as unknown as Record<string, unknown>).class as string | undefined) : "")} data-rozie-s-14b8cbaa="">
-      <ThemedButton id="auto-btn" type="button" aria-label="Auto-fallthrough button" data-testid="auto-themed-button" style="--btn-bg: #ef4444" class={"extra-variant"} label={'Auto'} onClick={onClick} onMouseEnter={onMouseEnter} data-rozie-s-14b8cbaa="" />
+      <ThemedButton id="auto-btn" type="button" aria-label="Auto-fallthrough button" data-testid="auto-themed-button" class={"extra-variant"} style={{ "--btn-bg": "#ef4444" }} label={'Auto'} onClick={onClick} onMouseEnter={onMouseEnter} data-rozie-s-14b8cbaa="" />
 
-      <ThemedButtonManual id="manual-btn" type="button" aria-label="Manual fallthrough button" data-testid="manual-themed-button" style="--btn-bg: #10b981" class={"extra-variant"} label={'Manual'} onClick={onClick} onMouseEnter={onMouseEnter} data-rozie-s-14b8cbaa="" />
+      <ThemedButtonManual id="manual-btn" type="button" aria-label="Manual fallthrough button" data-testid="manual-themed-button" class={"extra-variant"} style={{ "--btn-bg": "#10b981" }} label={'Manual'} onClick={onClick} onMouseEnter={onMouseEnter} data-rozie-s-14b8cbaa="" />
 
-      <ThemedButtonListenersManual id="listeners-manual-btn" type="button" aria-label="Listeners-manual fallthrough button" data-testid="listeners-manual-themed-button" style="--btn-bg: #f59e0b" class={"extra-variant"} label={'Listeners Manual'} onClick={onClick} onMouseEnter={onMouseEnter} data-rozie-s-14b8cbaa="" />
+      <ThemedButtonListenersManual id="listeners-manual-btn" type="button" aria-label="Listeners-manual fallthrough button" data-testid="listeners-manual-themed-button" class={"extra-variant"} style={{ "--btn-bg": "#f59e0b" }} label={'Listeners Manual'} onClick={onClick} onMouseEnter={onMouseEnter} data-rozie-s-14b8cbaa="" />
 
-      <ThemedButtonAllManual id="all-manual-btn" type="button" aria-label="All-manual fallthrough button" data-testid="all-manual-themed-button" style="--btn-bg: #8b5cf6" class={"extra-variant"} label={'All Manual'} onClick={onClick} onMouseEnter={onMouseEnter} data-rozie-s-14b8cbaa="" />
+      <ThemedButtonAllManual id="all-manual-btn" type="button" aria-label="All-manual fallthrough button" data-testid="all-manual-themed-button" class={"extra-variant"} style={{ "--btn-bg": "#8b5cf6" }} label={'All Manual'} onClick={onClick} onMouseEnter={onMouseEnter} data-rozie-s-14b8cbaa="" />
     </div>
     </>
     </>

tests/visual-regression/specs/matrix.spec.ts

@@ -376,17 +376,30 @@ const PHASE_14_1_FOLLOWUP = new Set<string>([
   // (ratio 0.13). The 5 themed-button.spec.ts × solid DOM-assertion cells
   // now pass (see PHASE_14_1_FOLLOWUP_TARGETS in that spec — solid ungated).
   //
-  // RESIDUAL — Cell renders at 454×52 vs 474×52 baseline (~20px width drift,
-  // consistent ~5px per inter-button gap). Root cause unconfirmed; candidates:
-  //   (a) wrapper's `style={{...}}` defaults clobbered by consumer-passed
-  //       string-form `style="…"` via Solid's `nodeStyle.cssText =` path —
-  //       Agent S adjacent bug #2;
-  //   (b) inter-element whitespace handling between consumer's flex-child
-  //       <ThemedButton*> invocations rendering as anonymous flex items
-  //       differently in Solid vs the Vue baseline;
-  //   (c) Solid-unique inline `<style>{...}</style>` emit interacting with
-  //       flex layout in a way the other 5 targets' CSS pipelines avoid.
-  // Carried as Item-1-residual into a follow-up post-Phase-16 sweep.
+  // Item-1-residual closure attempt 1 (2026-05-24): the static-style →
+  // object-form lowering (mirror of React's existing path) was added to
+  // `packages/targets/solid/src/emit/emitTemplateAttribute.ts`. Consumer's
+  // `style="--btn-bg: #ef4444"` now lands as `style={{"--btn-bg": "#ef4444"}}`
+  // on the child invocation, so Solid's `style()` helper iterates and
+  // `setProperty`-per-key instead of `cssText`-replacing — wrapper's
+  // `--btn-fg: #ffffff` is now preserved on the inline style (correctness
+  // improvement). VR diff is unchanged at 3 108 px because the wrapper's
+  // `--btn-fg` was ALREADY rendering white via the CSS `var(--btn-fg, #fff)`
+  // fallback, so the fix moves no visible pixels. Still worth landing —
+  // future wrappers that depend on the precise inline-style cascade
+  // (rather than CSS fallback) now work correctly on Solid.
+  //
+  // RESIDUAL — Cell still 454×52 vs 474×52 baseline (~20 px width drift,
+  // unchanged). Static analysis ruled out the style-clobber theory; the
+  // candidates that remain are subtler cross-target rendering nuances:
+  //   - inter-element whitespace between flex children rendering
+  //     differently in Solid vs Vue (the baseline);
+  //   - Solid-unique inline `<style>{...}</style>` emit affecting flex
+  //     layout (the only target that emits styles inline as a sibling);
+  //   - per-target Linux Chromium font-kerning at text-node boundaries
+  //     (memory `feedback_vr_macos_text_node_kerning` suggests Linux
+  //     kerns identically, but a single specific case may not).
+  // None are blocking; carried into a deeper post-Phase-16 investigation.
   'ThemedButtonConsumer::solid',
   // Pre-Phase-16 cleanup Item 2 PARTIAL closure (2026-05-23). The original
   // gate hypothesis was correct: Svelte uses native class-hash CSS scoping