docs: fix docs css on production build and upgrade the package to the…

… latest 2.x version

docs/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};
+}

docs/docusaurus.config.js

@@ -1,10 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable max-len */
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
 const lightCodeTheme = require('prism-react-renderer/themes/github')
 const darkCodeTheme = require('prism-react-renderer/themes/dracula')
+const postcssPresetEnv = require('postcss-preset-env')
+
+/** @return {import('@docusaurus/types').Plugin} */
+function customPostCssPlugin() {
+  return {
+    name: 'custom-postcss',
+    configurePostCss(options) {
+      // Append new PostCSS plugins here.
+      options.plugins.push(postcssPresetEnv) // allow newest CSS syntax
+      return options
+    },
+  }
+}
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -29,6 +43,8 @@ const config = {
     locales: ['en'],
   },
 
+  plugins: [customPostCssPlugin],
+
   scripts: [
     // {
     //   src: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',

docs/package.json

@@ -15,8 +15,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/core": "2.4.3",
+    "@docusaurus/preset-classic": "2.4.3",
     "@mdx-js/react": "1.6.22",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
@@ -28,6 +28,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.4.1",
     "@tsconfig/docusaurus": "^1.0.5",
+    "postcss-preset-env": "^9.3.0",
     "typescript": "4.9.5"
   },
   "browserslist": {