feat(types): Add types for the object form of style (#8464)

.changeset/long-trees-listen.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Add types for the object syntax for `style` (ex: `style={{color: 'red'}}`)

packages/astro/astro-jsx.d.ts

@@ -471,6 +471,33 @@ declare namespace astroHTML.JSX {
 		| 'treegrid'
 		| 'treeitem';
 
+	type CssProperty = keyof Omit<
+		CSSStyleDeclaration,
+		| 'item'
+		| 'setProperty'
+		| 'removeProperty'
+		| 'getPropertyValue'
+		| 'getPropertyPriority'
+		| 'parentRule'
+		| 'length'
+		| 'cssFloat'
+		| 'cssText'
+		| typeof Symbol.iterator
+		| number
+	>;
+
+	type KebabCSSDOMProperties = import('./dist/type-utils.js').KebabKeys<DOMCSSProperties>;
+
+	type DOMCSSProperties = {
+		[key in CssProperty]?: string | number | null | undefined;
+	};
+	type AllCSSProperties = {
+		[key: string]: string | number | null | undefined;
+	};
+	type StyleObject = import('./dist/type-utils.js').Simplify<
+		KebabCSSDOMProperties & DOMCSSProperties & AllCSSProperties
+	>;
+
 	interface HTMLAttributes extends AriaAttributes, DOMAttributes, AstroBuiltinAttributes {
 		// Standard HTML Attributes
 		accesskey?: string | undefined | null;
@@ -513,7 +540,7 @@ declare namespace astroHTML.JSX {
 		lang?: string | undefined | null;
 		slot?: string | undefined | null;
 		spellcheck?: 'true' | 'false' | boolean | undefined | null;
-		style?: string | Record<string, any> | undefined | null;
+		style?: string | StyleObject | undefined | null;
 		tabindex?: number | string | undefined | null;
 		title?: string | undefined | null;
 		translate?: 'yes' | 'no' | undefined | null;

packages/astro/src/type-utils.ts

@@ -17,5 +17,13 @@ export type OmitIndexSignature<ObjectType> = {
 		: KeyType]: ObjectType[KeyType];
 };
 
+// Transform a string into its kebab case equivalent (camelCase -> kebab-case). Useful for CSS-in-JS to CSS.
+export type Kebab<T extends string, A extends string = ''> = T extends `${infer F}${infer R}`
+	? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
+	: A;
+
+// Transform every key of an object to its kebab case equivalent using the above utility
+export type KebabKeys<T> = { [K in keyof T as K extends string ? Kebab<K> : K]: T[K] };
+
 // Similar to `keyof`, gets the type of all the values of an object
 export type ValueOf<T> = T[keyof T];

packages/astro/types.d.ts

@@ -9,6 +9,11 @@ export type HTMLAttributes<Tag extends HTMLTag> = Omit<
 	keyof Omit<AstroBuiltinAttributes, 'class:list'>
 >;
 
+/**
+ * All the CSS properties available, as defined by the CSS specification
+ */
+export type CSSProperty = keyof astroHTML.JSX.KebabCSSDOMProperties;
+
 type PolymorphicAttributes<P extends { as: HTMLTag }> = Omit<P & HTMLAttributes<P['as']>, 'as'> & {
 	as?: P['as'];
 };