Use :has selector (#108)

Author: Katsute

build.js

@@ -24,7 +24,7 @@ const ext  = path.join(__dirname, "extension.zip");
 }
 
 /* minify */ {
-    for(const file of ["index.js", "style.css"])
+    for(const file of ["style.css"])
         fs.writeFileSync(path.join(dist, file), fs.readFileSync(path.join(dist, file), "utf-8")
             .replace(/(?<!^)\/\*.*\*\//g, '') // /* comments (except first copyright)
             .replace(/ \/\/.*$/gm,'') // // comments

src/index.js

@@ -4,7 +4,7 @@
     "name": "GitHub Red Issues",
     "author": "Katsute",
     "description": "Revert closed GitHub issues from purple back to red.",
-    "version": "6.1",
+    "version": "7.0",
     "homepage_url": "https://github.com/KatsuteDev/GitHub-Red-Issues",
     "icons": {
         "16": "icon16.png",
@@ -20,7 +20,6 @@
 
     "permissions": [],
     "content_scripts": [{
-        "js": ["index.js"],
         "css": ["style.css"],
         "matches": ["https://github.com/*"]
     }]

src/manifest.json

@@ -1,79 +1,90 @@
 /* Copyright (C) 2023 Katsute <https://github.com/Katsute> */
 
 :root {
-    --rissue-pull-merged     : var(--color-done-emphasis, #8957e5);
-    --rissue-pull-merged-fg  : var(--color-done-fg, #a371f7);
     --rissue-issue-closed    : var(--color-danger-emphasis, #da3633);
     --rissue-issue-closed-fg : var(--color-danger-fg, #f85149);
-    --rissue-issue-closed-bg : var(--color-bg-danger, rgba(248, 81, 73, 0.1));
+    --rissue-issue-closed-bg : var(--color-danger-subtle, rgba(248, 81, 73, 0.1));
 }
 
-/* issue icon */
-:not(.State.State--merged):not(.TimelineItem-badge) > svg.octicon-issue-closed,
-/* projects beta icon */
-projects-v2 :not(.rissue-closed-bg > svg) > path[d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"],
-projects-v2 :not(.rissue-closed-bg > svg) > path[d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"],
-/* discussion icon */
-:not(.State.State--merged) > svg.octicon-discussion-closed,
-/* tasklist */
-tasklist-block-title > div.color-bg-done > svg
-{
+@supports not selector(:has(+ *)) {
+
+    body::before {
+
+        width: 100%;
+        z-index: 1000;
+        display: block;
+        position: fixed;
+
+        color: white;
+        background-color: var(--rissue-issue-closed-fg);
+
+        padding: .1rem;
+        content: "⚠️ Firefox does not yet support the :𝚑𝚊𝚜 CSS selector, enable it using the 𝚕𝚊𝚢𝚘𝚞𝚝.𝚌𝚜𝚜.𝚑𝚊𝚜-𝚜𝚎𝚕𝚎𝚌𝚝𝚘𝚛.𝚎𝚗𝚊𝚋𝚕𝚎𝚍 flag in 𝚊𝚋𝚘𝚞𝚝:𝚌𝚘𝚗𝚏𝚒𝚐 and restart Firefox.";
+
+    }
+
+}
+
+:not(projects-v2 figure) > :not(span.State--merged):not(.TimelineItem-badge) > :is(
+    /* issue icon */
+    svg.octicon-issue-closed,
+    /* project icon */
+    svg:has(path[d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"] + path[d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"]),
+    /* search issue icon */
+    svg:has(path[d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"]),
+    /* discussion icon */
+    svg.octicon-discussion-closed,
+    /* tasklist icon */
+    .octicon-checklist.color-fg-done
+){
     color: var(--rissue-issue-closed-fg) !important;
 }
 
-/* issue badge */
-#show_issue .gh-header-meta .State.State--merged,
-#show_issue .gh-header-sticky .State.State--merged,
-/* issue timeline icon */
-#show_issue .TimelineItem > .TimelineItem-badge.color-bg-done-emphasis,
-/* timeline mention closed issue label */
-.TimelineItem > .TimelineItem-body div[id^="ref-issue-"] ~ div > span.State--merged,
-/* pull timeline closed label */
-.pull-discussion-timeline .TimelineItem > .TimelineItem-body div span.State--merged,
-/* discussion badge */
-#partial-discussion-header.js-discussions-title-container span.State--merged {
+:is(
+    /* issue badge */
+    span.State--merged,
+    /* timeline icon */
+    .TimelineItem-badge
+):has(svg.octicon-issue-closed, svg.octicon-discussion-closed),
+/* projects issue badge */
+projects-v2 span[class^="StateLabel__StateLabelBase"]:has(path[d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"] + path[d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"]){
     background-color: var(--rissue-issue-closed) !important;
 }
 
-/* pull timeline closed mention label override */
-.pull-discussion-timeline .TimelineItem > .TimelineItem-body div[id^="ref-pullrequest-"] ~ div span.State.State--merged {
-    background-color: var(--rissue-pull-merged) !important;
+/* tasklist icon */
+tasklist-block-title > div.color-bg-done{
+    background-color: var(--rissue-issue-closed-bg) !important;
 }
 
-/* tasklist circle */
-tracked-issues-progress[data-type="tasklist_block"] svg > circle:last-child,
-tracked-issues-progress[data-type="tasklist_item"] svg > circle:last-child,
-/* projects tasklist circle */
-svg[data-target="tracked-issues-progress.progress"] > path,
-svg[data-target="tracked-issues-progress.progress"] > circle:last-child {
+:is(
+    /* tasklist circle */
+    tracked-issues-progress svg,
+    /* projects tasklist circle */
+    svg[data-target="tracked-issues-progress.progress"]
+) > circle:last-child{
     stroke: var(--rissue-issue-closed) !important;
 }
 
-/* tasklist */
-tasklist-block-title > div.color-bg-done {
-    background-color: var(--rissue-issue-closed-bg) !important;
-}
-
-/* js overrides */
-.rissue-closed-fg {
-    color: var(--rissue-issue-closed-fg) !important;
+/* projects tasklist check */
+projects-v2 :not(span) > svg[data-target="tracked-issues-progress.progress"] > path{
+    fill: var(--rissue-issue-closed) !important;
 }
 
-.rissue-closed-bg {
-    background-color: var(--rissue-issue-closed) !important;
+/* tasklist fill */
+span > svg[data-target="tracked-issues-progress.progress"] > path{
+    fill: var(--rissue-issue-closed-bg) !important;
 }
 
 /* print */
 @media print {
-    /* issue badge */
-    #show_issue .gh-header-meta .State.State--merged,
-    #show_issue .gh-header-sticky .State.State--merged,
-    /* timeline mention closed issue label */
-    .TimelineItem > .TimelineItem-body div[id^="ref-issue-"] ~ div > span.State--merged,
-    /* pull timeline closed label */
-    .pull-discussion-timeline .TimelineItem > .TimelineItem-body div span.State--merged,
-    /* discussion badge */
-    #partial-discussion-header.js-discussions-title-container span.State.State--merged {
+    :is(
+        /* issue badge */
+        span.State--merged,
+        /* timeline icon */
+        .TimelineItem-badge
+    ):has(svg.octicon-issue-closed, svg.octicon-discussion-closed),
+    /* projects issue badge */
+    projects-v2 span[class^="StateLabel__StateLabelBase"]:has(path[d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"] + path[d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"]){
         background: none !important;
         color: var(--rissue-issue-closed-fg) !important;
         border-color: var(--rissue-issue-closed) !important;