Skip to content

dynamic style property resolves to undefined in ssr #2552

@teidesu

Description

@teidesu

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions