Merge branch 'main' into astro-add

withastro · Jul 21, 2022 · 6bc73f4 · 6bc73f4
2 parents 9ea8651 + 4626edd
commit 6bc73f4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/astro/astro-jsx.d.ts b/packages/astro/astro-jsx.d.ts
@@ -507,7 +507,7 @@ declare namespace astroHTML.JSX {
 		lang?: string | undefined | null;
 		slot?: string | undefined | null;
 		spellcheck?: 'true' | 'false' | boolean | undefined | null;
-		style?: string | undefined | null;
+		style?: string | Record<string, any> | undefined | null;
 		tabindex?: number | string | undefined | null;
 		title?: string | undefined | null;
 		translate?: 'yes' | 'no' | undefined | null;
@@ -1017,7 +1017,7 @@ declare namespace astroHTML.JSX {
 		method?: string | undefined | null;
 		min?: number | string | undefined | null;
 		name?: string | undefined | null;
-		style?: string | undefined | null;
+		style?: string | Record<string, any> | undefined | null;
 		target?: string | undefined | null;
 		type?: string | undefined | null;
 		width?: number | string | undefined | null;

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -542,6 +542,13 @@ export function createAstro(
 const toAttributeString = (value: any, shouldEscape = true) =>
 	shouldEscape ? String(value).replace(/&/g, '&#38;').replace(/"/g, '&#34;') : value;
 
+const kebab = (k: string) =>
+	k.toLowerCase() === k ? k : k.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+const toStyleString = (obj: Record<string, any>) =>
+	Object.entries(obj)
+		.map(([k, v]) => `${kebab(k)}:${v}`)
+		.join(';');
+
 const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']);
 
 // A helper used to turn expressions into attribute key/value
@@ -575,6 +582,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}`);