fix: autoprefixing, css import order, remove lightningcss (#1741)

package.json

@@ -136,6 +136,7 @@
     "@types/ua-parser-js": "^0.7.39",
     "@vitejs/plugin-legacy": "^5.4.3",
     "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
     "babel-plugin-react-compiler": "0.0.0-experimental-19c7e06-20241113",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
@@ -144,8 +145,8 @@
     "eslint-plugin-react-hooks": "0.0.0-experimental-b01722d5-20241114",
     "eslint-plugin-vitest": "^0.5.4",
     "jsdom": "^25.0.1",
-    "lightningcss": "^1.28.1",
     "mdast-util-lemmy-spoiler": "^2.0.0",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "pwa-asset-generator": "^6.4.0",
     "release-it": "^17.10.0",

postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    autoprefixer: {},
+  },
+};

src/core/App.tsx

@@ -1,33 +1,3 @@
-import { IonApp, setupIonicReact } from "@ionic/react";
-import { NavModes } from "capacitor-android-nav-mode";
-import { ErrorBoundary } from "react-error-boundary";
-
-import { AppContextProvider } from "#/features/auth/AppContext";
-import BeforeInstallPromptProvider from "#/features/pwa/BeforeInstallPromptProvider";
-import {
-  getAndroidNavMode,
-  getDeviceMode,
-  isInstalled,
-} from "#/helpers/device";
-import { OptimizedRouterProvider } from "#/helpers/useOptimizedIonRouter";
-import Router from "#/routes/common/Router";
-import { UpdateContextProvider } from "#/routes/pages/settings/update/UpdateContext";
-import ConfigProvider from "#/services/app";
-import { StoreProvider } from "#/store";
-
-import AppCrash from "./AppCrash";
-import GlobalStyles from "./GlobalStyles";
-import { TabContextProvider } from "./TabContext";
-
-// preserve lexical order
-import TabbedRoutes from "#/routes/TabbedRoutes";
-
-import Auth from "./Auth";
-import Listeners from "./listeners";
-
-// Setup global app lifecycle listeners
-import "./listeners";
-
 // Core CSS required for Ionic components to work properly
 import "@ionic/react/css/core.css";
 
@@ -61,6 +31,37 @@ import "./syntaxHighlights.css";
 // Global CSS overrides
 import "./globalCssOverrides.css";
 
+// Rest of imports after css
+import { IonApp, setupIonicReact } from "@ionic/react";
+import { NavModes } from "capacitor-android-nav-mode";
+import { ErrorBoundary } from "react-error-boundary";
+
+import { AppContextProvider } from "#/features/auth/AppContext";
+import BeforeInstallPromptProvider from "#/features/pwa/BeforeInstallPromptProvider";
+import {
+  getAndroidNavMode,
+  getDeviceMode,
+  isInstalled,
+} from "#/helpers/device";
+import { OptimizedRouterProvider } from "#/helpers/useOptimizedIonRouter";
+import Router from "#/routes/common/Router";
+import { UpdateContextProvider } from "#/routes/pages/settings/update/UpdateContext";
+import ConfigProvider from "#/services/app";
+import { StoreProvider } from "#/store";
+
+import AppCrash from "./AppCrash";
+import GlobalStyles from "./GlobalStyles";
+import { TabContextProvider } from "./TabContext";
+
+// preserve lexical order
+import TabbedRoutes from "#/routes/TabbedRoutes";
+
+import Auth from "./Auth";
+import Listeners from "./listeners";
+
+// Setup global app lifecycle listeners
+import "./listeners";
+
 // index.tsx ensures android nav mode resolves before app is rendered
 (async () => {
   let navMode;

vite.config.ts

@@ -52,14 +52,10 @@ export default defineConfig({
     "APP_VERSION",
     "APP_GIT_REF",
   ],
-  css: {
-    transformer: "lightningcss",
-  },
   // TODO: Outdated clients trying to access stale codesplit js chucks
   // break. This breaks iOS transitions.
   // Put everything into one chunk for now.
   build: {
-    cssMinify: "lightningcss",
     chunkSizeWarningLimit: 5_000,
     rollupOptions: {
       output: {
@@ -77,6 +73,9 @@ export default defineConfig({
       },
     },
   },
+  esbuild: {
+    logOverride: { "unsupported-css-nesting": "silent" },
+  },
   test: {
     exclude: ["**/e2e/**", "**/node_modules/**"],
     globals: true,