vuepress-plugin-md-power 1.0.0-rc.81 → 1.0.0-rc.82

package/lib/client/components/CodeEditor.vue

@@ -106,12 +106,13 @@ onUnmounted(() => {
   z-index: 1;
   box-sizing: border-box;
   display: block;
-  padding: 1.3rem 1.5rem;
+  padding: 20px 24px;
   overflow-x: auto;
   font-family: var(--vp-font-family-mono);
   font-size: var(--vp-code-font-size);
   -webkit-hyphens: none;
   hyphens: none;
+  line-height: var(--vp-code-line-height);
   color: transparent;
   text-align: left;
   word-break: normal;
@@ -139,7 +140,7 @@ onUnmounted(() => {
 }
 
 :deep(div[class*="language-"].line-numbers-mode) + .code-repl-input {
-  padding-left: 1rem;
-  margin-left: 2rem;
+  padding-left: 24px;
+  margin-left: 32px;
 }
 </style>

package/lib/node/index.js

@@ -198,6 +198,7 @@ var nanoid2 = customAlphabet2("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW
 var iconDataCache = /* @__PURE__ */ new Map();
 var URL_CONTENT_RE = /(url\([\s\S]+?\))/;
 var CSS_PATH = "internal/md-power/icons.css";
+var locate;
 function resolveOption(opt) {
   const options = typeof opt === "object" ? opt : {};
   options.prefix ??= "vp-mdi";
@@ -239,18 +240,17 @@ function createIconCSSWriter(app, opt) {
   function addIcon(iconName) {
     if (!isInstalled)
       return;
-    if (cache.has(iconName))
-      return cache.get(iconName).className;
+    if (cache.has(iconName)) {
+      const item2 = cache.get(iconName);
+      return `${item2.className}${item2.background ? " bg" : ""}`;
+    }
     const item = {
       className: `${prefix}-${nanoid2()}`,
-      content: ""
+      ...genIcon(iconName)
     };
     cache.set(iconName, item);
-    genIconContent(iconName, (content) => {
-      item.content = content;
-      writeCss();
-    });
-    return item.className;
+    writeCss();
+    return `${item.className}${item.background ? " bg" : ""}`;
   }
   async function initIcon() {
     if (!opt)
@@ -259,18 +259,23 @@ function createIconCSSWriter(app, opt) {
       logger.error("[plugin-md-power]: `@iconify/json` not found! Please install `@iconify/json` first.");
       return;
     }
+    if (!locate) {
+      const mod = await interopDefault(import("@iconify/json"));
+      locate = mod.locate;
+    }
     return await writeCss();
   }
   return { addIcon, writeCss, initIcon };
 }
 function getDefaultContent(options) {
   const { prefix, size, color } = options;
-  return `[class^="${prefix}-"],
-[class*=" ${prefix}-"] {
+  return `[class^="${prefix}-"] {
   display: inline-block;
   width: ${size};
   height: ${size};
   vertical-align: middle;
+}
+[class^="${prefix}-"]:not(.bg) {
   color: inherit;
   background-color: ${color};
   -webkit-mask: var(--svg) no-repeat;
@@ -278,33 +283,42 @@ function getDefaultContent(options) {
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
 }
+[class^="${prefix}-"].bg {
+  background-color: transparent;
+  background-image: var(--svg);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 `;
 }
-var locate;
-async function genIconContent(iconName, cb) {
+function genIcon(iconName) {
   if (!locate) {
-    const mod = await interopDefault(import("@iconify/json"));
-    locate = mod.locate;
+    return { content: "", background: false };
   }
   const [collect, name] = iconName.split(":");
   let iconJson = iconDataCache.get(collect);
   if (!iconJson) {
     const filename = locate(collect);
     try {
-      iconJson = JSON.parse(await fs.readFile(filename, "utf-8"));
+      iconJson = JSON.parse(fs.readFileSync(filename, "utf-8"));
       iconDataCache.set(collect, iconJson);
     } catch {
       logger.warn(`[plugin-md-power] Can not find icon, ${collect} is missing!`);
     }
   }
   const data = getIconData(iconJson, name);
-  if (!data)
-    return logger.error(`[plugin-md-power] Can not read icon in ${collect}, ${name} is missing!`);
+  if (!data) {
+    logger.error(`[plugin-md-power] Can not read icon in ${collect}, ${name} is missing!`);
+    return { content: "", background: false };
+  }
   const content = getIconContentCSS(data, {
     height: data.height || 24
   });
   const match = content.match(URL_CONTENT_RE);
-  return cb(match ? match[1] : "");
+  return {
+    content: match ? match[1] : "",
+    background: !data.body.includes("currentColor")
+  };
 }
 function existsSync(fp) {
   try {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.81",
+  "version": "1.0.0-rc.82",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -47,12 +47,12 @@
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.0.7",
     "shiki": "^1.10.3",
-    "tm-grammars": "^1.13.11",
-    "tm-themes": "^1.5.3",
-    "vue": "^3.4.31"
+    "tm-grammars": "^1.13.13",
+    "tm-themes": "^1.5.5",
+    "vue": "^3.4.33"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.228",
+    "@iconify/json": "^2.2.229",
     "@types/markdown-it": "^14.1.1"
   },
   "publishConfig": {