diff --git a/package.json b/package.json index bbdc3192a0..d12cd0fe72 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f207ab636..f23754d83a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -275,6 +275,9 @@ importers: '@vitejs/plugin-react': specifier: ^4.3.3 version: 4.3.3(vite@5.4.11(@types/node@22.9.0)(less@4.2.0)(lightningcss@1.28.1)(sass@1.81.0)(stylus@0.62.0)(terser@5.36.0)) + autoprefixer: + specifier: ^10.4.20 + version: 10.4.20(postcss@8.4.49) babel-plugin-react-compiler: specifier: 0.0.0-experimental-19c7e06-20241113 version: 0.0.0-experimental-19c7e06-20241113 @@ -299,12 +302,12 @@ importers: jsdom: specifier: ^25.0.1 version: 25.0.1 - lightningcss: - specifier: ^1.28.1 - version: 1.28.1 mdast-util-lemmy-spoiler: specifier: ^2.0.0 version: 2.0.0 + postcss: + specifier: ^8.4.49 + version: 8.4.49 prettier: specifier: ^3.3.3 version: 3.3.3 @@ -2135,6 +2138,13 @@ packages: atomically@2.0.3: resolution: {integrity: sha512-kU6FmrwZ3Lx7/7y3hPS5QnbJfaohcIul5fGqf7ok+4KklIEk9tJ0C2IQPdacSbVUWv6zVHXEBWoWd6NrVMT7Cw==} + autoprefixer@10.4.20: + resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + available-typed-arrays@1.0.7: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} @@ -3187,6 +3197,9 @@ packages: formidable@3.5.2: resolution: {integrity: sha512-Jqc1btCy3QzRbJaICGwKcBfGWuLADRerLzDqi2NwSt/UkXLsHJw2TVResiaoBufHVHy9aSgClOHCeJsSsFLTbg==} + fraction.js@4.3.7: + resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} @@ -4592,6 +4605,10 @@ packages: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + normalize-range@0.1.2: + resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} + engines: {node: '>=0.10.0'} + npm-run-path@4.0.1: resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==} engines: {node: '>=8'} @@ -8610,6 +8627,16 @@ snapshots: stubborn-fs: 1.2.5 when-exit: 2.1.3 + autoprefixer@10.4.20(postcss@8.4.49): + dependencies: + browserslist: 4.24.2 + caniuse-lite: 1.0.30001680 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.1.1 + postcss: 8.4.49 + postcss-value-parser: 4.2.0 + available-typed-arrays@1.0.7: dependencies: possible-typed-array-names: 1.0.0 @@ -9258,7 +9285,8 @@ snapshots: dequal@2.0.3: {} - detect-libc@1.0.3: {} + detect-libc@1.0.3: + optional: true devlop@1.1.0: dependencies: @@ -9822,6 +9850,8 @@ snapshots: hexoid: 2.0.0 once: 1.4.0 + fraction.js@4.3.7: {} + fs-constants@1.0.0: {} fs-extra@11.2.0: @@ -10803,6 +10833,7 @@ snapshots: lightningcss-linux-x64-musl: 1.28.1 lightningcss-win32-arm64-msvc: 1.28.1 lightningcss-win32-x64-msvc: 1.28.1 + optional: true lines-and-columns@1.2.4: {} @@ -11460,6 +11491,8 @@ snapshots: normalize-path@3.0.0: {} + normalize-range@0.1.2: {} + npm-run-path@4.0.1: dependencies: path-key: 3.1.1 diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000000..7738160ab9 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +export default { + plugins: { + autoprefixer: {}, + }, +}; diff --git a/src/core/App.tsx b/src/core/App.tsx index 7c23be1da4..2fa032fa8f 100644 --- a/src/core/App.tsx +++ b/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; diff --git a/vite.config.ts b/vite.config.ts index 6bdbbc446a..72442444d0 100644 --- a/vite.config.ts +++ b/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,