Bug fixes; Gather supported extensions; CSS -> userstyles

README.md

@@ -5,16 +5,16 @@
 > [!NOTE]
 > 此插件 `1.0.0` 版本及以上最低支持 LiteLoaderQQNT 1.0.0，之前版本的 LiteLoaderQQNT 请使用 `1.0.0` 之前的 Release
 
-[LiteLoaderQQNT](https://github.com/mo-jinran/LiteLoaderQQNT) 插件，用于为 QQNT 加载任意 CSS 片段。
+[LiteLoaderQQNT](https://github.com/mo-jinran/LiteLoaderQQNT) 插件，用于为 QQNT 加载任意用户样式。
 
 你可能也感兴趣：[Scriptio](https://github.com/PRO-2684/Scriptio)，自定义渲染层 JavaScript 脚本加载器。
 
 ## 🪄 具体功能
 
-- 导入 CSS 代码片段
-- 启用/禁用/配置 CSS 代码片段
+- 导入用户样式
+- 启用/禁用/配置用户样式
 - 开发者模式：监控文件更改，实时预览效果
-- 立即重载：立即重载所有 CSS 代码片段
+- 立即重载：立即重载所有用户样式
 
 ## 🖼️ 截图
 
@@ -35,13 +35,13 @@
 ## 🤔 使用方法
 
 > [!WARNING]
-> 所有不是通过配置界面进行的更改，除非打开了 *开发者模式*，都只在双击 *导入 CSS* 这行字或重启 QQ 后生效。
+> 所有不是通过配置界面进行的更改，除非打开了 *开发者模式*，都只在双击 *导入用户样式* 这行字或重启 QQ 后生效。
 
 - 启用/禁用样式：打开插件设置界面，将对应的样式开关打开/关闭，即时生效。
-    - 若点击各个开关速度过快，可能会导致错位等情况，此时请双击 "导入 CSS" 来重载。
-- 导入样式：在配置界面导入 CSS 文件，或将之放入 `data/transitio/styles/` 文件夹。
+    - 若点击各个开关速度过快，可能会导致错位等情况，此时请双击 "导入用户样式" 来重载。
+- 导入样式：在配置界面导入用户样式文件，或将之放入 `data/transitio/styles/` 文件夹。
     - 样式的编写请参考 [Wiki](https://github.com/PRO-2684/transitio/wiki)。
-    - 可以在此文件夹下创建多层目录，插件会自动扫描所有 CSS 文件，但是设置界面导入的还是默认直接放在 `data/transitio/styles/` 下
+    - 可以在此文件夹下创建多层目录，插件会自动扫描所有支持的用户样式文件，但是设置界面导入的还是默认直接放在 `data/transitio/styles/` 下
 - 删除样式：鼠标悬停在样式上并点击删除 `🗑️` 按钮，或进入 `data/transitio/styles/` 文件夹删除对应文件。
 - 修改样式：修改对应文件即可。
     - 鼠标悬停在样式标题上时，会显示其绝对路径。
@@ -52,13 +52,13 @@
 
 ## 💻 调试
 
-- 开发者模式：若您想要调试**您的 CSS 片段**，可以在插件设置界面打开*开发者模式*，此时插件会监控 `data/transitio/styles/` 文件夹，当发生更改时，会自动重载。
+- 开发者模式：若您想要调试**您的用户样式**，可以在插件设置界面打开*开发者模式*，此时插件会监控 `data/transitio/styles/` 文件夹，当发生更改时，会自动重载。
 - Debug 模式：若您想要调试**此插件本身**，可以使用 `--transitio-debug` 参数启动 QQNT，此时插件会在控制台输出调试信息。
 
-## 📜 用户 CSS 片段
+## 📜 用户样式列表
 
 > [!NOTE]
-> 以下样式均为由我/其它用户编写的 CSS 片段，不内置在插件中。
+> 以下样式均为由我/其它用户编写的用户样式，不内置在插件中。
 >
 > 若你有愿意分享的样式，欢迎[提交 PR 或 Issue](https://github.com/PRO-2684/transitio/issues/4) 来将它们添加到这里。编写样式前推荐先阅读 [Wiki](https://github.com/PRO-2684/transitio/wiki)。
 

main.js

@@ -44,7 +44,7 @@ ipcMain.on("LiteLoader.transitio.removeStyle", (event, absPath) => {
                 description: "[此样式已被删除]",
                 enabled: false,
                 preprocessor: "transitio",
-                variables: {}
+                vars: {}
             }
         };
         webContents.getAllWebContents().forEach((webContent) => {

manifest.json

@@ -31,5 +31,9 @@
         "renderer": "./renderer.js",
         "main": "./main.js",
         "preload": "./preload.js"
-    }
+    },
+    "supported_extensions": [
+        ".css",
+        ".styl"
+    ]
 }

modules/main/walker.js

@@ -1,21 +1,21 @@
-// Description: Walks a directory and returns a list of CSS files or a shortcut to a CSS file.
+// Description: Walks a directory and returns a list of style files or a shortcut to a style file.
 const { normalize } = require("./utils");
 const fs = require("fs");
 const { shell } = require("electron");
 
 /** Folders to ignore. */
 const ignoredFolders = new Set(["node_modules", ".git", ".vscode", ".idea", ".github"]);
-/** Valid suffixes for style files. */
-const validSuffixes = new Set([".css", ".styl"]);
+/** Supported extensions for style files. */
+const supportedExtensions = LiteLoader.plugins.transitio.manifest.supported_extensions;
 
 /**
- * Whether the file name has a valid suffix.
+ * Whether the file name has a supported extension.
  * @param {string} name File name.
- * @returns {boolean} Whether the file name has a valid suffix.
+ * @returns {boolean} Whether the file name has a supported extension.
  */
-function hasValidSuffix(name) {
-    for (const suffix of validSuffixes) {
-        if (name.endsWith(suffix)) {
+function hasValidExtension(name) {
+    for (const ext of supportedExtensions) {
+        if (name.endsWith(ext)) {
             return true;
         }
     }
@@ -37,13 +37,13 @@ function listStyles(dir) {
                 if (!ignoredFolders.has(f)) {
                     walk(dir + "/" + f);
                 }
-            } else if (hasValidSuffix(f)) {
+            } else if (hasValidExtension(f)) {
                 files.push(normalize(dir + "/" + f));
             } else if (f.endsWith(".lnk") && shell.readShortcutLink) { // lnk file & on Windows
                 const linkPath = dir + "/" + f;
                 try {
                     const { target } = shell.readShortcutLink(linkPath);
-                    if (hasValidSuffix(target)) {
+                    if (hasValidExtension(target)) {
                         files.push(normalize(linkPath));
                     }
                 } catch (e) {

modules/renderer/css.js

@@ -1,6 +1,6 @@
-// Description: Utilities related to CSS.
+// Description: Utilities related to styles.
 
-/** Attribute name for the style element to store the path of the CSS file. */
+/** Attribute name for the style element to store the path of the style file. */
 const styleDataAttr = "data-transitio-style";
 
 /**
@@ -20,7 +20,7 @@ function getSelectDefaultValue(varArgs) {
     }
 }
 /**
- * Construct the value of a variable, to be applied into the CSS.
+ * Construct the value of a variable, to be applied into the style. (transitio preprocessor)
  * @param {Object} varObj Variable object.
  * @returns {String} The value of the variable.
  */

modules/renderer/search.js

@@ -1,7 +1,7 @@
 // Description: Search module for settings view.
 import { log } from "./debug.js";
 
-/** Attribute of `<details>` that indicates the CSS is hidden by search */
+/** Attribute of `<details>` that indicates the style is hidden by search */
 const searchHiddenDataAttr = "data-search-hidden";
 
 /** Search `keyword` in the `el` and highlight the matched text.

modules/renderer/settings.js

@@ -7,18 +7,20 @@ import { setupSearch } from "./search.js";
 const pluginPath = LiteLoader.plugins.transitio.path.plugin.replace(":\\", "://").replaceAll("\\", "/"); // Normalized plugin path
 /** Transitio data path. */
 const dataPath = LiteLoader.plugins.transitio.path.data.replace(":\\", "://").replaceAll("\\", "/");
-/** Attribute of `<details>` that stores the CSS path. */
+/** Attribute of `<details>` that stores the style path. */
 const configDataAttr = "data-transitio-config";
-/** Attribute of `<setting-switch>` that stores the CSS path. */
+/** Attribute of `<setting-switch>` that stores the style path. */
 const switchDataAttr = "data-transitio-switch";
-/** Attribute of `<details>` that indicates the CSS is deleted. */
+/** Attribute of `<details>` that indicates the style is deleted. */
 const deletedDataAttr = "data-deleted";
 /** The `name` attribute of the details element. */
 const detailsName = "transitio-setting-details";
 /** The expiration time of the last focused variable. */
 const lastFocusedExpire = 1000;
 /** Last focused style path, variable name and expiration time. */
 let lastFocused = [null, null, 0];
+/** Supported extensions for style files. */
+const supportedExtensions = LiteLoader.plugins.transitio.manifest.supported_extensions;
 
 /** Function to parse the value from the input/select element.
  * @param {Element} varInput The input/select element.
@@ -65,7 +67,7 @@ function addTransitioMore(right, args) {
     return more;
 }
 /** Function to add a item representing the UserStyle with name and description.
- * @param {string} path The path of the CSS file.
+ * @param {string} path The path of the style file.
  * @param {Element} container The container to add the item.
  * @returns {Element} The added `details` element.
  */
@@ -312,13 +314,21 @@ async function initTransitioSettings(view) {
         const url = this.getAttribute("data-transitio-url");
         openURI("link", url);
     }
-    async function importCSS() {
+    function hasValidExtension(name) {
+        for (const ext of supportedExtensions) {
+            if (name.endsWith(ext)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    async function importStyle() {
         if (this.files.length == 0) return; // No file selected
         this.parentNode.classList.toggle("is-loading", true);
         let cnt = 0;
         const promises = [];
         for (const file of this.files) {
-            if (!file.name.endsWith(".css")) {
+            if (!hasValidExtension(file.name)) {
                 log("Ignored", file.name);
                 continue;
             }
@@ -338,9 +348,9 @@ async function initTransitioSettings(view) {
         this.parentNode.classList.toggle("is-loading", false);
         log("Imported", cnt, "files");
         if (cnt > 0) {
-            alert(`成功导入 ${cnt} 个 CSS 文件`);
+            alert(`成功导入 ${cnt} 个用户样式`);
         } else {
-            alert("没有导入任何 CSS 文件");
+            alert("没有导入任何用户样式`);");
         }
     }
     // Search
@@ -359,7 +369,9 @@ async function initTransitioSettings(view) {
     $("#transitio-open-folder").addEventListener("click", () => {
         openURI("path", `${dataPath}/styles`); // Relative to the data directory
     });
-    $("#transitio-import").addEventListener("change", importCSS);
+    const importBtn = $("#transitio-import");
+    importBtn.accept = supportedExtensions.join(",");
+    importBtn.addEventListener("change", importStyle);
     // About - Version
     $("#transitio-version").textContent = LiteLoader.plugins.transitio.manifest.version;
     // About - Backgroud image

package.json

@@ -1,7 +1,7 @@
 {
   "name": "transitio",
   "version": "1.4.0",
-  "description": "Add custom CSS snippets for QQNT",
+  "description": "Load custom UserStyles for QQNT",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -14,7 +14,9 @@
   "keywords": [
     "css",
     "liteloaderqqnt",
-    "llqqnt"
+    "llqqnt",
+    "stylus",
+    "userstyle"
   ],
   "author": "PRO-2684",
   "license": "GPL-3.0-or-later",

settings.html

@@ -53,7 +53,7 @@
         }
     }
 
-    /* 各个 CSS 片段 */
+    /* 各个用户样式 */
     .transitio details {
         > summary {
             list-style: none;
@@ -217,18 +217,17 @@
     </setting-panel>
 </setting-section>
 <input autofocus type="search" id="transitio-search" title="键入内容以搜索..." placeholder="🔍 Search...">
-<setting-section data-title="CSS 片段列表" class="snippets">
+<setting-section data-title="用户样式列表" class="snippets">
     <setting-panel>
         <setting-list data-direction="column">
             <setting-item data-direction="row">
                 <div>
-                    <setting-text id="transitio-reload" title="双击以立即重载样式">导入 CSS...</setting-text>
-                    <setting-text data-type="secondary">导入自定义的 CSS 片段，或查看<span class="transitio-link"
+                    <setting-text id="transitio-reload" title="双击以立即重载样式">导入用户样式...</setting-text>
+                    <setting-text data-type="secondary">导入自定义的用户样式，或查看<span class="transitio-link"
                             id="transitio-snippets" style="font-style: italic;"
-                            data-transitio-url="https://github.com/PRO-2684/transitio#-用户-css-片段">用户 CSS
-                            片段列表</span></setting-text>
+                            data-transitio-url="https://github.com/PRO-2684/transitio#-用户样式列表">用户样式列表</span></setting-text>
                 </div>
-                <input id="transitio-import" type="file" accept=".css, .styl" multiple />
+                <input id="transitio-import" type="file" accept="text/css" multiple />
             </setting-item>
         </setting-list>
     </setting-panel>