@node-projects/web-component-designer 0.1.181 → 0.1.183

package/dist/elements/item/DesignItem.d.ts

@@ -24,7 +24,7 @@ export declare class DesignItem implements IDesignItem {
     nodeReplaced: TypedEvent<void>;
     get window(): Window & typeof globalThis;
     get document(): Document;
-    get usableContainer(): ShadowRoot | Document | Element;
+    get usableContainer(): Element | Document | ShadowRoot;
     clone(): Promise<IDesignItem>;
     allMatching(selectors: string): Generator<IDesignItem, void, undefined>;
     replaceNode(newNode: Node): void;

package/dist/elements/item/DesignItem.js

@@ -605,14 +605,14 @@ export class DesignItem {
             try {
                 const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
                 if (rules) {
-                    return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+                    return [{ selector: null, declarations: localStyles, specificity: null }, ...rules];
                 }
             }
             catch (err) {
                 console.warn('getAppliedRules', err);
             }
         }
-        styles = [{ selector: null, declarations: localStyles, specificity: -1 }];
+        styles = [{ selector: null, declarations: localStyles, specificity: null }];
         this._stylesCache = styles;
         clearTimeout(this._cacheClearTimer);
         this._cacheClearTimer = setTimeout(() => this._stylesCache = null, 30);

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -23,9 +23,17 @@ export class CssCurrentPropertiesService extends AbstractCssPropertiesService {
     async getProperties(designItem) {
         if (!designItem || designItem.nodeType != NodeType.Element)
             return [];
-        let styles = designItem.getAllStyles();
+        let styles = designItem.getAllStyles().toReversed().sort((a, b) => {
+            if (a.specificity == null)
+                return -1;
+            if (b.specificity == null)
+                return 1;
+            if (a.specificity.A > b.specificity.A || a.specificity.B > b.specificity.B || a.specificity.C > b.specificity.C)
+                return -1;
+            return 0;
+        });
         let arr = styles.map(x => ({
-            name: x.selector ?? localName, description: x.stylesheetName ?? '', properties: [
+            name: (x.selector ?? localName) + (x.specificity ? ' (' + x.specificity.A + '-' + x.specificity.B + '-' + x.specificity.C + ')' : ''), description: x.stylesheetName ?? '', properties: [
                 ...x.declarations.map(y => ({
                     name: y.name,
                     renamable: true,

package/dist/elements/services/stylesheetService/AbstractStylesheetService.d.ts

@@ -3,6 +3,7 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { IDocumentStylesheet, IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from './IStylesheetService.js';
 import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
 import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { Specificity } from "./SpecifityCalculator.js";
 export declare abstract class AbstractStylesheetService implements IStylesheetService {
     protected _stylesheets: Map<string, {
         stylesheet: IStylesheet;
@@ -45,5 +46,5 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     }>;
     stylesheetsChanged: TypedEvent<void>;
     static patchStylesheetSelectorForDesigner(text: string): string;
-    protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;
+    protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): false | Specificity;
 }

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -1,5 +1,6 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { forceActiveAttributeName, forceFocusAttributeName, forceFocusVisibleAttributeName, forceFocusWithinAttributeName, forceHoverAttributeName, forceVisitedAttributeName } from "../../item/DesignItem.js";
+import { calculateSpecifity } from "./SpecifityCalculator.js";
 export class AbstractStylesheetService {
     _stylesheets = new Map();
     _documentStylesheets = new Map();
@@ -110,17 +111,21 @@ export class AbstractStylesheetService {
     }
     elementMatchesASelector(designItem, selectors) {
         if (designItem == null)
-            return true;
+            return false;
+        let s = null;
         for (let selector of selectors) {
             const patched = AbstractStylesheetService.patchStylesheetSelectorForDesigner(selector);
             try {
-                if (designItem.element.matches(patched))
-                    return true;
+                if (designItem.element.matches(patched)) {
+                    let spec = calculateSpecifity(selector);
+                    if (s === null || spec.A > s.A || spec.B > s.B || spec.C > s.C)
+                        s = spec;
+                }
             }
             catch (err) {
                 console.warn("invalid selector: ", selector, "patched: " + patched);
             }
         }
-        return false;
+        return s === null ? false : s;
     }
 }

package/dist/elements/services/stylesheetService/ISpecifity.js

@@ -0,0 +1 @@
+"use strict";

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts

@@ -1,9 +1,10 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { IDesignItem } from "../../item/IDesignItem.js";
+import { Specificity } from "./SpecifityCalculator.js";
 export interface IStyleRule {
     selector: string;
     declarations: IStyleDeclaration[];
-    specificity: number;
+    specificity: Specificity;
     stylesheetName?: string;
 }
 export interface IStyleDeclaration {

package/dist/elements/services/stylesheetService/SpecifityCalculator.d.ts

@@ -0,0 +1,3 @@
+export type Level = "A" | "B" | "C";
+export type Specificity = Record<Level, number>;
+export declare function calculateSpecifity(selector: string): Specificity;

package/dist/elements/services/stylesheetService/SpecifityCalculator.js

@@ -0,0 +1,72 @@
+var ParseState;
+(function (ParseState) {
+    ParseState[ParseState["none"] = 0] = "none";
+    ParseState[ParseState["parseName"] = 1] = "parseName";
+    ParseState[ParseState["parseAttribute"] = 2] = "parseAttribute";
+    ParseState[ParseState["parseInFunc"] = 3] = "parseInFunc";
+})(ParseState || (ParseState = {}));
+//todo special cases: 
+//:not :is :has = inner selector specifity
+//:where = 0 specifity
+//:nth-child :nth-last-child = inner sel. ?
+export function calculateSpecifity(selector) {
+    let s = { A: 0, B: 0, C: 0 };
+    let parseState = ParseState.none;
+    for (let n = 0; n < selector.length; n++) {
+        let c = selector[n];
+        if (parseState === ParseState.parseInFunc) {
+            if (c == ')') {
+                parseState = ParseState.none;
+            }
+        }
+        else if (parseState === ParseState.parseAttribute) {
+            if (c == ']') {
+                parseState = ParseState.none;
+            }
+        }
+        else {
+            switch (c) {
+                case '#':
+                    s.A++;
+                    parseState = ParseState.parseName;
+                    break;
+                case '.':
+                    s.B++;
+                    parseState = ParseState.parseName;
+                    break;
+                case '[':
+                    s.B++;
+                    parseState = ParseState.parseAttribute;
+                    break;
+                case '(':
+                    parseState = ParseState.parseInFunc;
+                    break;
+                case ':':
+                    if (selector[n + 1] !== ':') {
+                        s.B++;
+                        parseState = ParseState.parseName;
+                    }
+                    else {
+                        s.C++;
+                        parseState = ParseState.parseName;
+                        n++;
+                    }
+                    break;
+                case '>':
+                case ' ':
+                case '~':
+                case '+':
+                    parseState = ParseState.none;
+                    break;
+                case '*':
+                    break;
+                default:
+                    if (parseState === ParseState.none) {
+                        s.C++;
+                        parseState = ParseState.parseName;
+                    }
+            }
+        }
+    }
+    return s;
+}

package/dist/index.d.ts

@@ -140,6 +140,7 @@ export type { ISelectionService } from "./elements/services/selectionService/ISe
 export * from "./elements/services/selectionService/SelectionService.js";
 export type { IStyleRule, IStyleDeclaration, IStylesheet, IStylesheetService, IDocumentStylesheet } from "./elements/services/stylesheetService/IStylesheetService.js";
 export * from "./elements/services/stylesheetService/AbstractStylesheetService.js";
+export * from "./elements/services/stylesheetService/SpecifityCalculator.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
 export type { ITransactionItem } from "./elements/services/undoService/ITransactionItem.js";
 export type { IUndoService } from "./elements/services/undoService/IUndoService.js";

package/dist/index.js

@@ -93,6 +93,7 @@ export * from "./elements/services/refactorService/BindingsRefactorService.js";
 export * from "./elements/services/refactorService/TextRefactorService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export * from "./elements/services/stylesheetService/AbstractStylesheetService.js";
+export * from "./elements/services/stylesheetService/SpecifityCalculator.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
 export * from "./elements/services/undoService/UndoService.js";
 export * from "./elements/services/undoService/transactionItems/AttributeChangeAction.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.181",
+  "version": "0.1.183",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",