mirror of
https://github.com/element-hq/matrix-authentication-service.git
synced 2026-06-05 23:13:01 +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.
22 lines
998 B
CSS
22 lines
998 B
CSS
/* Copyright 2024, 2025 New Vector Ltd.
|
|
* Copyright 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.
|
|
*/
|
|
|
|
/* Third-party styles. Kept out of shared.css because @tailwindcss/vite's
|
|
* @import bundler drops the nested `@import url(...) layer(cpd-base) screen`
|
|
* declarations inside compound-design-tokens.css. Loading them from a CSS file
|
|
* with no Tailwind directives lets Vite resolve them through its normal
|
|
* Lightning-CSS pipeline, which preserves the layer and media qualifiers. */
|
|
|
|
@import "@fontsource/inter/400.css";
|
|
@import "@fontsource/inter/500.css";
|
|
@import "@fontsource/inter/600.css";
|
|
@import "@fontsource/inter/700.css";
|
|
@import "@fontsource/inconsolata/400.css";
|
|
@import "@fontsource/inconsolata/700.css";
|
|
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
|
|
@import "@vector-im/compound-web/dist/style.css";
|