EsLint v9 (#154)

* Upgrade ESLint and related configurations to version 9

- Update ESLint to version 9.19.0
- Migrate ESLint configurations to flat config format
- Remove deprecated ESLint config files
- Update package dependencies and configurations
- Simplify ESLint setup across packages
- Remove unnecessary ESLint config blocks from package.json files
- Improved CI caching with Turborepo tasks
- Removed duplicate styles

apps/web/app/(marketing)/blog/_components/cover-image.tsx

@@ -13,7 +13,7 @@ export function CoverImage({ title, src, preloadImage, className }: Props) {
   return (
     <Image
       className={cn(
-        'duration-250 block rounded-xl object-cover' +
+        'block rounded-xl object-cover duration-250' +
           ' transition-all hover:opacity-90',
         {
           className,

apps/web/app/(marketing)/blog/_components/post-header.tsx

@@ -14,7 +14,7 @@ export function PostHeader({ post }: { post: Cms.ContentItem }) {
         <div className={'mx-auto flex max-w-3xl flex-col space-y-4'}>
           <h1
             className={
-              'font-heading text-3xl font-semibold tracking-tighter dark:text-white xl:text-5xl'
+              'font-heading text-3xl font-semibold tracking-tighter xl:text-5xl dark:text-white'
             }
           >
             {title}
@@ -27,7 +27,7 @@ export function PostHeader({ post }: { post: Cms.ContentItem }) {
           </div>
 
           <h2
-            className={'text-base text-muted-foreground xl:text-lg'}
+            className={'text-muted-foreground text-base xl:text-lg'}
             dangerouslySetInnerHTML={{ __html: description ?? '' }}
           ></h2>
         </div>

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -63,7 +63,9 @@ async function DocumentationPage({ params }: DocumentationPageProps) {
       <div className={'flex overflow-y-hidden'}>
         <article className={cn('gap-y-12 overflow-y-auto px-6')}>
           <section className={'flex flex-col gap-y-2.5'}>
-            <h1 className={'text-3xl font-semibold text-foreground'}>{page.title}</h1>
+            <h1 className={'text-foreground text-3xl font-semibold'}>
+              {page.title}
+            </h1>
 
             <h2 className={'text-muted-foreground text-lg'}>{description}</h2>
           </section>

apps/web/app/(marketing)/docs/_components/docs-page-link.tsx

@@ -18,7 +18,7 @@ export function DocsPageLink({
   return (
     <Link
       className={cn(
-        `flex w-full items-center space-x-8 rounded-xl p-6 font-medium text-current ring-2 ring-muted transition-all hover:ring-primary`,
+        `ring-muted hover:ring-primary flex w-full items-center space-x-8 rounded-xl p-6 font-medium text-current ring-2 transition-all`,
         {
           'justify-start': before,
           'justify-end self-end': after,
@@ -30,7 +30,7 @@ export function DocsPageLink({
 
       <span className={'flex flex-col space-y-1.5'}>
         <span
-          className={'text-xs font-semibold uppercase text-muted-foreground'}
+          className={'text-muted-foreground text-xs font-semibold uppercase'}
         >
           {before ? `Previous` : ``}
           {after ? `Next` : ``}

apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx

@@ -54,8 +54,8 @@ export function FloatingDocumentationNavigation(
       <If condition={isVisible}>
         <div
           className={
-            'fixed left-0 top-0 z-10 h-screen w-full p-4' +
-            ' flex flex-col space-y-4 overflow-auto bg-white dark:bg-background'
+            'fixed top-0 left-0 z-10 h-screen w-full p-4' +
+            ' dark:bg-background flex flex-col space-y-4 overflow-auto bg-white'
           }
         >
           {props.children}
@@ -63,7 +63,7 @@ export function FloatingDocumentationNavigation(
       </If>
 
       <Button
-        className={'fixed bottom-5 right-5 z-10 h-16 w-16 rounded-full'}
+        className={'fixed right-5 bottom-5 z-10 h-16 w-16 rounded-full'}
         onClick={onClick}
       >
         <Menu className={'h-8'} />

apps/web/app/home/[account]/billing/return/page.tsx

@@ -36,7 +36,7 @@ async function ReturnCheckoutSessionPage({ searchParams }: SessionPageProps) {
 
   return (
     <>
-      <div className={'fixed left-0 top-48 z-50 mx-auto w-full'}>
+      <div className={'fixed top-48 left-0 z-50 mx-auto w-full'}>
         <BillingSessionStatus
           redirectPath={'../billing'}
           customerEmail={customerEmail ?? ''}
@@ -54,7 +54,7 @@ function BlurryBackdrop() {
   return (
     <div
       className={
-        'fixed left-0 top-0 w-full bg-background/30 backdrop-blur-sm' +
+        'bg-background/30 fixed top-0 left-0 w-full backdrop-blur-sm' +
         ' !m-0 h-full'
       }
     />

apps/web/app/join/page.tsx

@@ -137,7 +137,7 @@ function InviteNotFoundOrExpired() {
         <Trans i18nKey={'teams:inviteNotFoundOrExpired'} />
       </Heading>
 
-      <p className={'text-sm text-muted-foreground'}>
+      <p className={'text-muted-foreground text-sm'}>
         <Trans i18nKey={'teams:inviteNotFoundOrExpiredDescription'} />
       </p>
 

apps/web/eslint.config.mjs

@@ -0,0 +1,4 @@
+import eslintConfigApps from '@kit/eslint-config/apps.js';
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default [...eslintConfigBase, ...eslintConfigApps];

apps/web/package.json

@@ -10,7 +10,8 @@
     "build:test": "NODE_ENV=test pnpm with-env:test next build",
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev --turbo | pino-pretty -c",
-    "lint": "next lint && eslint .",
+    "lint": "eslint .",
+    "lint:fix": "next lint --fix",
     "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
     "start": "pnpm with-env next start",
     "start:test": "NODE_ENV=test pnpm with-env:test next start",
@@ -75,17 +76,16 @@
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@next/bundle-analyzer": "15.1.6",
+    "@tailwindcss/postcss": "^4.0.4",
     "@types/mdx": "^2.0.13",
     "@types/node": "^22.13.0",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "autoprefixer": "^10.4.20",
-    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+    "babel-plugin-react-compiler": "beta",
     "dotenv-cli": "^8.0.0",
-    "eslint": "^8.57.0",
     "import-in-the-middle": "1.12.0",
     "pino-pretty": "^13.0.0",
     "prettier": "^3.4.2",

apps/web/postcss.config.cjs

@@ -1,2 +0,0 @@
-// @ts-expect-error - No types for postcss
-module.exports = require('@kit/tailwind-config/postcss');

apps/web/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

apps/web/styles/globals.css

@@ -25,168 +25,6 @@
 @source "../../../packages/cms/*/src/**/*.{ts,tsx}";
 @source "../{app,components,config,lib}/**/*.{ts,tsx}";
 
-@theme {
-  --font-cal: var(--font-cal);
-  --font-sans: -apple-system, var(--font-sans);
-  --font-heading: var(--font-heading);
-
-  --animate-fade-up: fade-up 0.5s;
-  --animate-fade-down: fade-down 0.5s;
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes fade-up {
-    0% {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    80% {
-      opacity: 0.6;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-  @keyframes fade-down {
-    0% {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    80% {
-      opacity: 0.6;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@theme {
-  --font-cal: var(--font-cal);
-  --font-sans: -apple-system, var(--font-sans);
-  --font-heading: var(--font-heading);
-
-  --animate-fade-up: fade-up 0.5s;
-  --animate-fade-down: fade-down 0.5s;
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes fade-up {
-    0% {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    80% {
-      opacity: 0.6;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-  @keyframes fade-down {
-    0% {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    80% {
-      opacity: 0.6;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
 /* variants - update the below if you add a new variant */
 @variant dark (&:where(.dark, .dark *));
 

apps/web/styles/theme.css

@@ -49,7 +49,8 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
 
-  --font-heading: var(--font-sans);
+  --font-sans: -apple-system, var(--font-sans);
+  --font-heading: var(--font-heading);
 
   --color-sidebar: var(--sidebar-background);
   --color-sidebar-foreground: var(--sidebar-foreground);
@@ -60,6 +61,8 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  --animate-fade-up: fade-up 0.5s;
+  --animate-fade-down: fade-down 0.5s;
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
 
@@ -83,11 +86,6 @@
     }
   }
 
-  --animate-fade-up: fade-up 0.5s;
-  --animate-fade-down: fade-down 0.5s;
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
   @keyframes fade-up {
     0% {
       opacity: 0;
@@ -101,6 +99,7 @@
       transform: translateY(0px);
     }
   }
+
   @keyframes fade-down {
     0% {
       opacity: 0;
@@ -114,20 +113,4 @@
       transform: translateY(0px);
     }
   }
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
 }

apps/web/tsconfig.json

@@ -20,7 +20,6 @@
     ".next/types/**/*.ts",
     "*.ts",
     "*.tsx",
-    "*.mjs",
     "./config/**/*.ts",
     "components/**/*",
     "lib/**/*.ts",