BUG: Name of @container directive is missing a space when exporting CSS

[uncldrw]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome LTS

Reproducible demo link

/

Describe the bug

I noticed that the @container directive is missing a whitespace when exporting the code.

This is the code I provide:

@container portable (max-width: 639px) {
    .teaser-paa__headline {
      font-size: 24px;
      line-height: 29px;
      max-width: 272px;
      margin: 0 auto;
    }
  }

To use it in a custom block, I save the CSS into the style attribute of a block, which looks like this:

@container portable (max-width:639px){.teaser-paa__wrapper{max-width:calc(100% - 24px)}}

To ensure proper spacing, I tried adding an escaped space without success:

@container portable\u0020(max-width:639px){.teaser-paa__wrapper{max-width:calc(100% - 24px)}}

When opening the code export, there is a missing space after the @container name, which results in broken CSS that does not work in HTML.

Resulting CSS:

@container portable(max-width: 639px) { // missing whitespace after portable
    .teaser-paa__headline {
      font-size: 24px;
      line-height: 29px;
      max-width: 272px;
      margin: 0 auto;
    }
  }

This issue needs to be addressed to ensure the @container queries function correctly in the exported CSS.

Code of Conduct

• I agree to follow this project's Code of Conduct