Repository: obsidian-tasks-group/obsidian-tasks (ts)

Issue:
Could the 5 Status Types be included in the CSS?
### ⚠️ Please check that this feature request hasn't been suggested before.

- [X] I searched previous [Ideas in Discussions](https://github.com/obsidian-tasks-group/obsidian-tasks/discussions/categories/ideas-any-new-feature-requests-go-in-issues-please?discussions_q=category%3A%22Ideas%3A+Any+New+Feature+Requests+go+in+Issues+please%22+-label%3A%22status%3A+released%22+-label%3Aduplicate+sort%3Atop) didn't find any similar feature requests.
- [X] I searched previous [Issues](https://github.com/obsidian-tasks-group/obsidian-tasks/issues?q=is%3Aopen+is%3Aissue+label%3A%22type%3A+enhancement%22+sort%3Acomments-desc) didn't find any similar feature requests.

### 🔖 Feature description

I'm trying to style loads of tasks and I have a variety of different custom statuses, so as far as I can tell, the only real information to tell me whether the task is done, todo, cancelled etc is the Task Status Type.

https://obsidian-tasks-group.github.io/obsidian-tasks/getting-started/statuses/status-types/#overview

- TODO
- IN_PROGRESS
- DONE
- CANCELLED
- NON_TASK

### ✔️ Solution

Could the status types be included as data attributes in the generated CSS?

### ❓ Alternatives

_No response_

### 📝 Additional Context

_No response_

Pull request:
feat: Add CSS Status Type & Status Name selectors - by @esm7
<!--- Provide a general summary of your changes in the Title above -->

# Description

I am creating a PR to merge in work kindly offered by @esm7.

This adds the following two date attributes:

 - `data-task-status-type` contains the *status type*, e.g. "TODO", "DONE", "IN_PROGRESS".
 - `data-task-status-name` contains the *status name*, e.g. "Todo", "Done", "In Progress".

## Motivation and Context

Fix #1811: Could the 5 Status Types be included in the CSS?

## How has this been tested?

I will test it once I have created the PR.

## Screenshots (if appropriate)

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->

Changes visible to users:

- [x] **New feature** (prefix: `feat` - non-breaking change which adds functionality)
- [x] **Documentation** (prefix: `docs` - improvements to any documentation content **for users**)
- [x] **Sample vault** (prefix: `vault` - improvements to the [Tasks-Demo sample vault](https://github.com/obsidian-tasks-group/obsidian-tasks/tree/main/resources/sample_vaults/Tasks-Demo))

Internal changes:

- [x] **Tests** (prefix: `test` - additions and improvements to unit tests and the smoke tests)

## Checklist

<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [x] My change requires a change to the documentation.
- [x] I have [updated the documentation](https://publish.obsidian.md/tasks-contributing/Documentation/About+Documentation) accordingly.
- [x] My change has adequate [Unit Test coverage](https://publish.obsidian.md/tasks-contributing/Testing/About+Testing).

## Terms

<!--
By submitting this pull request, you must agree to follow our
[contributing guide](https://publish.obsidian.md/tasks-contributing) and
[Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md).
Put an x in the boxes to confirm you agree.
-->

- [x] My contribution follow this project's [contributing guide](https://publish.obsidian.md/tasks-contributing)
- [x] I agree to follow this project's [Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md)


Patch:
diff --git a/docs/advanced/styling.md b/docs/advanced/styling.md
index f5c3d979..85455295 100644
--- a/docs/advanced/styling.md
+++ b/docs/advanced/styling.md
@@ -118,6 +118,16 @@ The CSS `:has` selector is available with Obsidian installer version 1.1.9 and n
 
 **Grouping rules** will add a `data-task-group-by` attribute to the query container, e.g. `data-task-group-by="due,scheduled"`.
 
+## Custom Statuses
+
+Task statuses are represented by a few data attributes, all set on the `task-list-item` `LI` element:
+
+- `data-task` contains the *status symbol*, e.g. "" for a regular TODO, "x" for a regular DONE, or any other symbols that you use.
+- `data-task-status-type` contains the *status type*, e.g. "TODO", "DONE", "IN_PROGRESS".
+- `data-task-status-name` contains the *status name*, e.g. "Todo", "Done", "In Progress".
+
+These attributes can be used to style tasks according to their status, with the status type being the preferred selector in most cases.
+
 ## More Classes
 
 The following additional components have the following classes:
@@ -205,6 +215,14 @@ li.task-list-item[data-task="/"] .task-list-item-checkbox {
 ```
 <!-- endSnippet -->
 
+Alternatively, you can use the status type to write rules that are independent of the status symbol:
+
+```css
+li.task-list-item[data-task-status-type="IN_PROGRESS"] .task-list-item-checkbox {
+        box-shadow: 0 0 10px green;
+}
+```
+
 ### Colors for Due Today and Overdue
 
 The following rules mark 'today' due dates as blue and past due dates as red:
diff --git a/src/TaskLineRenderer.ts b/src/TaskLineRenderer.ts
index 9d59f075..42d378ab 100644
--- a/src/TaskLineRenderer.ts
+++ b/src/TaskLineRenderer.ts
@@ -100,6 +100,8 @@ export async function renderTaskLine(
     // Set these to be compatible with stock obsidian lists:
     li.setAttribute('data-task', task.status.symbol.trim()); // Trim to ensure empty attribute for space. Same way as obsidian.
     li.setAttribute('data-line', renderDetails.listIndex.toString());
+    li.setAttribute('data-task-status-name', task.status.name);
+    li.setAttribute('data-task-status-type', task.status.type);
     checkbox.setAttribute('data-line', renderDetails.listIndex.toString());
 
     if (renderDetails.layoutOptions?.shortMode) {


Test patch:
diff --git a/tests/TaskLineRenderer.test.ts b/tests/TaskLineRenderer.test.ts
index 92b182eb..4f1bb694 100644
--- a/tests/TaskLineRenderer.test.ts
+++ b/tests/TaskLineRenderer.test.ts
@@ -559,4 +559,27 @@ describe('task line rendering', () => {
         expect(tagSpan.classList[0]).toEqual('tag');
         expect(tagSpan.dataset.tagName).toEqual('#illegal-data-attribute');
     });
+
+    it('creates data attributes for custom statuses', async () => {
+        await testLiAttributes(
+            '- [ ] An incomplete task',
+            {},
+            { task: '', taskStatusName: 'Todo', taskStatusType: 'TODO' },
+        );
+        await testLiAttributes(
+            '- [x] A complete task',
+            {},
+            { task: 'x', taskStatusName: 'Done', taskStatusType: 'DONE' },
+        );
+        await testLiAttributes(
+            '- [/] In-progress task',
+            {},
+            { task: '/', taskStatusName: 'In Progress', taskStatusType: 'IN_PROGRESS' },
+        );
+        await testLiAttributes(
+            '- [-] In-progress task',
+            {},
+            { task: '-', taskStatusName: 'Cancelled', taskStatusType: 'CANCELLED' },
+        );
+    });
 });