diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js
index 689f1932c..1904449cf 100644
--- a/src/code_manager/model/CssGenerator.js
+++ b/src/code_manager/model/CssGenerator.js
@@ -66,7 +66,9 @@ module.exports = require('backbone').Model.extend({
       for (let atRule in atRules) {
         let rulesStr = '';
         const mRules = atRules[atRule];
-        mRules.forEach(rule => (rulesStr += this.buildFromRule(rule, dump)));
+        mRules.forEach(
+          rule => (rulesStr += this.buildFromRule(rule, dump, opts))
+        );
 
         if (rulesStr) {
           code += `${atRule}{${rulesStr}}`;
diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js
index 099262459..9e419da82 100644
--- a/test/specs/grapesjs/index.js
+++ b/test/specs/grapesjs/index.js
@@ -388,6 +388,22 @@ describe('GrapesJS', () => {
       expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`);
     });
 
+    it('Keep unused css classes/selectors option for media rules', () => {
+      cssString =
+        '.test2{color:red}.test3{color:blue} @media only screen and (max-width: 620px) { .notused { color: red; } } ';
+      documentEl = '<style>' + cssString + '</style>' + htmlString;
+      config.fromElement = 1;
+      config.storageManager = { type: 0 };
+      fixture.innerHTML = documentEl;
+      const editor = obj.init(config);
+      const css = editor.getCss({ keepUnusedStyles: 1 });
+      const protCss = editor.getConfig().protectedCss;
+      expect(editor.getStyle().length).toEqual(3);
+      expect(css).toEqual(
+        `${protCss}.test2{color:red;}.test3{color:blue;}@media only screen and (max-width: 620px){.notused{color:red;}}`
+      );
+    });
+
     it('Keep unused css classes/selectors option for init method', () => {
       config.fromElement = 1;
       config.storageManager = { type: 0 };