Polyfilled :is() and added back resize observer polyfill

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.bb3983ee.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.4aa5fe16.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">
@@ -213,7 +213,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.289a2a4b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.a59c8768.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

material/overrides/main.html

@@ -16,5 +16,5 @@
 {% endblock %}
 {% block scripts %}
   {{ super() }}
-  <script src="{{ 'overrides/assets/javascripts/bundle.337c27cf.min.js' | url }}"></script>
+  <script src="{{ 'overrides/assets/javascripts/bundle.83314047.min.js' | url }}"></script>
 {% endblock %}

package-lock.json

@@ -7467,6 +7467,11 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",

package.json

@@ -44,6 +44,7 @@
     "fuzzaldrin-plus": "^0.6.0",
     "lunr": "^2.3.9",
     "lunr-languages": "^1.9.0",
+    "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^7.5.1"
   },
   "devDependencies": {

src/assets/javascripts/browser/element/size/_/index.ts

@@ -20,6 +20,7 @@
  * IN THE SOFTWARE.
  */
 
+import ResizeObserver from "resize-observer-polyfill"
 import {
   NEVER,
   Observable,

tools/build/transform/index.ts

@@ -23,7 +23,7 @@
 import { createHash } from "crypto"
 import { build as esbuild } from "esbuild"
 import * as path from "path"
-import postcss from "postcss"
+import postcss, { Plugin, Rule } from "postcss"
 import {
   EMPTY,
   Observable,
@@ -82,6 +82,36 @@ function digest(file: string, data: string): string {
   }
 }
 
+/**
+ * Custom PostCSS plugin to polyfill newer CSS features
+ *
+ * @returns PostCSS plugin
+ */
+function plugin(): Plugin {
+  const rules = new Set<Rule>()
+  return {
+    postcssPlugin: 'mkdocs-material',
+    Root (root) {
+
+      /* Fallback for :is() */
+      root.walkRules(/:is\(/, rule => {
+        if (!rules.has(rule)) {
+          rules.add(rule)
+
+          /* Add prefixed versions */
+          for (const pseudo of [":-webkit-any(", ":-moz-any("])
+            rule.cloneBefore({
+              selectors: rule.selectors.map(selector => (
+                selector.replace(/:is\(/g, pseudo)
+              ))
+            })
+        }
+      })
+    }
+  }
+}
+plugin.postcss = true
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -110,6 +140,7 @@ export function transformStyle(
         require("autoprefixer"),
         require("postcss-logical"),
         require("postcss-dir-pseudo-class"),
+        plugin,
         require("postcss-inline-svg")({
           paths: [
             `${base}/.icons`