Tags showing preprocessors

main.js

@@ -11,7 +11,7 @@ const log = isDebug ? simpleLog : dummyLog;
 let devMode = false;
 let watcher = null;
 
-const supportedPreprocessors = ["transitio", "stylus"];
+const supportedPreprocessors = ["none", "transitio", "stylus"];
 const dataPath = LiteLoader.plugins.transitio.path.data;
 const stylePath = path.join(dataPath, "styles");
 const debouncedSet = debounce(LiteLoader.api.config.set, updateInterval);

modules/main/parser.js

@@ -115,6 +115,7 @@ function extractUserStyleMetadata(css) {
     } else { // Fall back to the old method
         const comment = getDesc(css) || "";
         result["description"] = comment;
+        result["preprocessor"] = "none"; // No preprocessor
     }
     return result;
 }

modules/renderer/search.js

@@ -34,7 +34,7 @@ function searchAndHighlight(highlight, el, keyword) {
  */
 function searchAllAndHighlight(highlight, detail, keywords) {
     const settingItem = detail.querySelector("summary > setting-item");
-    const nameEl = settingItem.querySelector("setting-text");
+    const nameEl = settingItem.querySelector("setting-text[data-type='primary']");
     const descEl = settingItem.querySelector("setting-text[data-type='secondary']");
     let matches = 0;
     for (const keyword of keywords) {

modules/renderer/settings.js

@@ -82,6 +82,8 @@ function addItem(path, container) {
     item.setAttribute("data-direction", "row");
     const left = item.appendChild(document.createElement("div"));
     const itemName = left.appendChild(document.createElement("setting-text"));
+    itemName.setAttribute("data-type", "primary");
+    itemName.setAttribute("data-preprocessor", "Unknown");
     const itemDesc = document.createElement("setting-text");
     itemDesc.setAttribute("data-type", "secondary");
     left.appendChild(itemDesc);
@@ -405,6 +407,7 @@ function transitioSettingsUpdateStyle(container, args) {
     const optionalVersion = meta.version ? ` (v${meta.version})` : "";
     itemName.textContent = meta.name + optionalVersion;
     itemName.title = path;
+    itemName.setAttribute("data-preprocessor", meta.preprocessor);
     const itemDesc = item.querySelector("setting-text[data-type='secondary']");
     itemDesc.textContent = meta.description || "此文件没有描述";
     itemDesc.title = itemDesc.textContent;

settings.html

@@ -65,6 +65,26 @@
                 background-color: yellow;
                 color: black;
             }
+            > setting-item > div > setting-text[data-type="primary"] {
+                &::after {
+                    content: "@" attr(data-preprocessor);
+                    text-transform: capitalize;
+                    font-size: smaller;
+                    border-radius: 4px;
+                    margin-left: 0.1em;
+                    padding: 2px;
+                    opacity: 0.8;
+                }
+                &[data-preprocessor="none"]::after {
+                    background: #808080aa;
+                }
+                &[data-preprocessor="transitio"]::after {
+                    background: #74a9f6aa;
+                }
+                &[data-preprocessor="stylus"]::after {
+                    background: #6da13faa;
+                }
+            }
         }
         > setting-item {
             padding-left: 1em;