refactor: Update firebaseui-styles package structure and build configuration

Author: exaby73

packages/firebaseui-react/src/styles.css

@@ -1,2 +1,2 @@
 @import "tailwindcss";
-@import "@firebase-ui/styles/styles.css";
+@import "@firebase-ui/styles/dist/styles.css";

packages/firebaseui-styles/package.json

@@ -4,6 +4,16 @@
   "private": true,
   "type": "module",
   "files": [
-    "styles.css"
-  ]
+    "dist/styles.css",
+    "dist/dist.css",
+    "dist/auth.css"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "vite": "^5.0.0"
+  }
 }

packages/firebaseui-styles/auth.css renamed to packages/firebaseui-styles/src/auth.css

@@ -0,0 +1,33 @@
+@import "tailwindcss";
+
+@theme {
+  /* Colors */
+  --fui-primary: oklch(0.371 0 0);
+  --fui-primary-hover: oklch(0.269 0 0);
+  --fui-secondary: oklch(0.708 0 0);
+  --fui-background: oklch(0.985 0 0);
+  --fui-surface: oklch(0.97 0 0);
+  --fui-text: oklch(0.205 0 0);
+  --fui-text-secondary: oklch(0.439 0 0);
+  --fui-border: oklch(0.922 0 0);
+  --fui-error: oklch(0.269 0 0);
+
+  /* Spacing */
+  --fui-spacing-xs: 0.5rem;
+  --fui-spacing-sm: 0.75rem;
+  --fui-spacing-md: 1rem;
+  --fui-spacing-lg: 1.5rem;
+  --fui-spacing-xl: 2rem;
+
+  /* Border radius */
+  --fui-radius-sm: 0.25rem;
+  --fui-radius-md: 0.5rem;
+  --fui-radius-lg: 0.75rem;
+
+  /* Shadows */
+  --fui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --fui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --fui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+@import "./auth.css";

packages/firebaseui-styles/src/styles.css

@@ -1,4 +1,4 @@
-@import "./auth.css";
+@import "tailwindcss";
 
 @theme {
   /* Colors */
@@ -28,4 +28,6 @@
   --fui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --fui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --fui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-}
+}
+
+@import "./auth.css";

packages/firebaseui-styles/styles.css

@@ -0,0 +1,34 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tailwindcss from "@tailwindcss/vite";
+import fs from "fs";
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    {
+      name: "copy-styles",
+      writeBundle() {
+        fs.copyFileSync(
+          resolve(__dirname, "src/styles.css"),
+          resolve(__dirname, "dist/styles.css")
+        );
+        fs.copyFileSync(
+          resolve(__dirname, "src/auth.css"),
+          resolve(__dirname, "dist/auth.css")
+        );
+      },
+    },
+  ],
+  build: {
+    rollupOptions: {
+      input: resolve(__dirname, "src/styles.css"),
+      output: {
+        assetFileNames: (assetInfo) =>
+          assetInfo.name === "styles.css"
+            ? "dist.css"
+            : assetInfo.name || "unknown.css",
+      },
+    },
+  },
+});