From 563eb2d954eceae9fded33d62d371834d75392f5 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 24 Jan 2018 22:04:18 +0100
Subject: [PATCH] Refactor CSS Generator

---
 src/code_manager/model/CssGenerator.js     | 19 +++++++++----------
 src/css_composer/model/CssRule.js          |  7 ++++---
 test/specs/css_composer/e2e/CssComposer.js |  6 ++++++
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js
index d715c50db..fb977267f 100644
--- a/src/code_manager/model/CssGenerator.js
+++ b/src/code_manager/model/CssGenerator.js
@@ -43,19 +43,18 @@ module.exports = require('backbone').Model.extend({
 
     if (cssc) {
       const rules = cssc.getAll();
-      const mediaRules = {};
+      const atRules = {};
       const dump = [];
 
       rules.each(rule => {
-        const media = rule.get('mediaText');
+        const atRule = rule.getAtRule();
 
-        // If media is setted, I'll render it later
-        if (media) {
-          const mRules = mediaRules[media];
+        if (atRule) {
+          const mRules = atRules[atRule];
           if (mRules) {
             mRules.push(rule);
           } else {
-            mediaRules[media] = [rule];
+            atRules[atRule] = [rule];
           }
           return;
         }
@@ -63,14 +62,14 @@ module.exports = require('backbone').Model.extend({
         code += this.buildFromRule(rule, dump);
       });
 
-      // Get media rules
-      for (let media in mediaRules) {
+      // Get at-rules
+      for (let atRule in atRules) {
         let rulesStr = '';
-        const mRules = mediaRules[media];
+        const mRules = atRules[atRule];
         mRules.forEach(rule => (rulesStr += this.buildFromRule(rule, dump)));
 
         if (rulesStr) {
-          code += `@media ${media}{${rulesStr}}`;
+          code += `${atRule}{${rulesStr}}`;
         }
       }
 
diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js
index f0f63b923..a3d410f14 100644
--- a/src/css_composer/model/CssRule.js
+++ b/src/css_composer/model/CssRule.js
@@ -61,9 +61,10 @@ module.exports = Backbone.Model.extend(Styleable).extend({
   getAtRule() {
     const type = this.get('atRuleType');
     const condition = this.get('mediaText');
-    return (
-      (type ? `@${type}` : '') + (condition && type ? ` ${condition}` : '')
-    );
+    // Avoid breaks with the last condition
+    const typeStr = type ? `@${type}` : condition ? '@media' : '';
+
+    return typeStr + (condition && typeStr ? ` ${condition}` : '');
   },
 
   /**
diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js
index ed7675446..07cf70471 100644
--- a/test/specs/css_composer/e2e/CssComposer.js
+++ b/test/specs/css_composer/e2e/CssComposer.js
@@ -140,6 +140,8 @@ module.exports = {
               protected: false
             }
           ],
+          atRuleType: '',
+          singleAtRule: 0,
           important: 0,
           selectorsAdd: '',
           state: '',
@@ -178,6 +180,8 @@ module.exports = {
         rule1Out = JSON.parse(JSON.stringify(rule1Out));
         rule2Out = JSON.parse(JSON.stringify(rule2Out));
         var rule1Result = {
+          atRuleType: '',
+          singleAtRule: 0,
           important: 0,
           mediaText: '',
           selectors: [],
@@ -190,6 +194,8 @@ module.exports = {
           }
         };
         var rule2Result = {
+          atRuleType: '',
+          singleAtRule: 0,
           important: 0,
           mediaText: '',
           selectors: [],