fix(runtime-solid): expander depth-indent padding-left reaches DOM (LB6 SEAM 3)

Root cause (vs solid-js@1.9.x web.cjs style()): Solid applies object-form
`style` via CSSStyleDeclaration.setProperty(key,…), which requires KEBAB-case
property names. parseInlineStyle camelCased declarations (style-to-js
reactCompat), so a dynamic :style returning 'padding-left:1.75rem' became
{ paddingLeft } -> setProperty('paddingLeft') no-op -> depth-indent dropped
(single-word props like overflow survived; multi-word like padding-left did not).

- parseInlineStyle now passes a CSS STRING through verbatim -> Solid's style()
  routes it to node.style.cssText where the browser parses every kebab decl
- object inputs (custom-property maps) still pass through unchanged
- emitted leaves byte-identical (still call parseInlineStyle); runtime-only fix
- red-first behavioral proof mirrors Solid's exact style() application (happy-dom)
- remove obsolete style-to-js<->postcss parity test (it cemented the camelCase bug)

Author: serpentblade

packages/runtime/solid/src/__tests__/parseInlineStyle.parity.test.ts

@@ -0,0 +1,61 @@
+/**
+ * LB6 SEAM 3 — Solid expander depth-indent reaches the DOM.
+ *
+ * Root cause (pinned against solid-js@1.9.12 web.cjs `style()` L294-298): Solid
+ * applies an object-form `style` prop by iterating keys into
+ * `CSSStyleDeclaration.setProperty(key, value)`. `setProperty` requires a
+ * KEBAB-case CSS property name — `setProperty('paddingLeft', …)` is a silent
+ * no-op. `parseInlineStyle` previously camelCased declarations (via style-to-js
+ * `reactCompat: true`), so a dynamic `:style="bodyCellStyle(row,col)"` returning
+ * `'padding-left:1.75rem'` became `{ paddingLeft: '1.75rem' }` → dropped on
+ * Solid. Single-word props (`overflow`) survived (camelCase == kebab); the
+ * data-table expander depth-indent (`padding-left`) did not.
+ *
+ * The fix: `parseInlineStyle` passes a CSS STRING through verbatim so Solid's
+ * `style()` helper routes it to `cssText` (the browser's CSS parser handles the
+ * kebab property correctly). This test reproduces Solid's exact `style()`
+ * application (string → cssText, object → per-key setProperty) and asserts the
+ * depth-indent `padding-left` actually reaches the element.
+ */
+import { describe, it, expect } from 'vitest';
+import { parseInlineStyle } from '../parseInlineStyle.js';
+
+/** Mirror solid-js/web `style(node, value)`: string → cssText, object → setProperty per key. */
+function applySolidStyle(el: HTMLElement, value: ReturnType<typeof parseInlineStyle>): void {
+  if (typeof value === 'string') {
+    el.style.cssText = value;
+    return;
+  }
+  for (const key in value) {
+    const v = (value as Record<string, string>)[key];
+    if (v != null) el.style.setProperty(key, String(v));
+  }
+}
+
+describe('parseInlineStyle → Solid style() application (LB6 SEAM 3)', () => {
+  it('a multi-word `padding-left` declaration reaches the DOM the way Solid applies it', () => {
+    const el = document.createElement('div');
+    applySolidStyle(el, parseInlineStyle('padding-left:1.75rem'));
+    expect(el.style.getPropertyValue('padding-left')).toBe('1.75rem');
+  });
+
+  it('the expander bodyCellStyle shape (pin style + depth pad) applies both declarations', () => {
+    const el = document.createElement('div');
+    applySolidStyle(el, parseInlineStyle('position:sticky;left:0px;padding-left:3.25rem'));
+    expect(el.style.getPropertyValue('position')).toBe('sticky');
+    expect(el.style.getPropertyValue('padding-left')).toBe('3.25rem');
+  });
+
+  it('a CSS custom-property object still applies (object-input passthrough preserved)', () => {
+    const el = document.createElement('div');
+    applySolidStyle(el, parseInlineStyle({ '--rozie-fill': '50%' }));
+    expect(el.style.getPropertyValue('--rozie-fill')).toBe('50%');
+  });
+
+  it('null / empty input is a no-op (no crash)', () => {
+    const el = document.createElement('div');
+    applySolidStyle(el, parseInlineStyle(null));
+    applySolidStyle(el, parseInlineStyle(''));
+    expect(el.getAttribute('style') ?? '').toBe('');
+  });
+});

