[Bug] Styles incomplete after import with nested @media-styles

Question

Hi,

when importing html-code with nested @media-queries the rules are not mapped correctly in the styles-variable. This causes styles to be broken in the result html, because some parts of the Css are just missing.

for testing purpose I imported this template:

<html>
    <head>
        <style type="text/css">
            @media (max-width: 1000px) {
                @media only screen {	 
                    .makeBold {
                        font-weight: bold;
                    }
                }
                @media only print {	 
                    .makeBold {
                         color: red;
                    }
                }
            }
        </style>
    </head>
    <body>
        <p class="makeBold">test</p>
        <p>test</p>
    </body>
</html>

To import the template I did this steps:

Click the trash icon to delete the current template
Run editor.setStyle("") to ensure that styles are empty
Import the mentioned template

For some reason the output of the stored styles is differs between the Webpage Demo and the Newsletter Demo:

Output of editor.store()["styles"] in Webpage Demo v0.14.43 (https://grapesjs.com/demo.html):

[  
   {  
      "selectors":[  

      ],
      "selectorsAdd":"",
      "style":{  
         "undefined":"undefined"
      },
      "mediaText":"(max-width: 1000px)",
      "state":"",
      "stylable":true,
      "atRuleType":"media",
      "singleAtRule":0,
      "important":0
   }
]

Output of editor.store()["styles"] in Newsletter Demo v0.14.43 (https://grapesjs.com/demo-newsletter-editor.html):

[  
   {  
      "selectors":[  
         {  
            "name":"makeBold",
            "label":"makeBold",
            "type":1,
            "active":true,
            "private":false,
            "protected":false
         }
      ],
      "selectorsAdd":"",
      "style":{  
         "font-weight":"bold",
         "color":"red"
      },
      "mediaText":"(max-width: 1000px)",
      "state":"",
      "stylable":true,
      "atRuleType":"media",
      "singleAtRule":0,
      "important":0
   }
]

In the Webpage-Demo the problem is that the styles are gone completely. In the Newsletter-Demo case the inner @media-query is lost.

[Bug] Styles incomplete after import with nested @media-styles

Question

Answers (2)

Related Questions and Answers

[QUESTION] - CssComposer - removes unused classes

[FEATURE REQUEST] Add command to get actual template imported into editor

[FEATURE REQUEST] Add Command to get actual template imported

[BUG] Media query rules are overridden by class rules in canvas

Paid Plugins That Match This Issue

Browse Plugin Categories