Been working with HubSpot lately, and run into an issue with the HubL comment delimiter, which is defined as {#. This has the potential to result in conflict with minified CSS that use media queries beginning with an #id.

Example:

@media screen and (max-width:540px){
  #abc
    { width:100% }
}

CSS minifiers will reduce the above example to the following:

@media screen and (max-width:600px){#abc{width:100%}}

This will result in all CSS that follows the opening of the media query to be commented out, since it will be interpreted as a HubL comment.

Adding a space after the {, or before the # would work, but this can be tricky, if you do not have the ability to reconfigure your minifier.

It can also be tricky if you are generating the HTML/CSS via an API, and post-editing is not a viable option.

Has anyone else has run into this issue? What was your workaround?