diff --git a/src/css_composer/index.js b/src/css_composer/index.js index 035b4719f..ac6b4b3e1 100644 --- a/src/css_composer/index.js +++ b/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} diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index adfc163e3..ec33be835 100644 --- a/src/dom_components/model/Component.js +++ b/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); }, diff --git a/test/specs/selector_manager/model/SelectorModels.js b/test/specs/selector_manager/model/SelectorModels.js index 482144e1d..88363cad5 100644 --- a/test/specs/selector_manager/model/SelectorModels.js +++ b/test/specs/selector_manager/model/SelectorModels.js @@ -38,7 +38,7 @@ module.exports = { }); - describe.only('Selectors', () => { + describe('Selectors', () => { var obj; beforeEach(() => {