michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Support objects for style attribute (#3776)

Browse source 
* feat: support style objects

* chore: update jsx types

* feat: support className for better JSX compat

Co-authored-by: Nate Moore <nate@astro.build>
This commit is contained in:
Nate Moore 2022-07-21 12:16:08 -05:00 committed by GitHub
parent ce2994c9c0
commit 2a5e92facd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/astro/astro-jsx.d.ts vendored
View file

@ -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;

13
packages/astro/src/runtime/server/index.ts
View file

@ -542,6 +542,9 @@ 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 +578,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}`);