feat: New CSS classes for "themeability"

resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-plugin-smoke-test-query-styling.css

@@ -0,0 +1,13 @@
+/* This file is only for use in smoke-testing the Tasks plugin, and not intended for use by users. */
+
+.block-language-tasks:has(ul.plugin-tasks-query-result[data-task-group-by="priority"]) .tasks-group-heading {
+    color: red;
+}
+
+.block-language-tasks .tasks-layout-short-mode {
+    background-color: aqua;
+}
+
+ul.contains-task-list.tasks-layout-hide-priority {
+    color: red;
+}

resources/sample_vaults/Tasks-Demo/Manual Testing/Smoke Testing the Tasks Plugin.md

@@ -103,6 +103,12 @@ heading includes Rendering of Task Blocks
 
 ---
 
+### Styling of Rendered Task Blocks
+
+- [ ] #task **check**: Open the file [[Styling of Queries]] and follow the steps there
+
+---
+
 ### Create or edit Task modal
 
 - This text should copied in to the task Description, after following steps below

resources/sample_vaults/Tasks-Demo/Manual Testing/Styling of Queries.md

@@ -0,0 +1,46 @@
+# Styling of Queries
+
+> [!Warning]
+> These tests require the `.has` selector.
+> The CSS `:has` selector is available with **Obsidian installer version 1.1.9 and newer**. You can run the Obsidian command `Show debug info` to see your current installer version.
+
+---
+
+To test styling of queries, follow these steps, viewing this file either in **Reading** Mode or **Live Preview** Mode:
+
+- [ ] **1. Open the Obsidian settings of the Demo vault and under Appearance | CSS Snippets, turn on `tasks-plugin-smoke-test-query-styling`.**
+
+- [ ] **2.** **Test 'group by' classes** - the following query result should have **red headings** named 'Priority 1: High' and 'Priority 4: Low'.
+
+```tasks
+path includes Styling of Queries
+group by priority
+```
+
+- [ ] **3. Test 'group by' classes #2** - the following should have a **black** heading named 'No due date':
+
+```tasks
+path includes Styling of Queries
+group by due
+```
+
+- [ ] **4. Test short mode classes** - the following should have an aqua background:
+
+```tasks
+path includes Styling of Queries
+short mode
+```
+
+- [ ] **5. Test 'hidden' query classes** - the following lines (except the backlinks) should be colored **red**:
+
+```tasks
+path includes Styling of Queries
+hide priority
+```
+
+- [ ] 6. Open the Obsidian settings of the Demo vault and under Appearance | CSS Snippets, turn **off** `tasks-plugin-smoke-test-query-styling`.
+
+## Tasks for Reference
+
+- [ ] #task Task with high priority ⏫
+- [ ] #task Task with low priority 🔽

src/InlineRenderer.ts

