wip: cherry-pick jsx-runtime fix?

examples/with-mdx/src/pages/index.mdx

@@ -15,3 +15,7 @@ Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}.
 Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}.
 
 <Counter client:idle>This is a **counter**!</Counter>
+
+```js
+export const code = true
+```

packages/astro/src/runtime/server/index.ts

@@ -575,6 +575,16 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
  return markHTMLString(` ${key.slice(0, -5)}="${listValue}"`);
  }
 
+ // support object styles for better JSX compat
+ if (key === 'style' && typeof value === 'object') {
+ return markHTMLString(` ${key}="${toStyleString(value)}"`);
+ }
+
+ // support `className` for better JSX compat
+ if (key === 'className') {
+ return markHTMLString(` class="${toAttributeString(value, shouldEscape)}"`);
+ }
+
  // Boolean values only need the key
  if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) {
  return markHTMLString(` ${key}`);