From 84a1ddb277aa5bcf1c5397b94e838a62632cc5fd Mon Sep 17 00:00:00 2001 From: redhoodsu Date: Fri, 18 Oct 2024 18:57:35 +0800 Subject: [PATCH] release: v1.8.4 --- CHANGELOG.md | 4 ++++ devtools/target.css | 52 +++++++++++++++++++++++++++++++++++++++++++ devtools/target.html | 26 ++-------------------- package.json | 2 +- src/lib/stylesheet.ts | 16 ++++++++++--- 5 files changed, 72 insertions(+), 28 deletions(-) create mode 100644 devtools/target.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ad6ec3..6a2992c 100644 --- 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 new file mode 100644 index 0000000..e1dcd7d --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/devtools/target.html b/devtools/target.html index 8a794d5..dc57480 100644 --- a/devtools/target.html +++ b/devtools/target.html @@ -6,30 +6,7 @@ Target - + @@ -79,6 +56,7 @@
+
placeholder
diff --git a/package.json b/package.json index 2500f19..9977750 100644 --- 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 index 90b41de..d83b7ca 100644 --- 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,7 +67,7 @@ export function getMatchedCssRules(node: any) { if (!matchesEl) return - ret.push({ + unsorted.push({ selectorText: cssRule.selectorText, style: cssRule.style, styleSheetId, @@ -73,7 +75,15 @@ export function getMatchedCssRules(node: any) { }) }) - 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) {