38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
// Deal with github-markdown-css, taken from: https://github.com/sindresorhus/github-markdown-css/issues/104
|
|
|
|
/** @type {import("postcss-load-config").ConfigPlugin} */
|
|
const makeGitHubCssUseClassName = {
|
|
postcssPlugin: "makeGitHubCssUseClassName",
|
|
// When debugging this, https://astexplorer.net/#/2uBU1BLuJ1 is very helpful
|
|
AtRule: {
|
|
media(media, { Rule }) {
|
|
const filePath = media.root().source?.input?.file ?? "";
|
|
if (!filePath.endsWith("/github-markdown.css")) return;
|
|
|
|
const scopeSelector =
|
|
media.params === "(prefers-color-scheme: dark)"
|
|
? ".dark"
|
|
: media.params === "(prefers-color-scheme: light)"
|
|
? ".light"
|
|
: undefined;
|
|
if (scopeSelector === undefined) return;
|
|
|
|
media.each((child) => {
|
|
if (child.type !== "rule") return;
|
|
const newRule = new Rule({
|
|
selector: `${scopeSelector} ${child.selector}`,
|
|
});
|
|
|
|
child.each((grandChild) => void newRule.append(grandChild.clone()));
|
|
media.before(newRule);
|
|
});
|
|
media.remove();
|
|
},
|
|
},
|
|
};
|
|
|
|
/** @type {import("postcss-load-config").Config} */
|
|
module.exports = {
|
|
plugins: [makeGitHubCssUseClassName],
|
|
};
|