Merge branch 'refactor/is-pseudo-class' into feature/material-v9

package-lock.json

@@ -56,6 +56,7 @@
         "postcss-dir-pseudo-class": "^6.0.5",
         "postcss-inline-svg": "^5.0.0",
         "postcss-logical": "^5.0.4",
+        "postcss-pseudo-is": "^0.3.0",
         "preact": "^10.11.2",
         "rimraf": "^3.0.2",
         "sass": "^1.56.0",
@@ -9200,6 +9201,21 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-pseudo-is": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-is/-/postcss-pseudo-is-0.3.0.tgz",
+      "integrity": "sha512-ztGTR/GrExv9PANuMS5NpiB9lhm/9Hql2tZqWh5LVXNFqHZNKSD8cgzbMOfi4Xhdhkj2B/KNpI9bDwFQo+xdOA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-reduce-initial": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz",
@@ -20242,6 +20258,15 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "postcss-pseudo-is": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-is/-/postcss-pseudo-is-0.3.0.tgz",
+      "integrity": "sha512-ztGTR/GrExv9PANuMS5NpiB9lhm/9Hql2tZqWh5LVXNFqHZNKSD8cgzbMOfi4Xhdhkj2B/KNpI9bDwFQo+xdOA==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
     "postcss-reduce-initial": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz",

package.json

@@ -86,6 +86,7 @@
     "postcss-dir-pseudo-class": "^6.0.5",
     "postcss-inline-svg": "^5.0.0",
     "postcss-logical": "^5.0.4",
+    "postcss-pseudo-is": "^0.3.0",
     "preact": "^10.11.2",
     "rimraf": "^3.0.2",
     "sass": "^1.56.0",

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -29,18 +29,18 @@
 
 /// Admonition flavours
 $admonitions: (
-  note:                       pencil-circle $clr-blue-a200,
+  "note":     pencil-circle         $clr-blue-a200,
-  abstract summary tldr:      clipboard-text $clr-light-blue-a400,
+  "abstract": clipboard-text        $clr-light-blue-a400,
-  info todo:                  information $clr-cyan-a700,
+  "info":     information           $clr-cyan-a700,
-  tip hint important:         fire $clr-teal-a700,
+  "tip":      fire                  $clr-teal-a700,
-  success check done:         check $clr-green-a700,
+  "success":  check                 $clr-green-a700,
-  question help faq:          help-circle $clr-light-green-a700,
+  "question": help-circle           $clr-light-green-a700,
-  warning caution attention:  alert $clr-orange-a400,
+  "warning":  alert                 $clr-orange-a400,
-  failure fail missing:       close $clr-red-a200,
+  "failure":  close                 $clr-red-a200,
-  danger error:               lightning-bolt-circle $clr-red-a400,
+  "danger":   lightning-bolt-circle $clr-red-a400,
-  bug:                        shield-bug $clr-pink-a400,
+  "bug":      shield-bug            $clr-pink-a400,
-  example:                    test-tube $clr-deep-purple-a200,
+  "example":  test-tube             $clr-deep-purple-a200,
-  quote cite:                 format-quote-close $clr-grey
+  "quote":    format-quote-close    $clr-grey
 ) !default;
 
 // ----------------------------------------------------------------------------
@@ -49,9 +49,9 @@ $admonitions: (
 
 // Admonition variables
 :root {
-  @each $names, $props in $admonitions {
+  @each $name, $props in $admonitions {
-    --md-admonition-icon--#{nth($names, 1)}:
+    --md-admonition-icon--#{$name}:
-      svg-load("material/#{nth($props, 1)}.svg");
+      svg-load("material/#{list.nth($props, 1)}.svg");
   }
 }
 
@@ -62,8 +62,7 @@ $admonitions: (
 
   // Admonition - note that all styles also apply to details tags, which are
   // rendered as collapsible admonitions with summary elements as titles.
-  .admonition,
+  .admonition {
-  details {
     display: flow-root;
     margin: px2em(20px, 12.8px) 0;
     padding: 0 px2rem(12px);
@@ -87,7 +86,7 @@ $admonitions: (
     }
 
     // Adjust vertical spacing for nested admonitions
-    :is(.admonition, details) {
+    .admonition {
       margin-top: 1em;
       margin-bottom: 1em;
     }
@@ -114,8 +113,7 @@ $admonitions: (
   }
 
   // Admonition title
-  .admonition-title,
+  .admonition-title {
-  summary {
     position: relative;
     margin-block: 0;
     margin-inline: px2rem(-12px);
@@ -160,23 +158,16 @@ $admonitions: (
 // ----------------------------------------------------------------------------
 
 // Define admonition flavors
-@each $names, $props in $admonitions {
+@each $name, $props in $admonitions {
-  $name: list.nth($names, 1);
   $tint: list.nth($props, 2);
 
-  // Admonition flavour selectors
-  $flavours: ();
-  @each $name in $names {
-    $flavours: list.join($flavours, ".#{$name}", $separator: comma);
-  }
-
   // Admonition flavour
-  .md-typeset :is(.admonition, details):is(#{$flavours}) {
+  .md-typeset .admonition.#{$name} {
     border-color: $tint;
   }
 
   // Admonition flavour title
-  .md-typeset :is(#{$flavours}) > :is(.admonition-title, summary) {
+  .md-typeset .#{$name} > .admonition-title {
     background-color: color.adjust($tint, $alpha: -0.9);
 
     // Admonition icon

src/assets/stylesheets/main/extensions/pymdownx/_critic.scss

@@ -27,24 +27,22 @@
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Deletion, addition or comment
-  :is(del, ins, .comment).critic {
-    box-decoration-break: clone;
-  }
-
   // Deletion
   del.critic {
     background-color: var(--md-typeset-del-color);
+    box-decoration-break: clone;
   }
 
   // Addition
   ins.critic {
     background-color: var(--md-typeset-ins-color);
+    box-decoration-break: clone;
   }
 
   // Comment
   .critic.comment {
     color: var(--md-code-hl-comment-color);
+    box-decoration-break: clone;
 
     // Comment opening mark
     &::before {

src/assets/stylesheets/main/extensions/pymdownx/_details.scss

@@ -36,6 +36,8 @@
 
   // Details
   details {
+    @extend .admonition;
+
     display: flow-root;
     padding-top: 0;
     overflow: visible;
@@ -62,6 +64,8 @@
 
   // Details title
   summary {
+    @extend .admonition-title;
+
     display: block;
     min-height: px2rem(20px);
     padding-inline-end: px2rem(36px);

tools/build/transform/index.ts

@@ -24,7 +24,7 @@ import { createHash } from "crypto"
 import { build as esbuild } from "esbuild"
 import * as fs from "fs/promises"
 import * as path from "path"
-import postcss, { Plugin, Rule } from "postcss"
+import postcss from "postcss"
 import {
   EMPTY,
   Observable,
@@ -83,36 +83,6 @@ 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
  * ------------------------------------------------------------------------- */
@@ -141,7 +111,7 @@ export function transformStyle(
         require("autoprefixer"),
         require("postcss-logical"),
         require("postcss-dir-pseudo-class"),
-        plugin,
+        require("postcss-pseudo-is"),
         require("postcss-inline-svg")({
           paths: [
             `${base}/.icons`