@@ -11,6 +11,10 @@ export class InlineRenderer {
 
     public markdownPostProcessor = this._markdownPostProcessor.bind(this);
 
+    /**
+     * This renders a file's task list when rendered in Reading View, using roughly the same pipeline
+     * of QueryRenderer (e.g. it removes the global filter and handles other formatting).
+     */
     private async _markdownPostProcessor(element: HTMLElement, context: MarkdownPostProcessorContext): Promise<void> {
         const { globalFilter } = getSettings();
         const renderedElements = element.findAll('.task-list-item').filter((taskItem) => {

src/QueryRenderer.ts

@@ -10,6 +10,7 @@ import { TaskModal } from './TaskModal';
 import type { TasksEvents } from './TasksEvents';
 import type { Task } from './Task';
 import { DateFallback } from './DateFallback';
+import { TaskLayout } from './TaskLayout';
 
 export class QueryRenderer {
     private readonly app: App;
@@ -188,8 +189,12 @@ class QueryRenderChild extends MarkdownRenderChild {
     }): Promise<{ taskList: HTMLUListElement; tasksCount: number }> {
         const tasksCount = tasks.length;
 
+        const layout = new TaskLayout(this.query.layoutOptions);
         const taskList = content.createEl('ul');
         taskList.addClasses(['contains-task-list', 'plugin-tasks-query-result']);
+        taskList.addClasses(layout.specificClasses);
+        const groupingAttribute = this.getGroupingAttribute();
+        if (groupingAttribute && groupingAttribute.length > 0) taskList.dataset.taskGroupBy = groupingAttribute;
         for (let i = 0; i < tasksCount; i++) {
             const task = tasks[i];
             const isFilenameUnique = this.isFilenameUnique({ task });
@@ -199,6 +204,7 @@ class QueryRenderChild extends MarkdownRenderChild {
                 listIndex: i,
                 layoutOptions: this.query.layoutOptions,
                 isFilenameUnique,
+                taskLayout: layout,
             });
 
             // Remove all footnotes. They don't re-appear in another document.
@@ -207,16 +213,18 @@ class QueryRenderChild extends MarkdownRenderChild {
 
             const shortMode = this.query.layoutOptions.shortMode;
 
+            const extrasSpan = listItem.createSpan('task-extras');
+
             if (!this.query.layoutOptions.hideUrgency) {
-                this.addUrgency(listItem, task);
+                this.addUrgency(extrasSpan, task);
             }
 
             if (!this.query.layoutOptions.hideBacklinks) {
-                this.addBacklinks(listItem, task, shortMode, isFilenameUnique);
+                this.addBacklinks(extrasSpan, task, shortMode, isFilenameUnique);
             }
 
             if (!this.query.layoutOptions.hideEditButton) {
-                this.addEditButton(listItem, task);
+                this.addEditButton(extrasSpan, task);
             }
 
             taskList.appendChild(listItem);
@@ -353,4 +361,12 @@ class QueryRenderChild extends MarkdownRenderChild {
 
         return allFilesWithSameName.length < 2;
     }
+
+    private getGroupingAttribute() {
+        const groupingRules: string[] = [];
+        for (const group of this.query.grouping) {
+            groupingRules.push(group.property);
+        }
+        return groupingRules.join(',');
+    }
 }

src/TaskLayout.ts

@@ -46,7 +46,9 @@ export class TaskLayout {
         'blockLink',
     ];
     public layoutComponents: TaskLayoutComponent[];
+    public hiddenComponents: TaskLayoutComponent[] = [];
     public options: LayoutOptions;
+    public specificClasses: string[] = [];
 
     constructor(options?: LayoutOptions, components?: TaskLayoutComponent[]) {
         if (options) {
@@ -59,21 +61,24 @@ export class TaskLayout {
         } else {
             this.layoutComponents = this.defaultLayout;
         }
-
         this.layoutComponents = this.applyOptions(this.options);
     }
 
     /**
      * Return a new list of components with the given options applied.
      */
     applyOptions(layoutOptions: LayoutOptions): TaskLayoutComponent[] {
-        // Remove a component from the taskComponents array if the given layoutOption criteria is met
+        // Remove a component from the taskComponents array if the given layoutOption criteria is met,
+        // and add to the layout's specific classes list the class that denotes that this component
+        // isn't in the layout
         const removeIf = (
             taskComponents: TaskLayoutComponent[],
             shouldRemove: boolean,
             componentToRemove: TaskLayoutComponent,
         ) => {
             if (shouldRemove) {
+                this.specificClasses.push(`tasks-layout-hide-${componentToRemove}`);
+                this.hiddenComponents.push(componentToRemove);
                 return taskComponents.filter((element) => element != componentToRemove);
             } else {
                 return taskComponents;
@@ -89,6 +94,7 @@ export class TaskLayout {
         newComponents = removeIf(newComponents, layoutOptions.hideScheduledDate, 'scheduledDate');
         newComponents = removeIf(newComponents, layoutOptions.hideDueDate, 'dueDate');
         newComponents = removeIf(newComponents, layoutOptions.hideDoneDate, 'doneDate');
+        if (layoutOptions.shortMode) this.specificClasses.push('tasks-layout-short-mode');
         return newComponents;
     }
 }