solid icon indicating copy to clipboard operation
solid copied to clipboard

dynamic style property resolves to `undefined` in ssr

Open teidesu opened this issue 2 months ago • 2 comments

Describe the bug

basically the title, if i use dynamic property in style it resolves to undefined in ssr (but works correctly in csr), leading to a fouc

Image

Your Example Website or App

https://stackblitz.com/edit/solidstart-kbdu5aah?file=src%2Fcomponents%2FProgress.tsx

Steps to Reproduce the Bug or Issue

export function Progress(props: ProgressProps) {
  return (
    <div
      class="progress-fill"
      style={{
        [props.orientation === 'y' ? 'height' : 'width']: `${props.value * 100}%`,
      }}
      // vv this works fine, however vv
      // style={
      //   props.orientation === 'y'
      //     ? { height: `${props.value * 100}%` }
      //     : { width: `${props.value * 100}%` }
      // }
    />
  );
}

in solid playground we can clearly see that the undefined comes from the transformation, so dom-expressions might be a better place for this issue, but idk

Image

Expected behavior

the property resolves correctly

Screenshots or Videos

No response

Platform

  • OS: n/a
  • Browser: Chrome
  • Version: 141

Additional context

No response

teidesu avatar Oct 27 '25 07:10 teidesu

Ive been looking for a usecase of computed properties on style objects and that one is perfect. I will see to add a fix soon to one of the existing PRs https://github.com/ryansolid/dom-expressions/pull/461

titoBouzout avatar Oct 27 '25 12:10 titoBouzout

PR is in https://github.com/ryansolid/dom-expressions/pull/466

Solid have just released v1.9.10, but sadly I couldnt make it in time by some minutes, so it doesnt include the fix. Expect a fix for the next version.

titoBouzout avatar Oct 27 '25 21:10 titoBouzout