packages/runtime/solid/src/__tests__/parseInlineStyle.solid-setproperty.test.ts

@@ -1,39 +1,39 @@
 /**
- * Quick-task 260520-8iu Task 1 — parseInlineStyle unit tests (Solid runtime).
+ * parseInlineStyle unit tests (Solid runtime).
  *
- * Covers the Spike 004 string-form `:style` runtime-helper behavior:
- * style-to-js-driven declaration parse, kebab→camel key conversion,
- * `!important` preservation, custom-property / vendor-prefix handling,
- * quoted-semicolon resilience, empty/whitespace + malformed guards.
- *
- * The Solid copy of parseInlineStyle.ts is byte-identical to the React
- * copy (per project precedent — parallel per-target runtime packages).
+ * LB6 SEAM 3 — a CSS STRING is now passed through VERBATIM (Solid's `style()`
+ * helper applies it via `node.style.cssText`, where the browser's CSS parser
+ * handles every kebab-case declaration correctly). The prior style-to-js
+ * camelCase parse was REMOVED: Solid applies object-form styles through
+ * `CSSStyleDeclaration.setProperty(key, …)`, which silently drops a camelCased
+ * multi-word key (`paddingLeft`) — the data-table expander depth-indent bug.
+ * Object inputs (e.g. a `$computed` custom-property map) still pass through.
  */
 import { describe, it, expect } from 'vitest';
 import { parseInlineStyle, toStyleObjectKey } from '../parseInlineStyle.js';
 
