From da307e4a080483f8763f1919a05fa2194bb14e22 Mon Sep 17 00:00:00 2001 From: Jenna Smith <175330+jjenzz@users.noreply.github.com> Date: Wed, 3 Jan 2024 14:39:17 +0000 Subject: [PATCH] feat: add extendable `CSSProperties` interface (#9587) * feat: add extendable `CSSProperties` interface * Update .changeset/slow-kiwis-own.md Co-authored-by: Florian Lefebvre --------- Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> Co-authored-by: Florian Lefebvre --- .changeset/slow-kiwis-own.md | 5 +++++ packages/astro/astro-jsx.d.ts | 11 ++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/slow-kiwis-own.md diff --git a/.changeset/slow-kiwis-own.md b/.changeset/slow-kiwis-own.md new file mode 100644 index 000000000000..8e22e97d9ff8 --- /dev/null +++ b/.changeset/slow-kiwis-own.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Adds a `CSSProperties` interface that allows extending the style attribute diff --git a/packages/astro/astro-jsx.d.ts b/packages/astro/astro-jsx.d.ts index fd4632eaedc1..f79c5a36544a 100644 --- a/packages/astro/astro-jsx.d.ts +++ b/packages/astro/astro-jsx.d.ts @@ -499,6 +499,15 @@ declare namespace astroHTML.JSX { KebabCSSDOMProperties & DOMCSSProperties & AllCSSProperties >; + interface CSSProperties extends StyleObject { + /** + * Extend namespace to add properties or an index signature of your own. + * + * For more information, visit: + * https://docs.astro.build/en/guides/typescript/#built-in-html-attributes + */ + } + interface HTMLAttributes extends AriaAttributes, DOMAttributes, AstroBuiltinAttributes { // Standard HTML Attributes accesskey?: string | undefined | null; @@ -547,7 +556,7 @@ declare namespace astroHTML.JSX { popover?: boolean | string | undefined | null; slot?: string | undefined | null; spellcheck?: 'true' | 'false' | boolean | undefined | null; - style?: string | StyleObject | undefined | null; + style?: string | CSSProperties | undefined | null; tabindex?: number | string | undefined | null; title?: string | undefined | null; translate?: 'yes' | 'no' | '' | undefined | null;