Add ComponentStyleClear command and 'style-clear' option in Component

src/commands/index.js

@@ -194,7 +194,8 @@ module.exports = () => {
         ['component-enter', 'ComponentEnter'],
         ['component-exit', 'ComponentExit'],
         ['canvas-clear', 'CanvasClear'],
-        ['component-delete', 'ComponentDelete']
+        ['component-delete', 'ComponentDelete'],
+        ['component-style-clear', 'ComponentStyleClear']
       ].forEach(
         item =>
           (defaultCommands[`core:${item[0]}`] = require(`./view/${

src/commands/view/ComponentStyleClear.js

@@ -0,0 +1,28 @@
+import { isArray } from 'underscore';
+
+module.exports = {
+  run(ed, sender, opts = {}) {
+    const { target } = opts;
+    const dc = ed.DomComponents;
+    const type = target.get('type');
+    const len = dc.getWrapper().find(`[data-gjs-type="${type}"]`).length;
+    const toRemove = [];
+
+    if (!len) {
+      const rules = ed.CssComposer.getAll();
+      let toClear = target.get('style-clear');
+      toClear = isArray(toClear) ? toClear : [toClear];
+
+      rules.forEach(rule => {
+        const selector = rule.selectorsToString();
+        toClear.forEach(part => {
+          part && selector.indexOf(part) >= 0 && toRemove.push(rule);
+        });
+      });
+
+      rules.remove(toRemove);
+    }
+
+    return toRemove;
+  }
+};

src/dom_components/model/Component.js

@@ -62,6 +62,7 @@ const avoidInline = em => em && em.getConfig('avoidInlineStyle');
  * will be hidden from the style manager. Default: `true`
  * @property {Array<String>} [stylable-require=[]] Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]`
  * @property {Array<String>} [unstylable=[]] Indicate an array of style properties which should be hidden from the style manager. Default: `[]`
+ * @property {Array<String>} [style-clear=''] This option comes handy when you need to remove component-specific rules. The editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: `''`
  * @property {Boolean} [highlightable=true] It can be highlighted with 'dotted' borders if true. Default: `true`
  * @property {Boolean} [copyable=true] True if it's possible to clone the component. Default: `true`
  * @property {Boolean} [resizable=false] Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer](https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js). Default: `false`
@@ -94,6 +95,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       badgable: true,
       stylable: true,
       'stylable-require': '',
+      'style-clear': '',
       unstylable: '',
       highlightable: true,
       copyable: true,

src/dom_components/view/ComponentsView.js

@@ -18,7 +18,13 @@ module.exports = Backbone.View.extend({
     view.remove.apply(view);
     const children = view.childrenView;
     children && children.stopListening();
-    em && em.trigger('component:remove', removed);
+    if (em) {
+      removed.get('style-clear') &&
+        em
+          .get('Commands')
+          .run('core:component-style-clear', { target: removed });
+      em.trigger('component:remove', removed);
+    }
   },
 
   /**