Modify: 强制检查主题的配置项必须存在

Change-Id: Ie44f0786aec1b61a498147d822a2b330bfe07a67

Author: elonz

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Install and Build 
         run: |
           npm install
-          npm run compile -- --platform mweb --distDir dist/mweb3-themes
+          npm run compile -- --platform mweb3 --distDir dist/mweb3-themes
           npm run compile -- --platform mweb4 --distDir dist/mweb4-themes
           npm run compile -- --platform typora --distDir dist/typora-themes
       - name: Pack

package.json

@@ -8,6 +8,8 @@
     "typora-watch": "rm -rf static/typora.css static/typora.css.map && node scripts/typora/watch.js",
     "clean": "rm -rf static/*.css static/*.map",
     "compile": "node scripts/compile.js",
+    "compile-mweb4": "npm run compile -- --platform mweb4 --distDir dist/mweb4",
+    "compile-typora": "npm run compile -- --platform typora --distDir dist/typora",
     "gallery-watch": "rm -rf dist/gallery && node scripts/gallery/index.js watch",
     "gallery-build": "rm -rf dist/gallery && node scripts/gallery/index.js build"
   },

scripts/compile.js

@@ -17,32 +17,35 @@ const sass = require("sass");
 const path = require("path");
 const minimist = require("minimist");
 const sassExtract = require("sass-extract");
-const themeConfig = require("../src/themes/mweb-config");
-const { adjust } = require("./utils");
+const { adjust, getFileName, getFileNameWithoutExtension } = require("./utils");
 const args = minimist(process.argv.slice(2), {
   string: ["file", "platform", "themeDir", "distDir"],
   default: {
-    platform: "mweb", // juejin, typora
+    platform: "mweb3", // mweb4, typora
     themeDir: "src/themes",
     distDir: "dist/themes",
   },
 });
 
 const platformConfig = {
-  mweb: {
+  mweb3: {
     filter: (filename) => /^mweb-/.test(filename), // 过滤需要编译的 scss 文件
     namer: (filename) => `${filename}.css`, // scss 编译后写入的文件名
-    writer: writerForMWeb
+    themeConfig: require("../src/themes/mweb-config"),
+    getThemeName: (filePath) => filePath.match(/mweb-(.*)\.scss$/)[1], // ayu, lark, etc.
   },
   mweb4: {
     filter: (filename) => /^mweb-/.test(filename),
     namer: (filename) => `${filename}.mwebtheme`,
+    themeConfig: require("../src/themes/mweb-config"),
+    getThemeName: (filePath) => filePath.match(/mweb-(.*)\.scss$/)[1], // ayu, lark, etc.
     compiler: compilerForMWeb4,
-    writer: writerForMWeb
   },
   typora: {
     filter: (filename) => /^typora-/.test(filename),
     namer: (filename) => `${filename}.css`,
+    themeConfig: require("../src/themes/typora-config"),
+    getThemeName: (filePath) => filePath.match(/typora-(.*)\.scss$/)[1], // ayu, lark, etc.
   },
 };
 
@@ -293,14 +296,15 @@ function compilerForMWeb4({ filePath }) {
       color: "555555",
     },
   };
+  const { themeConfig } = platformConfig[args.platform];
+  const themeName = platformConfig[args.platform].getThemeName(filePath);
   const css = sass.renderSync({ file: filePath }).css;
