From 2332c017751fb8e3096ff77220183ae75cb2db6a Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 8 Oct 2018 21:35:57 +0200
Subject: [PATCH] Add ComponentStyleClear command and 'style-clear' option in
 Component

---
 src/commands/index.js                     |  3 ++-
 src/commands/view/ComponentStyleClear.js  | 28 +++++++++++++++++++++++
 src/dom_components/model/Component.js     |  2 ++
 src/dom_components/view/ComponentsView.js |  8 ++++++-
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/commands/view/ComponentStyleClear.js

diff --git a/src/commands/index.js b/src/commands/index.js
index 66dc08b10..b6f319247 100644
--- a/src/commands/index.js
+++ b/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/${
diff --git a/src/commands/view/ComponentStyleClear.js b/src/commands/view/ComponentStyleClear.js
new file mode 100644
index 000000000..9c667d4a9
--- /dev/null
+++ b/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;
+  }
+};
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 79c82cfe3..616f04271 100644
--- a/src/dom_components/model/Component.js
+++ b/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,
diff --git a/src/dom_components/view/ComponentsView.js b/src/dom_components/view/ComponentsView.js
index 13d74c87c..1ff9ebf3b 100644
--- a/src/dom_components/view/ComponentsView.js
+++ b/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);
+    }
   },
 
   /**