Revert to pre-8.0.0 simpler CSS selectors

This commit is contained in:
squidfunk 2022-11-01 12:08:20 +07:00
parent 4caa165b97
commit daffd085f3
6 changed files with 56 additions and 67 deletions

25
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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

View File

@ -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 {

View File

@ -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);

View File

@ -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`