-  const themeName = filePath.match(/mweb-(.*)\.scss$/)[1]; // eg: ayu, lark, etc.
   const isMWeb4EditorThemeCompatible =
     themeConfig[themeName].isMWeb4EditorThemeCompatible;
 
   if (isMWeb4EditorThemeCompatible) {
     // sass-extract 有 bug，import 优先级不正确，算出来的 final value 不正确，都是 bear-default.scss 里定义的。
-    // 所以这里不解析入口文件，只计算 bear-palettes 里的变量值。
+    // 所以这里不直接解析入口文件 mweb-xxx.scss，而是只解析 bear-palettes/xxx.scss。
     const rendered = (() => {
       let variablePath = `bear-palettes/${themeName}`;
       // 简单的适配几个特殊主题
@@ -312,8 +316,6 @@ function compilerForMWeb4({ filePath }) {
         case "lark":
           variablePath = `mweb-lark`; // 这个可以直接解析入口文件，因为没有 import bear-default.scss
           break;
-        default:
-          break;
       }
       return sassExtract.renderSync({
         file: `${args.themeDir}/${variablePath}.scss`,
@@ -399,26 +401,14 @@ ${css}`;
 
 function write({ filePath, css }) {
   fs.ensureDirSync(args.distDir);
-  const { namer } = platformConfig[args.platform];
-  const filename = path.basename(filePath); // with extension
-  const outFile = `${args.distDir}/${namer(path.parse(filename).name)}`;
-  fs.writeFile(outFile, css, (error) => {
-    if (error) {
-      console.log(`写入文件失败：${outFile}`, error);
-      process.exit(1);
-    } else console.log(`输出：${outFile}`);
-  });
-}
-
-function writerForMWeb({ filePath, css }) {
-  fs.ensureDirSync(args.distDir);
-  fs.ensureDirSync(args.distDir + '/dark');
-  fs.ensureDirSync(args.distDir + '/light');
-  const { namer } = platformConfig[args.platform];
-  const themeName = filePath.match(/mweb-(.*)\.scss$/)[1]; // eg: ayu, lark, etc.
-  const filename = filePath.match(/(mweb-.*)\.scss$/)[1];
+  fs.ensureDirSync(args.distDir + "/dark");
+  fs.ensureDirSync(args.distDir + "/light");
+  const { namer, themeConfig } = platformConfig[args.platform];
+  const themeName = platformConfig[args.platform].getThemeName(filePath);
   const isDark = themeConfig[themeName].mode == "dark";
-  const outFile = `${args.distDir}/${isDark ? 'dark' : 'light'}/${namer(filename)}`;
+  const outFile = `${args.distDir}/${isDark ? "dark" : "light"}/${namer(
+    getFileNameWithoutExtension(filePath)
+  )}`;
   fs.writeFile(outFile, css, (error) => {
     if (error) {
       console.log(`写入文件失败：${outFile}`, error);
@@ -441,11 +431,24 @@ function main() {
 
   files.forEach(async (filePath) => {
     try {
+      if (cfg.themeConfig) {
+        const themeName = platformConfig[args.platform].getThemeName(filePath);
+        console.log(`检查主题配置是否存在：${themeName}`);
+        if (!cfg.themeConfig[themeName]) {
+          console.log(
+            `主题配置不存在，需要在主题配置文件中添加配置项：${themeName}`
+          );
+          process.exit(1);
+        }
+      }
+
       console.log(`编译中：${filePath}`);
       let css = cfg.compiler
         ? await cfg.compiler({ filePath })
         : await compile({ filePath });
-        cfg.writer
+
+      console.log(`写入文件中：${filePath}`);
+      cfg.writer
         ? await cfg.writer({ filePath, css })
         : await write({ filePath, css });
     } catch (err) {

scripts/utils.js

@@ -17,6 +17,14 @@ function adjust(color, amount) {
   );
 }
 
+function getFileName (filePath) {
+  return filePath.match(/([a-zA-Z\-]*\..*)$/)[1]; // eg: mweb-ayu
+}
+
+function getFileNameWithoutExtension (filePath) {
+  return filePath.match(/([a-zA-Z\-]*)\..*$/)[1]; // eg: mweb-ayu
+}
+
 module.exports = {
-  adjust,
+  adjust, getFileName, getFileNameWithoutExtension
 };

src/themes/typora-config.js

@@ -0,0 +1,83 @@
+/**
+ * 每次新增一个 typora 主题文件，都需要在这里新增一项，字段包括：
+ * - file: 文件名
+ * - mode（可选）: "dark"，是否是深色主题
+ */
+
+const themes = {
+  ayu: { file: "typora-ayu.scss" },
+  "ayu-mirage": {
+    file: "typora-ayu-mirage.scss",
+    mode: "dark",
+  },
+  charcoal: {
+    file: "typora-charcoal.scss",
+    mode: "dark",
+  }, // Night Text Theme
+  cobalt: {
+    file: "typora-cobalt.scss",
+    mode: "dark",
+  },
+  contrast: { file: "typora-contrast.scss" },
+  "d-boring": {
+    file: "typora-d-boring.scss",
+  },
+  "dark-graphite": {
+    file: "typora-dark-graphite.scss",
+    mode: "dark",
+  },
+  dieci: {
+    file: "typora-dieci.scss",
+    mode: "dark",
+  },
+  dracula: {
+    file: "typora-dracula.scss",
+    mode: "dark",
+  },
+  "duotone-heat": {
+    file: "typora-duotone-heat.scss",
+  },
+  "duotone-light": {
+    file: "typora-duotone-light.scss",
+  },
+  gandalf: { file: "typora-gandalf.scss" },
+  gotham: {
+    file: "typora-gotham.scss",
+    mode: "dark",
+  },
+  lighthouse: {
+    file: "mweb-lighthouse.scss",
+    mode: "dark",
+  },
+  lark: { file: "typora-lark.scss" },
+  "lark-bold-color": {
+    file: "typora-lark-bold-color.scss",
+  },
+  nord: {
+    file: "typora-nord.scss",
+    mode: "dark",
+  },
+  "olive-dunk": {
+    file: "typora-olive-dunk.scss",
+  },
+  panic: {
+    file: "typora-panic.scss",
+    mode: "dark",
+  },
+  "red-graphite": {
+    file: "typora-red-graphite.scss",
+  },
+  "solarized-dark": {
+    file: "typora-solarized-dark.scss",
+    mode: "dark",
+  },
+  "solarized-light": {
+    file: "typora-solarized-light.scss",
+  },
+  toothpaste: {
+    file: "typora-toothpaste.scss",
+    mode: "dark",
+  },
+};
+
+module.exports = themes;