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: To import the template I did this steps:Click the trash icon to delete the current templateRun editor.setStyle("") to ensure that styles are emptyImport the mentioned template For some reason the output of the stored styles is differs bet...

Nested @media are not supported

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

💬 Answered: Styles incomplete after import with nest…

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.

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

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories