Add `getIdRule` to CssComposer and make use of it in Component

src/css_composer/index.js

@@ -293,6 +293,20 @@ module.exports = () => {
       },
 
 
+      /**
+       * Get css rule by id selector
+       * @param {string} name Id selector name, eg. 'my-id'
+       * @param  {Object} [opts={}]  Custom options
+       * @return {CssRule}
+       */
+      getIdRule(name, opts = {}) {
+        const state = opts.state || '';
+        const media = opts.mediaText || em.getCurrentMedia();
+        const selector = em.get('SelectorManager').get(name, Selector.TYPE_ID);
+        return selector && this.get(selector, state, media);
+      },
+
+
       /**
        * Render the block of CSS rules
        * @return {HTMLElement}

src/dom_components/model/Component.js

@@ -187,9 +187,18 @@ module.exports = Backbone.Model.extend(Styleable).extend({
 
 
   getStyle() {
-    const rule = this.rule;
-    const avoidInline = this.config.avoidInlineStyle;
-    return rule && avoidInline ? rule.getStyle() : Styleable.getStyle.call(this);
+    if (this.config.avoidInlineStyle) {
+      const state = this.get('state');
+      const cc = this.em.get('CssComposer');
+      const rule = cc.getIdRule(this.getId(), { state });
+      this.rule = rule;
+
+      if (rule) {
+        return rule.getStyle();
+      }
+    }
+
+    return Styleable.getStyle.call(this);
   },
 
 

test/specs/selector_manager/model/SelectorModels.js

@@ -38,7 +38,7 @@ module.exports = {
 
     });
 
-    describe.only('Selectors', () => {
+    describe('Selectors', () => {
         var obj;
 
         beforeEach(() => {