mirror of
https://github.com/element-hq/matrix-authentication-service.git
synced 2026-06-06 10:21:37 +00:00
Quentin Gliech
8e65bf198e
Tailwind 4 ships its own Vite plugin and no longer needs PostCSS plumbing. Drop postcss/autoprefixer/postcss-import/postcss-nesting and the .postcssrc.json, wire @tailwindcss/vite into vite.config.ts, replace the @tailwind directives with @import "tailwindcss", and convert the JS tailwind.config.cjs theme into a CSS @theme block in shared.css. An @source directive points back at the SSR templates so the Jinja-rendered HTML in templates/ still gets scanned for utility classes. The third-party CSS (compound design tokens, compound-web, fontsource) moves into a new vendor.css entrypoint, loaded ahead of shared.css from main.tsx, storybook, and base.html. Tailwind v4's @import bundler silently drops the nested `@import url(...) layer(cpd-base) screen` statements inside the compound-design-tokens.css barrel, so we have to keep those imports out of any file that contains Tailwind directives and let Vite's normal CSS pipeline resolve them instead.
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
// Copyright 2024, 2025 New Vector Ltd.
|
|
// Copyright 2022-2024 The Matrix.org Foundation C.I.C.
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
// Please see LICENSE files in the repository root for full details.
|
|
|
|
import { QueryClientProvider } from "@tanstack/react-query";
|
|
import { RouterProvider } from "@tanstack/react-router";
|
|
import { TooltipProvider } from "@vector-im/compound-web";
|
|
import { StrictMode, Suspense } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { I18nextProvider } from "react-i18next";
|
|
import ErrorBoundary from "../components/ErrorBoundary";
|
|
import LoadingScreen from "../components/LoadingScreen";
|
|
import { queryClient } from "../graphql";
|
|
import i18n, { setupI18n } from "../i18n";
|
|
import { router } from "../router";
|
|
import "./vendor.css";
|
|
import "./shared.css";
|
|
|
|
setupI18n();
|
|
|
|
createRoot(document.getElementById("root") as HTMLElement).render(
|
|
<StrictMode>
|
|
<QueryClientProvider client={queryClient}>
|
|
<ErrorBoundary>
|
|
<TooltipProvider>
|
|
<Suspense fallback={<LoadingScreen />}>
|
|
<I18nextProvider i18n={i18n}>
|
|
<RouterProvider router={router} context={{ queryClient }} />
|
|
</I18nextProvider>
|
|
</Suspense>
|
|
</TooltipProvider>
|
|
</ErrorBoundary>
|
|
</QueryClientProvider>
|
|
</StrictMode>,
|
|
);
|