scss, module, nextjs, hydration fixes

apps/login/next.config.mjs

@@ -36,7 +36,6 @@ const secureHeaders = [
 
 const nextConfig = {
   reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
-  swcMinify: true,
   experimental: {
     dynamicIO: true,
   },

apps/login/package.json

@@ -88,11 +88,5 @@
     "ts-proto": "^2.2.7",
     "typescript": "^5.6.3",
     "zitadel-tailwind-config": "workspace:*"
-  },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "npm:types-react@19.0.0-rc.1",
-      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
-    }
   }
 }

apps/login/src/components/input.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import { clsx } from "clsx";
 import {
@@ -64,6 +65,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           {label} {required && "*"}
         </span>
         <input
+          suppressHydrationWarning
           ref={ref}
           className={styles(!!error, !!disabled)}
           defaultValue={defaultValue}

apps/login/src/styles/globals.scss

@@ -1,5 +1,5 @@
 // include styles from the ui package
-@import "./vars.scss";
+@use "./vars.scss";
 
 @tailwind base;
 @tailwind components;

apps/login/tailwind.config.mjs

@@ -1,4 +1,4 @@
-const sharedConfig = require("zitadel-tailwind-config/tailwind.config.mjs");
+import sharedConfig from "zitadel-tailwind-config/tailwind.config.mjs";
 
 let colors = {
   background: { light: { contrast: {} }, dark: { contrast: {} } },

package.json

@@ -27,7 +27,9 @@
   },
   "pnpm": {
     "overrides": {
-      "@typescript-eslint/parser": "^7.9.0"
+      "@typescript-eslint/parser": "^7.9.0",
+      "@types/react": "npm:types-react@19.0.0-rc.1",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
     }
   },
   "devDependencies": {

packages/zitadel-tailwind-config/tailwind.config.mjs

@@ -1,12 +1,8 @@
-const colors = require("tailwindcss/colors");
+import colors from "tailwindcss/colors";
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./page/**/*.{js,ts,jsx,tsx}",
-    "./ui/**/*.{js,ts,jsx,tsx}",
-  ],
+export default {
+  content: ["./app/**/*.{js,ts,jsx,tsx}", "./page/**/*.{js,ts,jsx,tsx}", "./ui/**/*.{js,ts,jsx,tsx}"],
   future: {
     hoverOnlyWhenSupported: true,
   },
@@ -48,10 +44,10 @@ module.exports = {
       },
       backgroundImage: ({ theme }) => ({
         "dark-vc-border-gradient": `radial-gradient(at left top, ${theme(
-          "colors.gray.800"
+          "colors.gray.800",
         )}, 50px, ${theme("colors.gray.800")} 50%)`,
         "vc-border-gradient": `radial-gradient(at left top, ${theme(
-          "colors.gray.200"
+          "colors.gray.200",
         )}, 50px, ${theme("colors.gray.300")} 50%)`,
       }),
       keyframes: ({ theme }) => ({

pnpm-lock.yaml

@@ -6,6 +6,8 @@ settings:
 
 overrides:
   '@typescript-eslint/parser': ^7.9.0
+  '@types/react': npm:types-react@19.0.0-rc.1
+  '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
 
 importers:
 
@@ -1508,8 +1510,8 @@ packages:
     engines: {node: '>=18'}
     peerDependencies:
       '@testing-library/dom': ^10.0.0
-      '@types/react': ^18.0.0
-      '@types/react-dom': ^18.0.0
+      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
       react: ^18.0.0
       react-dom: ^18.0.0
     peerDependenciesMeta: