From 32eb6e7e1f173fbf3de271e3ae974487298db10a Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 18 Nov 2021 07:55:28 +0100
Subject: [PATCH] Add getComponent to CssRule for component-specific rules

---
 src/css_composer/model/CssRule.js | 15 +++++++++++++++
 src/dom_components/index.js       |  4 ++++
 src/style_manager/index.js        |  2 ++
 3 files changed, 21 insertions(+)

diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js
index ea8fcd43e..f3847273c 100644
--- a/src/css_composer/model/CssRule.js
+++ b/src/css_composer/model/CssRule.js
@@ -21,6 +21,7 @@ const { CSS } = hasWin() ? window : {};
  *
  * [Device]: device.html
  * [State]: state.html
+ * [Component]: component.html
  */
 export default class CssRule extends Model.extend(Styleable) {
   defaults() {
@@ -188,6 +189,20 @@ export default class CssRule extends Model.extend(Styleable) {
     return states.filter(s => s.getName() === stateValue)[0] || null;
   }
 
+  /**
+   * Returns the related Component (valid only for component-specific rules).
+   * @returns {[Component]|null}
+   * @example
+   * const cmp = rule.getComponent();
+   * console.log(cmp?.toHTML());
+   */
+  getComponent() {
+    const sel = this.getSelectors();
+    const sngl = sel.length == 1 && sel.at(0);
+    const cmpId = sngl && sngl.isId() && sngl.get('name');
+    return (cmpId && this.em?.get('DomComponents').getById(cmpId)) || null;
+  }
+
   /**
    * Return the CSS string of the rule
    * @param {Object} [opts={}] Options (same as in `getDeclaration`)
diff --git a/src/dom_components/index.js b/src/dom_components/index.js
index 0545a29b9..22af4c81c 100644
--- a/src/dom_components/index.js
+++ b/src/dom_components/index.js
@@ -649,6 +649,10 @@ export default () => {
       return componentsById;
     },
 
+    getById(id) {
+      return componentsById[id] || null;
+    },
+
     destroy() {
       const all = this.allById();
       Object.keys(all).forEach(id => all[id] && all[id].remove());
diff --git a/src/style_manager/index.js b/src/style_manager/index.js
index 6e914d686..08a1d8400 100644
--- a/src/style_manager/index.js
+++ b/src/style_manager/index.js
@@ -363,6 +363,8 @@ export default () => {
       if (em && target) {
         const cssC = em.get('CssComposer');
         const cssGen = em.get('CodeManager').getGenerator('css');
+        const cmp = target.toHTML ? true : target.getComponent();
+        console.log({ cmp });
         const all = cssC
           .getRules(target.getSelectors().getFullString())
           .filter(rule => (state ? rule.get('state') === state : 1))