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

feat: add support for object-based styles

Browse source
This commit is contained in:
Nate Moore 2022-06-17 22:11:02 -05:00
parent 9532d56b50
commit 47941c4d7e
2 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/sweet-dodos-mix.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Add support for object-based styles

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

@ -405,6 +405,8 @@ export function createAstro(
}; };
} }
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 toAttributeString = (value: any, shouldEscape = true) => const toAttributeString = (value: any, shouldEscape = true) =>
shouldEscape ? String(value).replace(/&/g, '&#38;').replace(/"/g, '&#34;') : value; shouldEscape ? String(value).replace(/&/g, '&#38;').replace(/"/g, '&#34;') : value;
@ -437,6 +439,10 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
return markHTMLString(` ${key.slice(0, -5)}="${toAttributeString(serializeListValue(value))}"`); return markHTMLString(` ${key.slice(0, -5)}="${toAttributeString(serializeListValue(value))}"`);
} }
if (key === 'style' && typeof value === 'object') {
return markHTMLString(` ${key}="${toStyleString(value)}"`);
}
// Boolean values only need the key // Boolean values only need the key
if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) { if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) {
return markHTMLString(` ${key}`); return markHTMLString(` ${key}`);