chore: refactor tsconfigs

- use base configs from @tsconfig;
- use the strictest flags.

lib/panda/remove-unused-css.ts

@@ -58,7 +58,7 @@ export default function removeUnusedCSS(css: string): string {
     if (!decl.value.includes('var(')) return
 
     for (const match of decl.value.matchAll(varRegex)) {
-      const variable = match.groups?.name.trim()
+      const variable = match.groups?.['name']?.trim()
       if (variable == null || variable === '') continue
 
       if (isVar) {
@@ -77,7 +77,11 @@ export default function removeUnusedCSS(css: string): string {
       const decl = node
       const animationName = decl.prop === 'animation' ? decl.value.split(' ')[0] : decl.value
 
-      if ((decl.prop === 'animation' || decl.prop === 'animation-name') && keyframes.has(animationName)) {
+      if (
+        (decl.prop === 'animation' || decl.prop === 'animation-name') &&
+        animationName != null &&
+        keyframes.has(animationName)
+      ) {
         // Mark the keyframe as used
         keyframes.set(animationName, true)
       }

package.json

@@ -42,6 +42,8 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/node20": "^20.1.4",
+    "@tsconfig/recommended": "^1.0.7",
+    "@tsconfig/strictest": "^2.0.5",
     "@types/chrome": "^0.0.277",
     "@types/node": "^20.16.11",
     "@vitest/coverage-v8": "^2.1.2",

panda.config.ts

@@ -50,6 +50,7 @@ export default defineConfig({
   hooks: {
     'cssgen:done': ({ artifact, content }) => {
       if (artifact === 'styles.css') return removeUnusedCSS(content)
+      return content
     },
   },
 })

postcss.config.mjs

@@ -1,6 +1,5 @@
 /**
  * @see https://github.com/postcss/postcss
- * @type {import('postcss-load-config').Config}
  */
 export default {
   plugins: {

src/components/Modal/index.tsx

@@ -13,7 +13,7 @@ interface ModalProps {
   icon?: JSX.Element
   title: JSX.Element
   children?: JSX.Element
-  onClose?: () => void
+  onClose?: (() => void) | undefined
 }
 
 export default function Modal(props: ModalProps): JSX.Element {

src/components/SettingsDialog/index.tsx

@@ -12,9 +12,10 @@ export interface SettingsDialogProps {
 
 export default function SettingsDialog(props: SettingsDialogProps): JSX.Element {
   const handleSubmit = async (values: Settings): Promise<void> => await props.onSave?.(values)
+  const handleClose = (): void => props.onClose?.()
 
   return (
-    <Modal icon={<SettingsIcon />} title="Settings" onClose={props.onClose}>
+    <Modal icon={<SettingsIcon />} title="Settings" onClose={handleClose}>
       <SettingsForm initialValues={props.settings} onSubmit={handleSubmit} />
     </Modal>
   )

src/components/TimeMilestones/index.tsx

@@ -10,7 +10,7 @@ import createTimeMilestones from './hooks/createTimeMilestones'
 import * as s from './styles'
 
 export interface TimeMilestonesProps {
-  birthDate?: ISODate
+  birthDate?: ISODate | undefined
   progressStyle: MilestoneProgressStyle
 }
 

src/hooks/createSubscription.ts

@@ -7,7 +7,7 @@ type Identity<T> = (previous: T, next: T) => boolean
 interface Subscription<T> {
   subscribe: (fn: () => void) => Unsubscribe
   getCurrentValue: () => T
-  identity?: Identity<T>
+  identity?: Identity<T> | undefined
 }
 
 const DefaultIdentity = <T>(a: T, b: T): boolean => Object.is(a, b)

src/utils/as-getters.ts

@@ -6,10 +6,8 @@ type Getters<T extends AccesorsMap> = { [key in keyof T]: ReturnType<T[key]> }
 export default function asGetters<T extends AccesorsMap>(map: T): Getters<T> {
   const getters = Object.create(null) as Partial<Getters<T>>
 
-  for (const name in map) {
-    Object.defineProperty(getters, name, {
-      get: map[name],
-    })
+  for (const [name, get] of Object.entries(map)) {
+    Object.defineProperty(getters, name, { get })
   }
 
   return getters as Getters<T>

tsconfig.app.json

@@ -1,23 +1,24 @@
 {
+  "extends": ["@tsconfig/recommended", "@tsconfig/strictest"],
   "compilerOptions": {
+    "checkJs": false,
     "allowJs": true,
     "baseUrl": ".",
     "composite": true,
-    "esModuleInterop": true,
-    "experimentalDecorators": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js",
     "lib": ["esnext", "dom", "dom.iterable"],
     "module": "esnext",
+    "target": "esnext",
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
-    "noEmit": true,
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "target": "esnext",
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "noEmit": true,
     "verbatimModuleSyntax": true,
+
     "paths": {
       "@/*": ["src/*"],
       "styled-system": ["styled-system"],

tsconfig.node.json

@@ -1,17 +1,11 @@
 {
-  "extends": "@tsconfig/node20",
+  "extends": ["@tsconfig/recommended", "@tsconfig/strictest", "@tsconfig/node20"],
   "compilerOptions": {
+    "checkJs": true,
     "allowJs": true,
     "baseUrl": ".",
     "composite": true,
-    "isolatedModules": true,
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
     "noEmit": true,
-    "strict": true,
-    "target": "ES2022",
     "tsBuildInfoFile": ".tmp/node.tsbuildinfo"
   },
   "include": [