Merge pull request #1054 from arthuralmeidap/dump-unused-styles Closes #1053

Dump unused styles

src/code_manager/model/CssGenerator.js

@@ -59,7 +59,7 @@ module.exports = require('backbone').Model.extend({
           return;
         }
 
-        code += this.buildFromRule(rule, dump);
+        code += this.buildFromRule(rule, dump, opts);
       });
 
       // Get at-rules
@@ -84,7 +84,7 @@ module.exports = require('backbone').Model.extend({
    * @param {Model} rule
    * @return {string} CSS string
    */
-  buildFromRule(rule, dump) {
+  buildFromRule(rule, dump, opts = {}) {
     let result = '';
     const selectorStrNoAdd = rule.selectorsToString({ skipAdd: 1 });
     const selectorsAdd = rule.get('selectorsAdd');
@@ -94,7 +94,11 @@ module.exports = require('backbone').Model.extend({
     // This will not render a rule if there is no its component
     rule.get('selectors').each(selector => {
       const name = selector.getFullName();
-      if (this.compCls.indexOf(name) >= 0 || this.ids.indexOf(name) >= 0) {
+      if (
+        this.compCls.indexOf(name) >= 0 ||
+        this.ids.indexOf(name) >= 0 ||
+        opts.dumpUnusedStyles
+      ) {
         found = 1;
       }
     });

src/commands/view/ExportTemplate.js

@@ -22,7 +22,7 @@ module.exports = {
     modal.setContent(this.$editors);
     modal.open();
     this.htmlEditor.setContent(editor.getHtml());
-    this.cssEditor.setContent(editor.getCss());
+    this.cssEditor.setContent(editor.getCss({ dumpUnusedSelectors: 1 }));
   },
 
   stop(editor) {

src/editor/config/config.js

@@ -279,6 +279,8 @@ module.exports = {
   traitManager: {},
 
   // Texts
+  textViewCode: 'Code',
 
-  textViewCode: 'Code'
+  // Dump unused styles within the editor.
+  dumpUnusedStyles: false
 };

src/editor/model/Editor.js

@@ -305,6 +305,8 @@ module.exports = Backbone.Model.extend({
     const config = this.config;
     const wrappesIsBody = config.wrappesIsBody;
     const avoidProt = opts.avoidProtected;
+    const dumpUnusedStyles =
+      opts.dumpUnusedStyles || this.config.dumpUnusedStyles;
     const cssc = this.get('CssComposer');
     const wrp = this.get('DomComponents').getComponent();
     const protCss = !avoidProt ? config.protectedCss : '';
@@ -313,7 +315,8 @@ module.exports = Backbone.Model.extend({
       protCss +
       this.get('CodeManager').getCode(wrp, 'css', {
         cssc,
-        wrappesIsBody
+        wrappesIsBody,
+        dumpUnusedStyles
       })
     );
   },

test/specs/grapesjs/index.js

@@ -376,5 +376,27 @@ describe('GrapesJS', () => {
       editor = obj.init(config);
       expect(editor.Commands.get('export-template').test).toEqual(1);
     });
+
+    it('Dump unused css classes/selectors', () => {
+      config.fromElement = 1;
+      config.storageManager = { type: 0 };
+      fixture.innerHTML = documentEl;
+      const editor = obj.init(config);
+      const css = editor.getCss({ dumpUnusedStyles: 1 });
+      const protCss = editor.getConfig().protectedCss;
+      expect(editor.getStyle().length).toEqual(2);
+      expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`);
+    });
+
+    it('Dump unused css classes/selectors using the init option', () => {
+      config.fromElement = 1;
+      config.storageManager = { type: 0 };
+      fixture.innerHTML = documentEl;
+      const editor = obj.init({ ...config, dumpUnusedStyles: 1 });
+      const css = editor.getCss();
+      const protCss = editor.getConfig().protectedCss;
+      expect(editor.getStyle().length).toEqual(2);
+      expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`);
+    });
   });
 });