-describe('parseInlineStyle (Plan 260520-8iu Task 1)', () => {
-  it('single declaration → single object key', () => {
-    expect(parseInlineStyle('background: red')).toEqual({ background: 'red' });
+describe('parseInlineStyle (LB6 SEAM 3 — string passthrough)', () => {
+  it('a CSS string is passed through verbatim (Solid applies it via cssText)', () => {
+    expect(parseInlineStyle('background: red')).toBe('background: red');
   });
 
-  it('kebab-case property names convert to camelCase keys', () => {
-    expect(parseInlineStyle('background-color: blue; font-size: 12px')).toEqual({
-      backgroundColor: 'blue',
-      fontSize: '12px',
-    });
+  it('a multi-word kebab declaration is NOT camelCased (would break Solid setProperty)', () => {
+    expect(parseInlineStyle('padding-left:1.75rem')).toBe('padding-left:1.75rem');
+    expect(parseInlineStyle('background-color: blue; font-size: 12px')).toBe(
+      'background-color: blue; font-size: 12px',
+    );
   });
 
-  it('CSS custom properties pass through verbatim', () => {
-    expect(parseInlineStyle('--custom-prop: 4px')).toEqual({ '--custom-prop': '4px' });
+  it('CSS custom-property string passes through verbatim', () => {
+    expect(parseInlineStyle('--custom-prop: 4px')).toBe('--custom-prop: 4px');
   });
 
-  it('vendor-prefixed property → leading-capital camelCase key', () => {
-    expect(parseInlineStyle('-webkit-mask: url(a.png)')).toEqual({ WebkitMask: 'url(a.png)' });
+  it('an already-built style OBJECT (custom-property map) passes through unchanged', () => {
+    expect(parseInlineStyle({ '--custom-prop': '4px' })).toEqual({ '--custom-prop': '4px' });
   });
 
-  it('!important is preserved by appending it to the value', () => {
-    expect(parseInlineStyle('color: red !important')).toEqual({ color: 'red !important' });
+  it('!important survives untouched in the string', () => {
+    expect(parseInlineStyle('color: red !important')).toBe('color: red !important');
   });
 
   it('empty input → empty object', () => {
@@ -44,11 +44,16 @@ describe('parseInlineStyle (Plan 260520-8iu Task 1)', () => {
     expect(parseInlineStyle('   ')).toEqual({});
   });
 
-  it('quoted semicolons inside values survive (style-to-js, not naive split)', () => {
-    expect(parseInlineStyle('content: "a;b"')).toEqual({ content: '"a;b"' });
+  it('null / undefined → empty object', () => {
+    expect(parseInlineStyle(null)).toEqual({});
+    expect(parseInlineStyle(undefined)).toEqual({});
+  });
+
+  it('quoted semicolons inside values survive (string is handed to the browser parser intact)', () => {
+    expect(parseInlineStyle('content: "a;b"')).toBe('content: "a;b"');
   });
 
-  it('malformed style string does NOT throw — returns {} or partial object', () => {
+  it('malformed style string does NOT throw (passed through for the browser to tolerate)', () => {
     expect(() => parseInlineStyle('color: ;;; }{[[')).not.toThrow();
   });
 });

packages/runtime/solid/src/__tests__/parseInlineStyle.test.ts

@@ -11,32 +11,29 @@
  *   :style="'opacity: ' + (cond ? '0.5' : '1') + '; ...'"
  *   :style="someStringProp"
  *
- * Delegates to `style-to-js` (a ~1 KB inline-style parser built on
- * `inline-style-parser`) invoked with `{ reactCompat: true }`. That single
- * call subsumes both the declaration parse and the kebab→camel key
- * conversion this helper used to perform by hand:
- *   - parses the gotchas a naive split-on-`;` misses — quoted strings with
- *     semicolons (`content: 'foo;bar'`), `url(data:…;base64,…)` data URIs,
- *     inline comments, `!important`;
- *   - camelCases keys, capitalizing vendor prefixes the way React/Solid
- *     style objects expect (`-webkit-mask` → `WebkitMask`) and passing CSS
- *     custom properties (`--foo`) through verbatim.
+ * SOLID DIFFERENCE (LB6 SEAM 3) — a CSS STRING is passed through VERBATIM and
+ * left for Solid's own `style()` runtime helper to apply. Solid applies an
+ * object-form `style` by iterating keys into `CSSStyleDeclaration.setProperty(
+ * key, value)`, which requires a KEBAB-case CSS property name — a camelCased
+ * key (`paddingLeft`) is a silent no-op (verified against solid-js@1.9.x
+ * `web.cjs` `style()`). Earlier this helper camelCased declarations (via
+ * `style-to-js`'s `reactCompat: true`), so a dynamic `:style` returning
+ * `'padding-left:1.75rem'` became `{ paddingLeft: '1.75rem' }` → DROPPED on
+ * Solid (single-word props like `overflow` survived; the data-table expander
+ * depth-indent `padding-left` did not). Solid's `style()` routes a STRING to
+ * `node.style.cssText`, where the browser's own CSS parser handles every
+ * declaration correctly — so passing the string through is both simpler and
+ * strictly more correct than re-parsing into a camelCased object the Solid
+ * runtime then mis-applies.
  *
- * Replaced postcss (2026-06-04). postcss was the ONLY dependency these
- * runtime packages leaked into a consumer bundle (~24 KB gzip) and it was
- * reachable solely through this helper; style-to-js is ~1.5 KB gzip and
- * produces byte-identical output for the inline-declaration subset. A
- * differential test (`parseInlineStyle.parity.test.ts`) pins the new output
- * to the prior postcss implementation, kept as the oracle in devDependencies.
- *
- * Crash-safety (SPEC-1): the runtime path has no diagnostic stream, so a
- * parse failure must never escape as an exception — `style-to-js` throws on
- * some malformed input, so the call is wrapped to degrade to `{}`.
+ * An already-built style OBJECT (a `$computed` returning a CSS-custom-property
+ * map such as `{ '--rozie-slider-fill-start': '50%' }`) is passed through
+ * unchanged — Solid's `setProperty` handles custom properties regardless of
+ * casing.
  *
  * @public — runtime API consumed by emitted .tsx files.
  */
 import type { JSX } from 'solid-js';
-import styleToJS from 'style-to-js';
 
 const KEBAB_TO_CAMEL_CACHE = new Map<string, string>();
 
@@ -48,9 +45,12 @@ const KEBAB_TO_CAMEL_CACHE = new Map<string, string>();
  *   --custom-prop      →  --custom-prop   (CSS custom properties pass through)
  *   font-size          →  fontSize
  *
- * Retained as a public export (and used by the differential parity test's
- * oracle); the main `parseInlineStyle` path now gets key conversion from
- * `style-to-js` directly.
+ * Retained as a public kebab→camel utility. NOTE (LB6 SEAM 3): the
+ * `parseInlineStyle` path no longer camelCases at all — a CSS string is handed
+ * to Solid's `style()` (cssText) verbatim, so this helper is no longer on that
+ * path. It stays exported for tooling / consumers that key a Solid style object
+ * directly. (Solid's `setProperty` actually wants KEBAB keys, so prefer the raw
+ * CSS property name for Solid style objects — this camelCaser is React-shaped.)
  */
 export function toStyleObjectKey(prop: string): string {
   const cached = KEBAB_TO_CAMEL_CACHE.get(prop);
@@ -81,28 +81,28 @@ export function toStyleObjectKey(prop: string): string {
  *
  * A dynamic `:style` binding's runtime value is NOT statically known to the
  * emitter, so this helper accepts the union the author may produce:
- *   - a CSS string (`'opacity: 0.5; color: red'`) → parsed via `style-to-js`;
+ *   - a CSS string (`'opacity: 0.5; color: red'`) → passed through VERBATIM so
+ *     Solid's `style()` helper applies it via `cssText` (LB6 SEAM 3);
  *   - an already-built style object (a `$computed` returning a
  *     CSS-custom-property map such as `{ '--rozie-slider-fill-start': '50%' }`,
  *     or a plain style object) → passed through verbatim;
  *   - `null` / `undefined` → `{}`.
  *
- * Returning `JSX.CSSProperties` keeps the value assignable to Solid's `style`
- * JSX prop, whose index signature permits CSS custom properties (`--x`).
- * Returns `{}` for empty, whitespace-only, or unparseable input — never throws
- * (see crash-safety note above).
+ * The return type `string | JSX.CSSProperties` is exactly Solid's `style` JSX
+ * prop type, so the emitted `style={parseInlineStyle(<expr>)}` is well-typed.
+ * Returns `{}` for empty / whitespace-only input — never throws.
  */
 export function parseInlineStyle(
   value: string | JSX.CSSProperties | Record<string, string | number> | null | undefined,
-): JSX.CSSProperties {
+): JSX.CSSProperties | string {
   if (value == null) return {};
   // Already an object (e.g. a CSS-custom-property map from a `$computed`) —
   // pass through; Solid's `style` prop accepts custom properties.
   if (typeof value === 'object') return value as JSX.CSSProperties;
   if (value.length === 0 || /^\s*$/.test(value)) return {};
-  try {
-    return styleToJS(value, { reactCompat: true }) as JSX.CSSProperties;
-  } catch {
-    return {};
-  }
+  // A CSS string — hand it to Solid's `style()` runtime, which sets it via
+  // `node.style.cssText`. The browser's CSS parser applies every (kebab-case)
+  // declaration correctly, including multi-word props like `padding-left` that
+  // a camelCased `setProperty` key would silently drop.
+  return value;
 }