mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-14 10:57:41 +01:00
Merge branch 'refactor/is-pseudo-class' into feature/material-v9
This commit is contained in:
squidfunk
commit
ed147e9875
25
package-lock.json
generated
25
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user