diff --git a/package-lock.json b/package-lock.json index ed16f5302..ef8780ed7 100644 --- a/package-lock.json +++ b/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.55.0", @@ -9105,6 +9106,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", @@ -19930,6 +19946,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", diff --git a/package.json b/package.json index af580381d..ab21ab02e 100644 --- a/package.json +++ b/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.55.0", diff --git a/src/assets/stylesheets/main/extensions/markdown/_admonition.scss b/src/assets/stylesheets/main/extensions/markdown/_admonition.scss index a5dd94f9f..7c18d6edc 100644 --- a/src/assets/stylesheets/main/extensions/markdown/_admonition.scss +++ b/src/assets/stylesheets/main/extensions/markdown/_admonition.scss @@ -29,18 +29,18 @@ /// Admonition flavours $admonitions: ( - note: pencil-circle $clr-blue-a200, - abstract summary tldr: clipboard-text $clr-light-blue-a400, - info todo: information $clr-cyan-a700, - tip hint important: fire $clr-teal-a700, - success check done: check $clr-green-a700, - question help faq: help-circle $clr-light-green-a700, - warning caution attention: alert $clr-orange-a400, - failure fail missing: close $clr-red-a200, - danger error: lightning-bolt-circle $clr-red-a400, - bug: shield-bug $clr-pink-a400, - example: test-tube $clr-deep-purple-a200, - quote cite: format-quote-close $clr-grey + "note": pencil-circle $clr-blue-a200, + "abstract": clipboard-text $clr-light-blue-a400, + "info": information $clr-cyan-a700, + "tip": fire $clr-teal-a700, + "success": check $clr-green-a700, + "question": help-circle $clr-light-green-a700, + "warning": alert $clr-orange-a400, + "failure": close $clr-red-a200, + "danger": lightning-bolt-circle $clr-red-a400, + "bug": shield-bug $clr-pink-a400, + "example": test-tube $clr-deep-purple-a200, + "quote": format-quote-close $clr-grey ) !default; // ---------------------------------------------------------------------------- @@ -49,9 +49,9 @@ $admonitions: ( // Admonition variables :root { - @each $names, $props in $admonitions { - --md-admonition-icon--#{nth($names, 1)}: - svg-load("material/#{nth($props, 1)}.svg"); + @each $name, $props in $admonitions { + --md-admonition-icon--#{$name}: + 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, - details { + .admonition { 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, - summary { + .admonition-title { position: relative; margin-block: 0; margin-inline: px2rem(-12px); @@ -160,23 +158,16 @@ $admonitions: ( // ---------------------------------------------------------------------------- // Define admonition flavors -@each $names, $props in $admonitions { - $name: list.nth($names, 1); +@each $name, $props in $admonitions { $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 diff --git a/src/assets/stylesheets/main/extensions/pymdownx/_critic.scss b/src/assets/stylesheets/main/extensions/pymdownx/_critic.scss index 24339f46b..44f9b27e9 100644 --- a/src/assets/stylesheets/main/extensions/pymdownx/_critic.scss +++ b/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 { diff --git a/src/assets/stylesheets/main/extensions/pymdownx/_details.scss b/src/assets/stylesheets/main/extensions/pymdownx/_details.scss index c9f30ca12..423d207aa 100644 --- a/src/assets/stylesheets/main/extensions/pymdownx/_details.scss +++ b/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); diff --git a/tools/build/transform/index.ts b/tools/build/transform/index.ts index ef1d28ec1..dc77ef6a5 100644 --- a/tools/build/transform/index.ts +++ b/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() - 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`