Add `setTarget` method in StyleManager

src/style_manager/index.js

@@ -364,6 +364,16 @@ module.exports = () => {
       }
     },
 
+    /**
+     * Select different target for the Style Manager.
+     * It could be a Component, CSSRule, or a string of any CSS selector
+     * @param {Component|CSSRule|String} target
+     * @return {Styleable} A Component or CSSRule
+     */
+    setTarget(target, opts) {
+      return SectView.setTarget(target, opts);
+    },
+
     /**
      * Render sectors and properties
      * @return  {HTMLElement}

src/style_manager/view/SectorsView.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import { extend } from 'underscore';
+import { extend, isString } from 'underscore';
 
 const SectorView = require('./SectorView');
 
@@ -85,6 +85,43 @@ module.exports = Backbone.View.extend({
     pt.trigger('update');
   },
 
+  /**
+   * Select different target for the Style Manager.
+   * It could be a Component, CSSRule, or a string of any CSS selector
+   * @param {Component|CSSRule|String} target
+   * @return {Styleable} A Component or CSSRule
+   */
+  setTarget(target, opts = {}) {
+    const em = this.target;
+    const config = em.get('Config');
+    let model = target;
+
+    if (isString(target)) {
+      let rule;
+      const rules = em.get('CssComposer').getAll();
+
+      if (opts.targetIsClass) {
+        rule = rules.filter(
+          rule => rule.get('selectors').getFullString() === target
+        )[0];
+      } else {
+        rule = rules.filter(rule => rule.get('selectorsAdd') === target)[0];
+      }
+
+      if (!rule) {
+        rule = rules.add({ selectors: [], selectorsAdd: target });
+      }
+
+      model = rule;
+    }
+
+    const state = !config.devicePreviewMode ? model.get('state') : '';
+    const pt = this.propTarget;
+    pt.model = model;
+    pt.trigger('update');
+    return model;
+  },
+
   /**
    * Add new object to collection
    * @param {Object} model Model