docs: polyfill css :has with postcss plugin

site/docusaurus.config.ts

@@ -173,7 +173,11 @@ const config: Config = {
               })
             ]
           };
-        }
+        },
+        configurePostCss(postcssOptions) {
+          postcssOptions.plugins.push(require('css-has-pseudo'));
+          return postcssOptions;
+        },
       };
     },
     [
@@ -307,7 +311,11 @@ const config: Config = {
        */
       playgroundPosition: 'bottom'
     }
-  } as ClassicPresetThemeConfig
+  } as ClassicPresetThemeConfig,
+
+  clientModules: [
+    './src/polyfills/css-has.js'
+  ]
 };
 
 export default config;

site/package.json

@@ -36,6 +36,7 @@
     "@docusaurus/module-type-aliases": "3.0.0",
     "@docusaurus/tsconfig": "^3.0.0",
     "@types/react": "^18.2.29",
+    "css-has-pseudo": "^6.0.3",
     "micromark-extension-mdxjs": "^3.0.0",
     "patch-package": "^8.0.0",
     "ts-loader": "^9.5.1",

site/src/pages/index.tsx

@@ -5,6 +5,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
+
 import styles from './index.module.css';
 
 function HomepageHeader() {

site/src/polyfills/css-has.js

@@ -0,0 +1,5 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+if (ExecutionEnvironment.canUseDOM) {
+  require('css-has-pseudo/browser').cssHasPseudo(document);
+}