SC4
HubL Comments and CSS
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?
Here's some great HubSpot documentation as well.
https://designers.hubspot.com/docs/hubl/intro-to-hubl?#comments
Hey Steven,
Personally, I don't use the hubspot HubL, but looking at it, something like
@media screen and (max-width:540px){
.d{
//dummy class - doesn't match anything
}
#abc
{ width:100% }
}
should be an easy hack to fix it, unless the minifier is doing more than minifying i.e. stripping empty declarations. Though it could be easily forgotten about. Or you could just avoid id's and use classes (as I do already).
~Kris