Update `getModelToStyle` method and make it the single source of truth for styling

src/style_manager/index.js

@@ -251,20 +251,35 @@ module.exports = () => {
 
       if (em) {
         const config = em.getConfig();
+        const um = em.get('UndoManager');
         const cssC = em.get('CssComposer');
         const state = !config.devicePreviewMode ? model.get('state') : '';
         const valid = classes.getStyleable();
         const hasClasses = valid.length;
         const opts = { state };
+        let rule;
 
         if (hasClasses) {
           const deviceW = em.getCurrentMedia();
-          const CssRule = cssC.get(valid, state, deviceW);
-          if (CssRule) return CssRule;
+          rule = cssC.get(valid, state, deviceW);
+
+          if (!rule) {
+            // I stop undo manager here as after adding the CSSRule (generally after
+            // selecting the component) and calling undo() it will remove the rule from
+            // the collection, therefore updating it in style manager will not affect it
+            // #268
+            um.stop();
+            rule = cssC.add(valid, state, deviceW);
+            rule.setStyle(model.getStyle());
+            model.setStyle({});
+            um.start();
+          }
         } else if (config.avoidInlineStyle) {
-          const rule = cssC.getIdRule(id, opts);
-          return rule ? rule : cssC.setIdRule(id, {}, opts);
+          rule = cssC.getIdRule(id, opts);
+          !rule && (rule = cssC.setIdRule(id, {}, opts));
         }
+
+        model = rule;
       }
 
       return model;

src/style_manager/view/SectorsView.js

@@ -40,45 +40,33 @@ module.exports = Backbone.View.extend({
    * @private
    */
   targetUpdated() {
-    console.log('Target update');
-    var em = this.target;
+    const em = this.target;
+    const pt = this.propTarget;
     let model = em.getSelected();
-    const um = em.get('UndoManager');
-    const cc = em.get('CssComposer');
-    const avoidInline = em.getConfig('avoidInlineStyle');
+    if (!model) return;
 
-    if (!model) {
-      return;
-    }
-
-    const id = model.getId();
     const config = em.get('Config');
-    var classes = model.get('classes');
-    var pt = this.propTarget;
     const state = !config.devicePreviewMode ? model.get('state') : '';
-    const opts = { state };
-    var stateStr = state ? `:${state}` : null;
-    var view = model.view;
-    const media = em.getCurrentMedia();
+    const el = model.getEl();
     pt.helper = null;
 
-    if (view) {
-      pt.computed = window.getComputedStyle(
-        view.el,
-        state ? `:${state}` : null
-      );
+    // Create computed style container
+    if (el) {
+      const stateStr = state ? `:${state}` : null;
+      pt.computed = window.getComputedStyle(el, stateStr);
     }
 
+    // Create a new rule for the state as a helper
     const appendStateRule = (style = {}) => {
-      const sm = em.get('SelectorManager');
-      const helperClass = sm.add('hc-state');
-      let helperRule = cc.get([helperClass]);
+      const cc = em.get('CssComposer');
+      const helperCls = 'hc-state';
+      const rules = cc.getAll();
+      let helperRule = cc.getClassRule(helperCls);
 
       if (!helperRule) {
-        helperRule = cc.add([helperClass]);
+        helperRule = cc.setClassRule(helperCls);
       } else {
         // I will make it last again, otherwise it could be overridden
-        const rules = cc.getAll();
         rules.remove(helperRule);
         rules.add(helperRule);
       }
@@ -88,54 +76,8 @@ module.exports = Backbone.View.extend({
       pt.helper = helperRule;
     };
 
-    // If true the model will be always a rule
-    if (avoidInline) {
-      const ruleId = cc.getIdRule(id, opts);
-
-      if (!ruleId) {
-        model = cc.setIdRule(id, {}, opts);
-      } else {
-        model = ruleId;
-      }
-    }
-
-    if (classes.length) {
-      var valid = classes.getStyleable();
-      var iContainer = cc.get(valid, state, media);
-
-      if (!iContainer && valid.length) {
-        // I stop undo manager here as after adding the CSSRule (generally after
-        // selecting the component) and calling undo() it will remove the rule from
-        // the collection, therefore updating it in style manager will not affect it
-        // #268
-        um.stop();
-        iContainer = cc.add(valid, state, media);
-        iContainer.setStyle(model.getStyle());
-        model.setStyle({});
-        um.start();
-      }
-
-      if (!iContainer) {
-        // In this case it's just a Component without any valid selector
-        pt.model = model;
-        pt.trigger('update');
-        return;
-      }
-
-      // If the state is not empty, there should be a helper rule in play
-      // The helper rule will get the same style of the iContainer
-      state && appendStateRule(iContainer.getStyle());
-
-      pt.model = iContainer;
-      pt.trigger('update');
-      return;
-    }
-
-    if (state) {
-      const ruleState = cc.getIdRule(id, opts);
-      state && appendStateRule(ruleState && ruleState.getStyle());
-    }
-
+    model = em.get('StyleManager').getModelToStyle(model);
+    state && appendStateRule(model.getStyle());
     pt.model = model;
     pt.trigger('update');
   },