release: v1.8.4

liriliri · Oct 18, 2024 · 84a1ddb · 84a1ddb
1 parent 097457c
commit 84a1ddb
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.8.4 (18 Oct 2024)
+
+* fix: css priority [#16](https://github.com/liriliri/chobitsu/issues/16)
+
 ## 1.8.3 (17 Oct 2024)
 
 * fix: ignore special ws connection

diff --git a/devtools/target.css b/devtools/target.css
@@ -0,0 +1,52 @@
+.motto {
+  display: inline-block;
+}
+
+.scroll {
+  margin-top: 15px;
+  border: 1px solid black;
+  width: 400px;
+  height: 200px;
+  overflow: auto;
+}
+
+.big {
+  width: 300px;
+  height: 300px;
+  margin-top: 15px;
+  background-color: red;
+}
+
+.small {
+  width: 100px;
+  height: 100px;
+  margin-top: 15px;
+  background-color: blue;
+}
+
+.image {
+  margin-top: 15px;
+}
+
+#priority.priority {
+  background: orange;
+}
+
+#priority.priority {
+  background: silver;
+}
+
+#priority.priority, .priority {
+  background: tomato;
+}
+
+.priority {
+  background: purple;
+}
+
+#priority {
+  margin-top: 15px;
+  width: 50px;
+  height: 50px;
+  background: green;
+}
diff --git a/devtools/target.html b/devtools/target.html
@@ -6,30 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="modulepreload" href="/db.js" />
     <title>Target</title>
-    <style>
-      .motto {
-        display: inline-block;
-      }
-      .scroll {
-        margin-top: 15px;
-        border: 1px solid black;
-        width: 400px;
-        height: 200px;
-        overflow: auto;
-      }
-      .big {
-        width: 300px;
-        height: 300px;
-        margin-top: 15px;
-        background-color: red;
-      }
-      .small {
-        width: 100px;
-        height: 100px;
-        margin-top: 15px;
-        background-color: blue;
-      }
-    </style>
+    <link rel="stylesheet" href="target.css" />
     <script src="chobitsu.js"></script>
   </head>
   <body>
@@ -79,6 +56,7 @@
     </div>
     <div class="big"></div>
     <div class="small"></div>
+    <div id="priority" class="priority"></div>
     <div class="image">
       <img src="https://chii.liriliri.io/logo.png" alt="placeholder" />
     </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chobitsu",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "Chrome devtools protocol JavaScript implementation",
   "main": "dist/chobitsu.js",
   "exports": {

diff --git a/src/lib/stylesheet.ts b/src/lib/stylesheet.ts
@@ -3,6 +3,8 @@ import Emitter from 'licia/Emitter'
 import strHash from 'licia/strHash'
 import toStr from 'licia/toStr'
 import trim from 'licia/trim'
+import cssPriority from 'licia/cssPriority'
+import map from 'licia/map'
 import { createId, getTextContent } from './util'
 
 const elProto: any = Element.prototype
@@ -37,7 +39,7 @@ export function getStyleSheets() {
 }
 
 export function getMatchedCssRules(node: any) {
-  const ret: any[] = []
+  const unsorted: any[] = []
 
   each(document.styleSheets, (styleSheet: any) => {
     let styleSheetId = styleSheet.styleSheetId
@@ -65,15 +67,23 @@ export function getMatchedCssRules(node: any) {
 
       if (!matchesEl) return
 
-      ret.push({
+      unsorted.push({
         selectorText: cssRule.selectorText,
         style: cssRule.style,
         styleSheetId,
       })
     })
   })
 
-  return ret
+  const sorted: any[] = []
+  const priorities = map(unsorted, ({ selectorText }, i) => {
+    return cssPriority(selectorText, { position: i })
+  })
+  each(priorities.sort(cssPriority.compare), property => {
+    sorted.push(unsorted[property[5]])
+  })
+
+  return sorted
 }
 
 export function formatStyle(style: any) {