web: enable CSS autoprefixing on build

apps/web/package-lock.json

@@ -75,6 +75,7 @@
         "@vitejs/plugin-react": "^4.0.0",
         "@vitejs/plugin-react-refresh": "^1.3.6",
         "@vitejs/plugin-react-swc": "^3.3.2",
+        "autoprefixer": "^10.4.14",
         "buffer": "^6.0.3",
         "chalk": "^4.1.0",
         "dotenv": "^10.0.0",
@@ -4584,6 +4585,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.14",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.5",
+        "caniuse-lite": "^1.0.30001464",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "dev": true,
@@ -4922,7 +4956,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001457",
+      "version": "1.0.30001506",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001506.tgz",
+      "integrity": "sha512-6XNEcpygZMCKaufIcgpQNZNf00GEqc7VQON+9Rd0K1bMYo8xhMZRAo5zpbnbMNizi4YNgIDAFrdykWsvY3H4Hw==",
       "dev": true,
       "funding": [
         {
@@ -4932,9 +4968,12 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/canvas": {
       "version": "2.11.2",
@@ -6016,6 +6055,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "6.5.1",
       "license": "MIT",
@@ -7597,6 +7649,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-url": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -7899,6 +7960,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.1",
       "license": "MIT",

apps/web/package.json

@@ -84,6 +84,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
     "buffer": "^6.0.3",
     "chalk": "^4.1.0",
     "dotenv": "^10.0.0",

apps/web/vite.config.ts

@@ -24,6 +24,7 @@ import envCompatible from "vite-plugin-env-compatible";
 import { VitePWA, ManifestOptions } from "vite-plugin-pwa";
 import path from "path";
 import topLevelAwait from "vite-plugin-top-level-await";
+import autoprefixer from "autoprefixer";
 
 const WEB_MANIFEST: Partial<ManifestOptions> = {
   name: "Notesnook",
@@ -173,6 +174,11 @@ export default defineConfig({
   worker: {
     format: "es"
   },
+  css: {
+    postcss: {
+      plugins: [autoprefixer()]
+    }
+  },
   plugins: [
     ...(isDesktop && process.env.NODE_ENV === "production"
       ? [