Add getComponent to CssRule for component-specific rules

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`)

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());

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))