Refactor CSS Generator

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}}`;
         }
       }
 

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}` : '');
   },
 
   /**

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: [],