Sync components with common selectors

src/selector_manager/view/ClassTagsView.js

@@ -78,17 +78,25 @@ export default Backbone.View.extend({
     const { em } = this;
     const target = this.getTarget();
     const cssC = em.get('CssComposer');
-    const selectors = target.getSelectors().getValid({ noDisabled: 1 });
+    const opts = { noDisabled: 1 };
+    const selectors = this.getCommonSelectors({ opts });
     const state = target.get('state');
     const mediaText = em.getCurrentMedia();
-    const ruleComponent = cssC.getIdRule(target.getId(), { state, mediaText });
-    const style = ruleComponent.getStyle();
     const rule =
       cssC.get(selectors, state, mediaText) ||
       cssC.add(selectors, state, mediaText);
+    let style;
+
+    this.getTargets().forEach(target => {
+      const ruleComponent = cssC.getIdRule(target.getId(), {
+        state,
+        mediaText
+      });
+      style = ruleComponent.getStyle();
+      ruleComponent.setStyle({});
+    });
 
-    rule.addStyle(style);
-    ruleComponent.setStyle({});
+    style && rule.addStyle(style);
     em.trigger('component:toggled');
     em.trigger('component:sync-style', {
       component: target,
@@ -184,21 +192,13 @@ export default Backbone.View.extend({
    */
   componentChanged: debounce(function() {
     const target = this.getTarget();
-    this.compTarget = target;
+    // this.compTarget = target;
     let validSelectors = [];
 
     if (target) {
       const state = target.get('state');
       state && this.getStates().val(state);
-      const selectors = target.getSelectors();
-      validSelectors = selectors.getValid();
-
-      if (this.config.componentFirst) {
-        const targets = this.getTargets();
-        const trSelectors = targets.map(tr => tr.getSelectors().getValid());
-        validSelectors = this._commonSelectors(...trSelectors);
-      }
-
+      validSelectors = this.getCommonSelectors();
       this.checkSync({ validSelectors });
     }
 
@@ -206,6 +206,12 @@ export default Backbone.View.extend({
     this.updateStateVis(target);
   }),
 
+  getCommonSelectors({ targets, opts = {} } = {}) {
+    const trgs = targets || this.getTargets();
+    const selectors = trgs.map(tr => tr.getSelectors().getValid(opts));
+    return this._commonSelectors(...selectors);
+  },
+
   _commonSelectors(...args) {
     if (!args.length) return [];
     if (args.length === 1) return args[0];