Property 'inverted' does not exist on type '{ outline: string; primary: string; }'

[guoapeng]

when I build the project using the cli command npm run build in typescript strict mode. there are several build errors, I fixed some but the serious erros is as the following.

$npm run build

> purple-plasma@2.2.0 build
> astro check && astro build

18:53:57 Types generated 168ms
18:53:57 [check] Getting diagnostics for Astro files in /astro/purple-plasma...
src/components/ui/button.astro:36:5 - error ts(7053): Element implicitly has an 'any' type because expression of type '"inverted" | "outline" | "primary"' can't be used to index type '{ outline: string; primary: string; }'.
  Property 'inverted' does not exist on type '{ outline: string; primary: string; }'.

36     styles[style],
       ~~~~~~~~~~~~~

I looked into the code and found that those two styles consts are defined differently, which is causing issue when building the project. please have a look and advise, thanks in advance!

src/components/ui/link.astro

const styles = { inverted: "bg-white text-black border-2 border-transparent", outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ", primary: "bg-black text-white hover:bg-gray-800 border-2 border-transparent", muted: "bg-gray-100 hover:bg-gray-200 border-2 border-transparent", };

src/components/ui/button.astro const styles = { outline: "border-2 border-black hover:bg-black text-black hover:text-white", primary: "bg-black text-white hover:bg-slate-900 border-2 border-transparent", };

[surjithctly]

Thanks for noticing. Were you able to fix the issue?

Can you open a PR?